{"id":18514100,"url":"https://github.com/kooltheba/typescript-project-alfa","last_synced_at":"2026-04-17T04:32:48.523Z","repository":{"id":104892915,"uuid":"591628394","full_name":"KoolTheba/typescript-project-alfa","owner":"KoolTheba","description":"Interesting stuff when learning and using Typescript.","archived":false,"fork":false,"pushed_at":"2023-01-21T19:23:29.000Z","size":43,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-29T08:38:30.201Z","etag":null,"topics":["community-project","javascript","learning-by-doing","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"agpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/KoolTheba.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-01-21T10:41:04.000Z","updated_at":"2023-03-04T04:37:50.000Z","dependencies_parsed_at":null,"dependency_job_id":"bf8e7e82-6882-4541-be75-a6d749298461","html_url":"https://github.com/KoolTheba/typescript-project-alfa","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/KoolTheba/typescript-project-alfa","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KoolTheba%2Ftypescript-project-alfa","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KoolTheba%2Ftypescript-project-alfa/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KoolTheba%2Ftypescript-project-alfa/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KoolTheba%2Ftypescript-project-alfa/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/KoolTheba","download_url":"https://codeload.github.com/KoolTheba/typescript-project-alfa/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KoolTheba%2Ftypescript-project-alfa/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31915167,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-16T18:22:33.417Z","status":"online","status_checked_at":"2026-04-17T02:00:06.879Z","response_time":62,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["community-project","javascript","learning-by-doing","typescript"],"created_at":"2024-11-06T15:41:59.507Z","updated_at":"2026-04-17T04:32:48.506Z","avatar_url":"https://github.com/KoolTheba.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# typescript-project-alfa\nInteresting stuff when learning and using Typescript.\n\nOne of the best approaches on development\n\u003e The earlier you find a mistake, the easier it is to fix it (_Software Eng. at Google - O'REILLY_)\n\n## Resources\n- [The official Typescript Handbook](https://www.typescriptlang.org/docs/handbook/intro.html)\n- [The official Typescript Playground](https://www.typescriptlang.org/play)\n- [Typescript V3 Fundamentals by Mike North](https://www.typescript-training.com/course/fundamentals-v3)\n- 🇪🇸 [Platzi Typescript V4 Fundamentals](https://platzi.com/clases/2878-typescript)\n- 🇪🇸 [Madrid JS 211124 - Deberías usar TypeScript y he aquí el porqué](https://www.youtube.com/watch?v=51UpkA36gn0)\n\n## Config and first steps\n### Install TS\nYou'll use it on your development environment:\n\n```\nnpm install typescript --save-dev\n```\n### Automatic visualization of bugs in your code\nOne interesting approach when starting to learn Typescript is how, once installed TS, it analiyses continiously the bugs in your code, so it could prevent at least a 15% of bugs. You can enjoy it thanks to the static analysis running in your editor.\n\n\u003e File used: `search-for-errors.js` before config (`serach-for-errors.ts` after config)\n\n1. Add JS code with mistakes (as this one https://gist.github.com/nicobytes/bd18fbe87c037a10faa3296ea3992639)\n2. Add `//@ts-check` on the first line of your JS file\n3. Enjoy how TS analyses the errors and the errors' info that is giving you\n\n### Compiler\nRuns the compiler translating the .ts file to .js file. \nI added flags examples that won't be necessary after configuring your `tsconfig.json` file.\nThe target is the JS version that you want TS to read (https://www.typescriptlang.org/tsconfig#target). By default, target is ES3:\n\n\u003e File used: `00-hello.js` \u0026 `01-demo.js` (.ts extension after configuration)\n\n```\n// compile easily an specific file\nnpx tsc src/name-of-your-file.ts\n\n// add the ES6 target flag\nnpx tsc src/name-of-your-file.ts --target es6\n\n// dist folder flag\nmkdir dist\nnpx tsc src/name-of-your-file.ts --outDir dist\n```\n\n### Configuration\nAll previous steps are initial steps for checking how TS works. But for a real example of a project using TS, we need to configure TS via a configuration file. This is a fundamental configuration of your development environment to enjoy Typescript in our projects:\n\n```\n// create a tsconfig file. As target, my version 4.9.4 has set up ES6\nnpx tsc --init\n\n// basic options to habilitate (uncomment) in tsconfig.json\n\"outDir\": \"./dist\"\n\"rootDir\": \"./src\"\n\n// now just run the script for compilation\nnpx tsc\n\n// in watch mode (recommended)\nnpx tsc --watch\n```\n\nTS will throw you errors in your terminal, but it eventually compiles your JS files even with errors, so it truly relies in your criteria as developer.\n\n🧐 Extra resource: [Centralized Recommendations for TSConfig bases](https://github.com/tsconfig/bases#centralized-recommendations-for-tsconfig-bases)\n\n\n## The real deal: the syntax for types\nThese are the **basics** that you should start from when leaarning Typescript.\n\nCheck in each file the examples, how TS tells you if something is wrong and read carefully the syntax.\n\n\u003e Files used: `02-numbers.ts`, `03-booleans.ts`, `04-strings.ts`, `05-arrays.ts`\n\nThe 2 ways of interacting with the TS syntax are:\n- Inference of types: your editor helps you when writing in TS files, as it highlights the possible errors\n- Explicit types: classic syntax\n\n```ts\nlet productPrice: number = 100;\n```\n\nFor the (no) use of the TS type any: `06-any.ts`\n\nFor union types, which gives flexibility: `07-union.ts`\n\nFor alias and literal types: `08-alias.ts`\n\nFor null and undefined types: `09-null.ts`\n\nFor functions:\n  - `10-functions.ts`\n  - `11-return.ts`\n  - `12-objects.ts`\n\nFor how to use modules: `/products/*.ts`\n\nFor how to use external libraries: \n  - with TS support: `13-external-libraries.ts`\n  - without TS support: `13-libs-not-supported.ts`\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkooltheba%2Ftypescript-project-alfa","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkooltheba%2Ftypescript-project-alfa","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkooltheba%2Ftypescript-project-alfa/lists"}