{"id":18023658,"url":"https://github.com/sadanandpai/typescript-for-humans","last_synced_at":"2025-03-27T00:30:40.276Z","repository":{"id":108468390,"uuid":"399373226","full_name":"sadanandpai/typescript-for-humans","owner":"sadanandpai","description":"A kickstarter guide to writing TypeScript","archived":false,"fork":false,"pushed_at":"2021-09-17T03:12:47.000Z","size":34,"stargazers_count":10,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-04-14T09:04:17.264Z","etag":null,"topics":["angular","frontend","javascript","nodejs","react","reactjs","typescript","webdev"],"latest_commit_sha":null,"homepage":"","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sadanandpai.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}},"created_at":"2021-08-24T07:24:07.000Z","updated_at":"2024-02-29T15:38:06.000Z","dependencies_parsed_at":"2023-06-28T10:06:51.910Z","dependency_job_id":null,"html_url":"https://github.com/sadanandpai/typescript-for-humans","commit_stats":{"total_commits":14,"total_committers":1,"mean_commits":14.0,"dds":0.0,"last_synced_commit":"7b02575cc443b00f7d8f201cf4dc59b85e7ff6d6"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sadanandpai%2Ftypescript-for-humans","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sadanandpai%2Ftypescript-for-humans/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sadanandpai%2Ftypescript-for-humans/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sadanandpai%2Ftypescript-for-humans/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sadanandpai","download_url":"https://codeload.github.com/sadanandpai/typescript-for-humans/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245760542,"owners_count":20667886,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["angular","frontend","javascript","nodejs","react","reactjs","typescript","webdev"],"created_at":"2024-10-30T07:10:10.686Z","updated_at":"2025-03-27T00:30:39.996Z","avatar_url":"https://github.com/sadanandpai.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003eTypeScript for Humans\u003c/h1\u003e\n\u003ch3 align=\"center\"\u003eKick starter guide to writing TypeScript\u003c/h3\u003e\n\u003cdiv align=\"center\"\u003eOne of the most practical materials to start implementing TypeScript in no time. (⚠️ Repo is in progress)\u003cbr\u003e\u003cbr\u003e\n\u003c!--   \u003cp\u003e\n    \u003ca name=\"stars\"\u003e\u003cimg src=\"https://img.shields.io/github/stars/sadanandpai/typescript-for-humans?style=for-the-badge\"\u003e\u003c/a\u003e\n    \u003ca name=\"forks\"\u003e\u003cimg src=\"https://img.shields.io/github/forks/sadanandpai/typescript-for-humans?logoColor=green\u0026style=for-the-badge\"\u003e\u003c/a\u003e\n    \u003ca name=\"contributions\"\u003e\u003cimg src=\"https://img.shields.io/github/contributors/sadanandpai/typescript-for-humans?logoColor=green\u0026style=for-the-badge\"\u003e\u003c/a\u003e\n    \u003ca name=\"license\"\u003e\u003cimg src=\"https://img.shields.io/github/license/sadanandpai/typescript-for-humans?style=for-the-badge\"\u003e\u003c/a\u003e\n  \u003c/p\u003e --\u003e\n  Show your support by giving a ⭐ to this repo\n\u003c/div\u003e\n\n---\n\n### Table of Contents\n\n- [What is TypeScript](#1-What-is-TypeScript)\n- [Working of TypeScript](#2-Working-of-TypeScript)\n- [Difference between JavaScript and TypeScript](#3-Difference-between-JavaScript-and-TypeScript)\n- [Type System](#4-Type-System)\n- [Declaring primitives](#5-Declaring-primitives)\n- [Type literals](#6-Type-literals)\n- [Any and Unknown](#7-Any-and-Unknown)\n- [Objects](#8-Objects)\n- [Object property modifiers](#9-Object-property-modifiers)\n- [Type aliases](#10-Type-aliases)\n- [Arrays](#11-Arrays)\n- [Tuples](#12-Tuples)\n- [Enums](#13-Enums)\n- ℹ️ More coming soon\n\n### 1. What is TypeScript\n\n- TypeScript is JavaScript with syntax for types\n- TypeScript is a superset of JavaScript i.e any JavaScript code is a TypeScript (not vice-versa)\n- TypeScript is a language which compiles and gives JavaScript as output\n\n👉\u0026nbsp;\u0026nbsp;\u0026nbsp;As TypeScript is a superset, existing JS codebase can be gradually migrated to TS without requiring a complete migration at once\n\n\u003cbr\u003e\n\n### 2. Working of TypeScript\n\n- TypeScript compiles the code JavaScript\n  - TypeScript converts the code to AST (Abstract Syntax Tree)\n  - AST is checked by typechecker\n  - AST is then converted to JavaScript code\n\nTypeChecker is a special program that verifies that your code is typesafe\nType safety means using types to prevent programs from doing invalid/unexpected things\n\n👉\u0026nbsp;\u0026nbsp;\u0026nbsp;Browsers cannot understand the typescript code. So TypeScript code has to be converted to JavaScript to run in browser or other JavaScript host platforms\n\n\u003cbr\u003e\n\n### 3. Difference between JavaScript and TypeScript\n\n| Feature              | Syntax           | Description      |\n| -------------------- | ---------------- | ---------------- |\n| type binding         | dynamic          | static           |\n| auto type conversion | yes              | no (mostly)      |\n| type check           | runtime          | compile          |\n| error detection      | runtime (mostly) | compile (mostly) |\n\n👉\u0026nbsp;\u0026nbsp;\u0026nbsp;Adding [//@ts-check](https://www.typescriptlang.org/docs/handbook/intro-to-js-ts.html) in your JS file helps editor to detect errors and show type hints\n\n\u003cbr\u003e\n\n### 4. Type System\n\nA set of rules that a typechecker uses to assign types to your program\n2 kinds of type systems are present on TypeScript\n\n- Explicit type system\n  - Explicitly annotate the types. Ex: const value: number = 10;\n- Infered type system\n  - Let TypeScript decide the type by assigned value. Ex: const value = 10;\n\n👉\u0026nbsp;\u0026nbsp;\u0026nbsp;Best practice is to let TypeScript infer types as it can, keeping explicitly typed code to a minimum whenver needed\n\n\u003cbr\u003e\n\n### 5. Declaring primitives\n\n```ts\nlet myNum: number; // myNum has the type 'number' \u0026 can hold only number value\nmyNum = 10;\nmyNum = 45.98;\n\nlet myStr: string; // myStr has the type 'string' \u0026 can hold only string value\nmyStr = \"TypeScript\";\nmyStr = `sdafsfda`;\n\nlet myBool: boolean; // myBool has the type 'boolean' \u0026 can hold only boolean value\nmyBool = true;\nmyBool = 10 \u003c 1;\n\nlet myUndefined: undefined; // myUndefined has the type 'undefined' \u0026 can hold only undefined value\nmyUndefined = undefined;\n\nlet myNull: null; // myNull has the type 'null' \u0026 can hold only null value\nmyNull = null;\n\nlet myBigint: bigint; // myBigint has the type 'bigint' \u0026 can hold only bigint value\nmyBigint = 1234n;\n\nlet mySymbol: symbol; // mySymbol has the type 'symbol' \u0026 can hold only symbol value\nmySymbol = Symbol(\"a\");\n```\n\n👉\u0026nbsp;\u0026nbsp;\u0026nbsp;It is best to use \"const\" and assign the value to the variable wherever reassignment is not needed\n\n\u003cbr\u003e\n\n### 6. Type literals\n\n- A type that represents a single value and nothing else\n- Type literal narrowed version of a type\n\n```ts\nlet myBoolean: false; // myBoolean has type false and not 'boolean'\nlet myNum: 100 = 100; // myNum has type '100' and not 'number'\nconst myStr = \"hello\"; // myStr has type 'hello' and not 'string'\n```\n\n👉\u0026nbsp;\u0026nbsp;\u0026nbsp;TypeScript knows that once a primitive is assigned with const its value will never change, it infers the most narrow type it can for that variable\n\n\u003cbr\u003e\n\n### 7. Any and Unknown\n\n- any\n  - 'any' can be used as a type of variable when we do not have information of the type the variable has\n  - 'any' is a type that can assigned to any variable\n  - It can be considered as a supertype (parent) of all types i.e 'any' typed variable can behave like all the types we know in TypeScript\n  - Any should be used as the last resort and must be avoided in almost all the cases as it makes TypeScript purposeless\n\n```ts\nlet myVar: any = someUnknownReturnTypeFunction();\nmyvar.someFunction(); // no restriction as myVar is of type any\nmyVar = myVar + 10;\nmyVar = \"myVar can be a string also\";\n```\n\n- unknown\n  - 'unknown' can be used as a type of variable when we do not have information of the type the variable has\n  - 'unknown' is a type that can assigned to any variable, but that variable can be used only after confirmation of its type\n  - Variable assigned with unknown type can have a definite type when it is assinged with definite type value which is not the case with 'any'\n\n```ts\nlet myVar: unknown = someRandomFunctionFunction();\n\nif (typeof myVar === \"number\") {\n  // confirm before usage, unlike 'any'\n  const myVarInc = 1 + myVar;\n} else if (typeof myVar === \"string\") {\n  const myVarSmall = myVar.toLowerCase(); // allowed to call string methods as we know myVar is of string type\n}\n\nmyVar = \"string\"; // myVar is now 'string' type and not 'unknown' anymore\n```\n\n👉\u0026nbsp;\u0026nbsp;\u0026nbsp;Any is best suited for migration projects from JavaScript to TypeScript or as a temporary measure\u003cbr\u003e\n👉\u0026nbsp;\u0026nbsp;\u0026nbsp;Unknown can be used in the scenarios where you definitely do not know the type and may not know even in future\n\n\u003cbr\u003e\n\n### 8. Objects\n\n- Objects in TypeScript are JavaScript object structures which can be explicitly or inference typed\n- Object can have definite shape and the type structure declaration may look like\n\n```ts\n{\n    key1: string;\n    key2: number;\n    key3: boolean;\n    ...\n}\n```\n\n- Object declared with 'Definite Assignment' will not allow accessing or assigning non existing keys\n\n```ts\nconst obj: {  // object structure is explictly declared also know as 'object literal'\n  key: \"value\";\n};\n\nobj = {\n  key: \"hello\",\n};\n\n/** Or object structure is infered as { key: string } when assigned directly */\n// const obj = {\n//   key: \"hello\",\n// };\n\nobj.key;\nobj.someProperty; // ERROR: not allowed as it is not present on object type structure\nobj.key2 = \"new key value\"; // ERROR: not allowed as it is not present on object type structure\n```\n\n- The object type to which allows any which key access can be created using 'Index Signature' and 'optional key' if needed\n\n```ts\nlet obj: {\n  key1: number;\n  [key: string]: boolean; // Index Signature indicates object can have any string type key with any value to it\n};\n\nobj = { key1: 100 };\nobj = { key1: 100, key2: false };\nobj = { key1: 100, greeting: true };\nobj = { key1: 100, 10: true }; // as all the keys in object are stored as string 10 is considered as string '10'\n```\n\n👉\u0026nbsp;\u0026nbsp;\u0026nbsp;Index Signature `[key: string]: boolean;` where 'key' is just used for semantic purpose\n\n\u003cbr\u003e\n\n### 9. Object property modifiers\n\n- Property declared as an optional one in object, may or may not have that key in the value\n- Optional property on an object can created with the symbol '?'\n\n```ts\nlet obj: {\n  key1: number;\n  key2?: string; // ? indicates, it is an optional property on the object\n};\n\nobj = { key1: 100 };\nobj = { key1: 100, key2: \"Optional key value\" };\nobj = { key1: 100, greeting: true };\nobj = { key1: 100, 10: true }; // as all the keys in object are stored as string 10 is considered as string '10'\n```\n\n- Property declared as a readonly in an object, will follow the rules of 'const' keyword\n- Readonly property on an object can created with the prefix readonly\n\n```ts\nconst obj: {\n  key1: number;\n  readonly key2: string;\n} = { key1: 100, key2: \"Optional key value\" };\n\nobj.key2 = \"Hello\"; // key2 is readonly and not allowed to be reassigned\n```\n\n👉\u0026nbsp;\u0026nbsp;\u0026nbsp;Index Signature `[key: string]: boolean;` where 'key' is just used for semantic purpose\n\n\u003cbr\u003e\n\n### 10. Type aliases\n\n- Type alias is a user defined type which can be type literal or a type\n\n```ts\ntype Age = number; // Age is an alias for number\nlet age: Age;\nage = 100;\n\ntype Point = {  // Point alias for object of type { x: number, y: number }\n  x: number;\n  y: number;\n};\n\nconst coordinate: Point = {\n  x: 100,\n  y: 100,\n};\n```\n\n- Type alias will be useful and powerful when used as the union of different types\n\n```ts\ntype ID = number | string; // ID alias indicates the type can be either number or string\n\nlet userId: ID;\nuserId = 11;\nuserId = \"11\";\n\ntype Color = \"red\" | \"blue\" | \"green\"; // Color alias indicates the type can be one of the values\n\nlet color: Color;\ncolor = \"red\";\ncolor = \"yellow\"; // ERROR: other string values are not allowed\n```\n\n👉\u0026nbsp;\u0026nbsp;\u0026nbsp;type aliases are block-scoped\n\n\u003cbr\u003e\n\n### 11. Arrays\n\n- Array has two types syntaxes: T[] and Array\u003cT\u003e\n- The general rule of thumb is to keep arrays homogeneous.\n\n```ts\nlet array: string[]; // array of strings only\n// let array: Array\u003cstring\u003e;\nconst array = [1, 2, \"helo\"]; // type infered array of 'number' and 'string'\n```\n\n- When array is declared empty, it makes the array type as 'any' and the type narrows down depending on the value type pushed into the array. This is known as 'Gradual typing'\n\n```ts\nconst array = []; // array has 'any' type\narray.push(1); // array has 'number[]' type\narray.push(\"hello\"); // array has (string | number)[] type\n```\n\n👉\u0026nbsp;\u0026nbsp;\u0026nbsp;Though an empty array type widens when values are added, TypeScript will assign it a final type that can’t be expanded anymore, once it leaves the scope it was defined in.\n\n\u003cbr\u003e\n\n### 12. Tuples\n\n- Tuples are arrays having have fixed lengths, where the values at each index have types\n\n```ts\nlet tuple: [string, number];\ntuple = [\"id\", 1];\ntuple = [\"id\", \"one\"]; // ERROR\n```\n\n- Tuples can have optional slots denoted by '?'\n\n```ts\ntype Attribute = [string, string?]; // Equivalent to ([string] | [string, string])\nconst atrributes1: Attribute = [\"class\", \"container\"];\nconst atrributes2: Attribute = [\"disabled\"];\n```\n\n👉\u0026nbsp;\u0026nbsp;\u0026nbsp;Tuple can be readonly as well with the modifier 'readonly' (`let tuple: readonly [number] = [5];`)\n\n\u003cbr\u003e\n\n### 13. Enums\n\n- Enums allows for describing a value which could be one of a set of possible named constants\n- Enum properties when not assigned will have incremental numeric integer values starting from 0\n\n```ts\nenum Agreement {\n  No, // 0\n  Yes, // 1\n}\nhasUserAgreed = Agreement.Yes;\n\nenum Direction {\n  Up = 1,\n  Down, // 2\n  Left, // 3\n  Right, // 4\n}\ndirection: Direction = Direction.Down;\n```\n\n- Enums can also be string, computed values or heterogeneous mix as well\n\n```ts\nenum Color {\n  Blue = 1,\n  Red = '2',\n  White = '25'+ '5', // computed value\n}\n\nconst colorName = Color[255]; // reverse lookup\n```\n\n- Enums can be declared as 'const' which will not allow reverse lookups, and also doesn’t generate any JavaScript code instead inlines the enum member’s value.\n\n```ts\nconst enum Language { \n  English = 1,\n  French = 2,\n  Russian\n}\n\nconst language = Lanugage.French; // language will be assigned with value 2 in compile time rather than run time\n```\n\n👉\u0026nbsp;\u0026nbsp;\u0026nbsp;String Enums are useful. But numeric Enums have problems and leak bugs. So the usage of Enums are not recommended in general unless it is String Enums\n  \nℹ️ More coming soon\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsadanandpai%2Ftypescript-for-humans","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsadanandpai%2Ftypescript-for-humans","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsadanandpai%2Ftypescript-for-humans/lists"}