diff --git a/src/roadmaps/typescript/content/100-typescript/100-typescript-vs-javascript.md b/src/roadmaps/typescript/content/100-typescript/100-typescript-vs-javascript.md index f49b641dc..84322ed41 100644 --- a/src/roadmaps/typescript/content/100-typescript/100-typescript-vs-javascript.md +++ b/src/roadmaps/typescript/content/100-typescript/100-typescript-vs-javascript.md @@ -4,13 +4,11 @@ TypeScript is a superset of JavaScript that adds optional type annotations and o Here are a few key differences between TypeScript and JavaScript: -1. Types: TypeScript has optional type annotations while JavaScript is dynamically-typed. This means that in TypeScript, you can specify the data type of variables, parameters, and return values, which can help catch type-related errors at compile-time. -2. Syntax: TypeScript extends JavaScript syntax with features like interfaces, classes, and namespaces. This provides a more robust and organized structure for large-scale projects. -3. Tooling: TypeScript has better tooling support, such as better editor integration, type checking, and code refactoring. -4. Backwards Compatibility: TypeScript is fully compatible with existing JavaScript code, which means you can use TypeScript in any JavaScript environment. +- **Types**: TypeScript has optional type annotations while JavaScript is dynamically-typed. This means that in TypeScript, you can specify the data type of variables, parameters, and return values, which can help catch type-related errors at compile-time. +- **Syntax**: TypeScript extends JavaScript syntax with features like interfaces, classes, and namespaces. This provides a more robust and organized structure for large-scale projects. +- **Tooling**: TypeScript has better tooling support, such as better editor integration, type checking, and code refactoring. +- **Backwards Compatibility**: TypeScript is fully compatible with existing JavaScript code, which means you can use TypeScript in any JavaScript environment. Learn more from the following links: -- [Learning JavaScript and TypeScript](https://www.typescriptlang.org/docs/handbook/typescript-from-scratch.html#learning-javascript-and-typescript) -- [Difference between TypeScript and JavaScript](https://www.geeksforgeeks.org/difference-between-typescript-and-javascript/) -- [JavaScript vs TypeScript | Full Stack Course](https://www.youtube.com/watch?v=DxcpvaDglb4) \ No newline at end of file +- [Learning JavaScript and TypeScript](https://www.typescriptlang.org/docs/handbook/typescript-from-scratch.html#learning-javascript-and-typescript) \ No newline at end of file diff --git a/src/roadmaps/typescript/content/100-typescript/101-ts-js-interoperability.md b/src/roadmaps/typescript/content/100-typescript/101-ts-js-interoperability.md index 1d2511411..addc02566 100644 --- a/src/roadmaps/typescript/content/100-typescript/101-ts-js-interoperability.md +++ b/src/roadmaps/typescript/content/100-typescript/101-ts-js-interoperability.md @@ -1,4 +1,4 @@ -# TS JS Interoperability +# TS/JS Interoperability TypeScript and JavaScript have full interoperability, meaning you can use TypeScript code in JavaScript projects and vice versa. TypeScript is a superset of JavaScript, which means that any valid JavaScript code is also valid TypeScript code. diff --git a/src/roadmaps/typescript/content/100-typescript/102-install-configure/100-tsconfig-json.md b/src/roadmaps/typescript/content/100-typescript/102-install-configure/100-tsconfig-json.md index a4cc50e59..35b0eaabe 100644 --- a/src/roadmaps/typescript/content/100-typescript/102-install-configure/100-tsconfig-json.md +++ b/src/roadmaps/typescript/content/100-typescript/102-install-configure/100-tsconfig-json.md @@ -1,17 +1,17 @@ -# Tsconfig JSON +# tsconfig.json tsconfig.json is a configuration file in TypeScript that specifies the compiler options for building your project. It helps the TypeScript compiler understand the structure of your project and how it should be compiled to JavaScript. Some common options include: -- **target**: the version of JavaScript to compile to. -- **module**: the module system to use. -- **stric**": enables/disables strict type checking. -- **outDir**: the directory to output the compiled JavaScript files. -- **rootDir**: the root directory of the TypeScript files. -- **exclude**: an array of file/directory patterns to exclude from the compilation. +- `target`: the version of JavaScript to compile to. +- `module`: the module system to use. +- `strict`: enables/disables strict type checking. +- `outDir`: the directory to output the compiled JavaScript files. +- `rootDir`: the root directory of the TypeScript files. +- `exclude`: an array of file/directory patterns to exclude from the compilation. -Example: +Given below is the sample `tsconfig.json` file: -``` +```json { "compilerOptions": { "target": "es5", @@ -26,5 +26,4 @@ Example: Learn more from the following links: -- [What is a tsconfig.json](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html#handbook-content) -- [TypeScript Projects: What is a tsconfig.json?](https://www.youtube.com/watch?v=sLylejlr6lA) \ No newline at end of file +- [What is a tsconfig.json](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html#handbook-content) \ No newline at end of file diff --git a/src/roadmaps/typescript/content/100-typescript/102-install-configure/101-compiler-options.md b/src/roadmaps/typescript/content/100-typescript/102-install-configure/101-compiler-options.md index db1243679..bc328c87f 100644 --- a/src/roadmaps/typescript/content/100-typescript/102-install-configure/101-compiler-options.md +++ b/src/roadmaps/typescript/content/100-typescript/102-install-configure/101-compiler-options.md @@ -1,30 +1,11 @@ # Compiler Options -Compiler options in TypeScript are a set of configuration settings that control how the TypeScript compiler compiles your code. Here are some commonly used compiler options with examples: +TypeScript compiler accepts a number of command line options that allow you to customize the compilation process. These options can be passed to the compiler using the `--` prefix, for example: -1. target -2. module -3. strict -4. outDir -5. rootDir -6. exclude - -Have a look at the following example tsconfig.json: - -``` -{ - "compilerOptions": { - "target": "es5", - "module": "commonjs", - "strict": true, - "outDir": "./dist", - "rootDir": "./src", - "exclude": ["node_modules"] - } -} +```bash +tsc --target ES5 --module commonjs ``` Learn more from the following links: -- [Compiler Options](https://www.typescriptlang.org/docs/handbook/compiler-options.html#compiler-options) -- [TypeScript Compiler Options](https://www.youtube.com/watch?v=I1ZFsPK0Q-Y&vl=en) \ No newline at end of file +- [Compiler Options](https://www.typescriptlang.org/docs/handbook/compiler-options.html) \ No newline at end of file diff --git a/src/roadmaps/typescript/content/100-typescript/102-install-configure/index.md b/src/roadmaps/typescript/content/100-typescript/102-install-configure/index.md index 527a17581..92fd74f9d 100644 --- a/src/roadmaps/typescript/content/100-typescript/102-install-configure/index.md +++ b/src/roadmaps/typescript/content/100-typescript/102-install-configure/index.md @@ -1,56 +1,48 @@ -# Install Configure +# Install and Configure To install and configure TypeScript in your project, you need to perform the following steps: -- Install TypeScript globally on your machine using npm (Node Package Manager): - - ``` - npm install -g typescript - ``` - - Initialize npm in your project directory by running the following command: - ``` - npm init - ``` +```bash +npm init +``` - Install TypeScript as a project dependency by running the following command: - ``` - npm install --save-dev typescript - ``` - -- Create a tsconfig.json file in your project directory to specify the compiler options for building your project. For example: - - ``` - { - "compilerOptions": { - "target": "es5", - "module": "commonjs", - "strict": true, - "outDir": "./dist", - "rootDir": "./src", - "exclude": ["node_modules"] - } - } - ``` +```bash +npm install --save-dev typescript +``` + +- Create a `tsconfig.json` file in your project directory to specify the compiler options for building your project. For example: + +```json +{ + "compilerOptions": { + "target": "es5", + "module": "commonjs", + "strict": true, + "outDir": "./dist", + "rootDir": "./src", + "exclude": ["node_modules"] + } +} +``` - Compile your TypeScript code using the following command: - - ``` - tsc - ``` + +```bash +tsc +``` Note: You can also compile individual TypeScript files by specifying the file name after the tsc command.For example: - ``` - tsc index.ts - ``` +```bash +tsc index.ts +``` And you're all set! You can now start writing TypeScript code in your project. - Learn more from the following links: -- [How To Configure TypeScript](https://www.youtube.com/watch?v=SEnAS_ooHeA) -- [Installing TypeScript](https://www.typescriptlang.org/download) \ No newline at end of file +- [Install and Configure TypeScript](https://www.typescriptlang.org/download) \ No newline at end of file diff --git a/src/roadmaps/typescript/content/100-typescript/103-running-typescript/100-tsc.md b/src/roadmaps/typescript/content/100-typescript/103-running-typescript/100-tsc.md index 89bb18d5e..353e1e702 100644 --- a/src/roadmaps/typescript/content/100-typescript/103-running-typescript/100-tsc.md +++ b/src/roadmaps/typescript/content/100-typescript/103-running-typescript/100-tsc.md @@ -1,18 +1,18 @@ -# Tsc +# tsc `tsc` is the command line tool for the TypeScript compiler. It compiles TypeScript code into JavaScript code, making it compatible with the browser or any JavaScript runtime environment. You can use the `tsc` command to compile your TypeScript code by running the following command in your terminal or command prompt: - ``` - tsc - ``` +```bash +tsc +``` This command will compile all TypeScript files in your project that are specified in your `tsconfig.json` file. If you want to compile a specific TypeScript file, you can specify the file name after the `tsc` command, like this: - ``` - tsc index.ts - ``` +```bash +tsc index.ts +``` The `tsc` command has several options and flags that you can use to customize the compilation process. For example, you can use the `--target` option to specify the version of JavaScript to compile to, or the `--outDir` option to specify the output directory for the compiled JavaScript files. diff --git a/src/roadmaps/typescript/content/100-typescript/103-running-typescript/101-ts-node.md b/src/roadmaps/typescript/content/100-typescript/103-running-typescript/101-ts-node.md index bd001d384..0e7a49fb0 100644 --- a/src/roadmaps/typescript/content/100-typescript/103-running-typescript/101-ts-node.md +++ b/src/roadmaps/typescript/content/100-typescript/103-running-typescript/101-ts-node.md @@ -1,8 +1,6 @@ -# Ts Node +# ts-node -TypeScript is a statically-typed language that can be used with the Flutter framework to build cross-platform mobile apps. TypeScript offers features such as type checking, classes, interfaces, and more, which can help improve the development process and catch errors early. It can be used in Flutter by integrating it with the Dart programming language through a tool called dart2ts. This allows developers to use TypeScript with Flutter and take advantage of its benefits while still using Dart for the underlying runtime. +ts-node is a TypeScript execution and REPL for node.js, with source map and native ESM support. Learn more from the following links: -Learn more from the following links: - -- [TypeScript Node Explained *ts-node*](https://www.youtube.com/watch?v=22MpfOmemzY) +- [ts-node - GitHub Project](https://github.com/TypeStrong/ts-node) - [How To Run TypeScript Scripts with ts-node](https://www.digitalocean.com/community/tutorials/typescript-running-typescript-ts-node) \ No newline at end of file diff --git a/src/roadmaps/typescript/content/100-typescript/103-running-typescript/102-ts-playground.md b/src/roadmaps/typescript/content/100-typescript/103-running-typescript/102-ts-playground.md index fb8dc0317..1b48dd89c 100644 --- a/src/roadmaps/typescript/content/100-typescript/103-running-typescript/102-ts-playground.md +++ b/src/roadmaps/typescript/content/100-typescript/103-running-typescript/102-ts-playground.md @@ -1,6 +1,6 @@ -# Ts playground +# TS Playground -A TypeScript playground in Flutter refers to a development environment or an online tool that allows you to write, run, and debug TypeScript code in a Flutter environment. It's a way to test TypeScript code snippets and see the results immediately, without having to set up a full development environment or project. Some popular online TypeScript playgrounds for Flutter include Repl.it, CodeSandbox, and StackBlitz. These platforms provide an interactive development environment with all the necessary tools and features to write, test, and debug TypeScript code. +The TypeScript Playground is a great tool to learn TypeScript. It allows you to write TypeScript code and see the JavaScript output. It also allows you to share your code with others. Learn more from the following links: diff --git a/src/roadmaps/typescript/content/100-typescript/103-running-typescript/index.md b/src/roadmaps/typescript/content/100-typescript/103-running-typescript/index.md index 5267a841b..b0e5d57c0 100644 --- a/src/roadmaps/typescript/content/100-typescript/103-running-typescript/index.md +++ b/src/roadmaps/typescript/content/100-typescript/103-running-typescript/index.md @@ -2,16 +2,19 @@ To run TypeScript code, you'll need to have a TypeScript compiler installed. Here's a general process to run TypeScript code: -1. Write TypeScript code in a .ts file (e.g. app.ts) -2. Compile the TypeScript code into JavaScript using the TypeScript compiler: - ``` - tsc app.ts - ``` -3. Run the generated JavaScript code using a JavaScript runtime environment such as Node.js: - ``` - node app.js - ``` +- Write TypeScript code in a `.ts` file (e.g. `app.ts`) +- Compile the TypeScript code into JavaScript using the TypeScript compiler: + +```bash +tsc app.ts +``` + +- Run the generated JavaScript code using a JavaScript runtime environment such as Node.js: + +```bash +node app.js +``` Learn more from the following link: -- [Running your TypeScript](https://www.typescriptlang.org/docs/handbook/typescript-tooling-in-5-minutes.html#running-your-typescript-web-app) \ No newline at end of file +- [Running your TypeScript](https://www.typescriptlang.org/docs/handbook/typescript-tooling-in-5-minutes.html) \ No newline at end of file diff --git a/src/roadmaps/typescript/content/100-typescript/index.md b/src/roadmaps/typescript/content/100-typescript/index.md index 5e765815b..e2a268dfb 100644 --- a/src/roadmaps/typescript/content/100-typescript/index.md +++ b/src/roadmaps/typescript/content/100-typescript/index.md @@ -12,5 +12,4 @@ The main benefits of using TypeScript include: Learn more from the folowing links: - [Overview of TypeScript](https://www.typescriptlang.org/docs/handbook/typescript-from-scratch.html) -- [TypeScript: A Static Type Checker](https://www.typescriptlang.org/docs/handbook/typescript-from-scratch.html#typescript-a-static-type-checker) -- [Learn Complete TypeScript](https://www.youtube.com/watch?v=30LWjhZzg50) \ No newline at end of file +- [TypeScript Handbook](https://www.typescriptlang.org/docs/handbook/typescript-from-scratch.html) \ No newline at end of file diff --git a/src/roadmaps/typescript/content/101-typescript-types/100-boolean.md b/src/roadmaps/typescript/content/101-typescript-types/100-boolean.md index b156b03e7..b97df1e24 100644 --- a/src/roadmaps/typescript/content/101-typescript-types/100-boolean.md +++ b/src/roadmaps/typescript/content/101-typescript-types/100-boolean.md @@ -1,14 +1,12 @@ -# Boolean +# boolean -`boolean` is a primitive data type in TypeScript that represents a truth value, either true or false. +`boolean` is a primitive data type in TypeScript that represents a boolean value i.e. either true or false. Given below is an example of a boolean variable declaration: -For example: - - ``` - let isTrue: boolean = true; - let isFalse: boolean = false; - ``` +```typescript +let isTrue: boolean = true; +let isFalse: boolean = false; +``` Learn more from the following links: -- [Number, String, Boolean, Symbol and Object](https://www.typescriptlang.org/docs/handbook/declaration-files/do-s-and-don-ts.html#number-string-boolean-symbol-and-object) \ No newline at end of file +- [Number, String, Boolean, Symbol and Object](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#the-primitives-string-number-and-boolean) \ No newline at end of file diff --git a/src/roadmaps/typescript/content/101-typescript-types/101-number.md b/src/roadmaps/typescript/content/101-typescript-types/101-number.md index 529a724ba..db119fcaa 100644 --- a/src/roadmaps/typescript/content/101-typescript-types/101-number.md +++ b/src/roadmaps/typescript/content/101-typescript-types/101-number.md @@ -1,16 +1,12 @@ -# Number +# number It is a primitive data type in TypeScript that represents numeric values. It includes both integer and floating-point values. -For example: - - ``` - let intValue: number = 42; - let floatValue: number = 3.14; - ``` - -In TypeScript, numbers can be assigned to variables, passed as arguments to functions, and returned from functions. They are also compatible with arithmetic operators such as +, -, *, /, and % (modulus). +```typescript +let intValue: number = 42; +let floatValue: number = 3.14; +``` Learn more from the following links: -- [Number, String, Boolean, Symbol and Object](https://www.typescriptlang.org/docs/handbook/declaration-files/do-s-and-don-ts.html#number-string-boolean-symbol-and-object) \ No newline at end of file +- [Number, String, Boolean, Symbol and Object](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#the-primitives-string-number-and-boolean) \ No newline at end of file diff --git a/src/roadmaps/typescript/content/101-typescript-types/102-string.md b/src/roadmaps/typescript/content/101-typescript-types/102-string.md index 499ebf7e6..afa59cb90 100644 --- a/src/roadmaps/typescript/content/101-typescript-types/102-string.md +++ b/src/roadmaps/typescript/content/101-typescript-types/102-string.md @@ -1,13 +1,11 @@ -# String +# string -In TypeScript, the string is sequence of char values and also considered as an object. +It is a primitive data type in TypeScript that represents textual data. It is a set of elements of the 16-bit Unicode character set. -Syntax: - -``` -var var_name = new String(string); +```typescript +let name: string = 'John Doe'; ``` -Learn more from the following links: +Learn more from the following link -- [Number, String, Boolean, Symbol and Object](https://www.typescriptlang.org/docs/handbook/declaration-files/do-s-and-don-ts.html#number-string-boolean-symbol-and-object) \ No newline at end of file +- [Number, String, Boolean, Symbol and Object](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#the-primitives-string-number-and-boolean) \ No newline at end of file diff --git a/src/roadmaps/typescript/content/101-typescript-types/103-void.md b/src/roadmaps/typescript/content/101-typescript-types/103-void.md index 62d700842..f413f1764 100644 --- a/src/roadmaps/typescript/content/101-typescript-types/103-void.md +++ b/src/roadmaps/typescript/content/101-typescript-types/103-void.md @@ -1,18 +1,18 @@ -# Void +# void -Void is used where there is no data. For example, if a function does not return any value then you can specify void as return type. +`void` represents the return value of functions which don’t return a value. It’s the inferred type any time a function doesn’t have any `return` statements, or doesn’t return any explicit value from those return statements: -Example: - ``` - function sayHi(): void { - console.log('Hi!') - } +```typescript +// The inferred return type is void +function noop() { + return; +} +``` + +In JavaScript, a function that doesn’t return any value will implicitly return the value `undefined`. However, `void` and `undefined` are not the same thing in TypeScript. There are further details at the end of this chapter. - let speech: void = sayHi(); - console.log(speech); //Output: undefined - ``` Learn more from the following links: -- [void](https://www.typescriptlang.org/docs/handbook/2/functions.html#void) \ No newline at end of file +- [void - TypeScript Docs](https://www.typescriptlang.org/docs/handbook/2/functions.html#void) \ No newline at end of file diff --git a/src/roadmaps/typescript/content/101-typescript-types/104-undefined.md b/src/roadmaps/typescript/content/101-typescript-types/104-undefined.md index 0a1e3bbcd..1aad7ab51 100644 --- a/src/roadmaps/typescript/content/101-typescript-types/104-undefined.md +++ b/src/roadmaps/typescript/content/101-typescript-types/104-undefined.md @@ -1,19 +1,22 @@ -# Undefined +# undefined -In TypeScript, undefined is a built-in type that represents the absence of a value. It can be assigned to variables, properties, or function return values when there is no meaningful value to return. +JavaScript has two primitive values used to signal absent or uninitialized value: `null` (absent) and `undefined` (unintialized). -For example: +TypeScript has two corresponding *types* by the same names. How these types behave depends on whether you have the `strictNullChecks` option on. - ``` - let x: undefined; - x = undefined; // valid - x = null; // not valid +With `strictNullChecks` off, values that might be `null` or `undefined` can still be accessed normally, and the values `null` and `undefined` can be assigned to a property of any type. This is similar to how languages without `null` checks (e.g. C#, Java) behave. The lack of checking for these values tends to be a major source of bugs; TypeScript always recommend people turn `strictNullChecks` on if it’s practical to do so in the codebase. - function doSomething(): undefined { - // ... - return undefined; - } - ``` +With `strictNullChecks` on, when a value is `null` or `undefined`, you will need to test for those values before using methods or properties on that value. Just like checking for `undefined` before using an optional property, we can use narrowing to check for values that might be `null`: + +```typescript +function doSomething(x: string | null) { + if (x === null) { + // do nothing + } else { + console.log("Hello, " + x.toUpperCase()); + } +} +``` Learn more from the following links: diff --git a/src/roadmaps/typescript/content/101-typescript-types/105-null.md b/src/roadmaps/typescript/content/101-typescript-types/105-null.md index 171dc28b3..7f13a2151 100644 --- a/src/roadmaps/typescript/content/101-typescript-types/105-null.md +++ b/src/roadmaps/typescript/content/101-typescript-types/105-null.md @@ -1,13 +1,23 @@ -# Null +# null -In TypeScript, both undefined and null actually have their types named undefined and null respectively. Much like void, they’re not extremely useful on their own: +JavaScript has two primitive values used to signal absent or uninitialized value: `null` (absent) and `undefined` (unintialized). -``` -// Not much else we can assign to these variables! -let u: undefined = undefined; -let n: null = null; +TypeScript has two corresponding *types* by the same names. How these types behave depends on whether you have the `strictNullChecks` option on. + +With `strictNullChecks` off, values that might be `null` or `undefined` can still be accessed normally, and the values `null` and `undefined` can be assigned to a property of any type. This is similar to how languages without `null` checks (e.g. C#, Java) behave. The lack of checking for these values tends to be a major source of bugs; TypeScript always recommend people turn `strictNullChecks` on if it’s practical to do so in the codebase. + +With `strictNullChecks` on, when a value is `null` or `undefined`, you will need to test for those values before using methods or properties on that value. Just like checking for `undefined` before using an optional property, we can use narrowing to check for values that might be `null`: + +```typescript +function doSomething(x: string | null) { + if (x === null) { + // do nothing + } else { + console.log("Hello, " + x.toUpperCase()); + } +} ``` Learn more from the following links: -- [Null and Undefined](https://www.typescriptlang.org/docs/handbook/basic-types.html#null-and-undefined) \ No newline at end of file +- [null and undefined](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#null-and-undefined) \ No newline at end of file diff --git a/src/roadmaps/typescript/content/101-typescript-types/106-interface.md b/src/roadmaps/typescript/content/101-typescript-types/106-interface.md index 19a890d29..a6fa35783 100644 --- a/src/roadmaps/typescript/content/101-typescript-types/106-interface.md +++ b/src/roadmaps/typescript/content/101-typescript-types/106-interface.md @@ -2,16 +2,17 @@ TypeScript allows you to specifically type an object using an interface that can be reused by multiple objects. -Example: +```typescript +interface Person { + name: string; + age: number; +} - ``` - interface Publication { - isbn: string; - author: string; - publisher: string; - } - ``` +function greet(person: Person) { + return 'Hello ' + person.name; +} +``` Learn more from the following links: -- [Reusable Types (Interfaces)](https://www.typescriptlang.org/docs/handbook/declaration-files/by-example.html#reusable-types-interfaces) \ No newline at end of file +- [Object Types - Interfaces](https://www.typescriptlang.org/docs/handbook/2/objects.html) diff --git a/src/roadmaps/typescript/content/101-typescript-types/107-class.md b/src/roadmaps/typescript/content/101-typescript-types/107-class.md index 72de5620e..2d8e95e9a 100644 --- a/src/roadmaps/typescript/content/101-typescript-types/107-class.md +++ b/src/roadmaps/typescript/content/101-typescript-types/107-class.md @@ -2,24 +2,24 @@ In TypeScript, a class is a blueprint for creating objects with specific properties and methods. Classes are a fundamental concept in object-oriented programming. Here is an example of a simple class in TypeScript: - ``` - class Car { - make: string; - model: string; - year: number; - - constructor(make: string, model: string, year: number) { - this.make = make; - this.model = model; - this.year = year; - } - - drive() { - console.log(`Driving my ${this.year} ${this.make} ${this.model}`); - } - } - ``` +```typescript +class Car { + make: string; + model: string; + year: number; + + constructor(make: string, model: string, year: number) { + this.make = make; + this.model = model; + this.year = year; + } + + drive() { + console.log(`Driving my ${this.year} ${this.make} ${this.model}`); + } +} +``` Learn more from the following links: -- [Classes](https://www.typescriptlang.org/docs/handbook/declaration-files/by-example.html#classes) \ No newline at end of file +- [TypeScript Classes](https://www.typescriptlang.org/docs/handbook/2/classes.html) diff --git a/src/roadmaps/typescript/content/101-typescript-types/108-enum.md b/src/roadmaps/typescript/content/101-typescript-types/108-enum.md index 0cf02a7cc..043e28b0e 100644 --- a/src/roadmaps/typescript/content/101-typescript-types/108-enum.md +++ b/src/roadmaps/typescript/content/101-typescript-types/108-enum.md @@ -2,17 +2,21 @@ Enums is not a type-level extension of JavaScript. It allow a developer to define a set of named constants. Using enums can make it easier to document intent, or create a set of distinct cases. TypeScript provides both numeric and string-based enums. -Example: +Here is an example of a numeric enum in TypeScript: - ``` - enum Direction { - Up = 1, - Down, - Left, - Right, - } - ``` +```typescript +enum Direction { + Up = 1, + Down, + Left, + Right, +} +``` + +Above, we have a numeric enum where `Up` is initialized with `1`. All of the following members are auto-incremented from that point on. In other words, `Direction.Up` has the value `1`, `Down` has `2`, `Left` has `3`, and `Right` has `4`. + +If we left off the initializer for `Up`, it would have the value `0` and the rest of the members would be auto-incremented from there. Learn more from the following links: -- [TypeScript - Enums](https://www.typescriptlang.org/docs/handbook/enums.html) \ No newline at end of file +- [TypeScript - Enums](https://www.typescriptlang.org/docs/handbook/enums.html) diff --git a/src/roadmaps/typescript/content/101-typescript-types/109-array.md b/src/roadmaps/typescript/content/101-typescript-types/109-array.md index beeab72fd..6cbf99b50 100644 --- a/src/roadmaps/typescript/content/101-typescript-types/109-array.md +++ b/src/roadmaps/typescript/content/101-typescript-types/109-array.md @@ -1,6 +1,10 @@ # Array -To specify the type of an array like [1, 2, 3], you can use the syntax number[]; this syntax works for any type (e.g. string[] is an array of strings, and so on). You may also see this written as `Array`, which means the same thing. We’ll learn more about the syntax T when we cover generics. +To specify the type of an array like `[1, 2, 3]`, you can use the syntax `number[]`; this syntax works for any type (e.g. `string[]` is an array of strings, and so on). You may also see this written as `Array`, which means the same thing. + +```typescript +const numbers: number[] = [1, 2, 3]; +``` Learn more from the following links: diff --git a/src/roadmaps/typescript/content/101-typescript-types/110-tuple.md b/src/roadmaps/typescript/content/101-typescript-types/110-tuple.md index ee414a5b9..ae76d1ce5 100644 --- a/src/roadmaps/typescript/content/101-typescript-types/110-tuple.md +++ b/src/roadmaps/typescript/content/101-typescript-types/110-tuple.md @@ -2,10 +2,18 @@ A tuple type is another sort of Array type that knows exactly how many elements it contains, and exactly which types it contains at specific positions. - ``` - type StringNumberPair = [string, number]; - ``` +```typescript +type StringNumberPair = [string, number]; + +const pair: StringNumberPair = ['hello', 42]; + +const first = pair[0]; +const second = pair[1]; + +// Error: Index out of bounds +const third = pair[2]; +``` Learn more from the following links: -- [Tuple Types](https://www.typescriptlang.org/docs/handbook/2/objects.html#tuple-types) \ No newline at end of file +- [Tuple Types](https://www.typescriptlang.org/docs/handbook/2/objects.html#tuple-types) diff --git a/src/roadmaps/typescript/content/101-typescript-types/111-any.md b/src/roadmaps/typescript/content/101-typescript-types/111-any.md index a258415e1..7fdb0da9a 100644 --- a/src/roadmaps/typescript/content/101-typescript-types/111-any.md +++ b/src/roadmaps/typescript/content/101-typescript-types/111-any.md @@ -1,19 +1,21 @@ # Any -With `any` you can access any properties of it (which will in turn be of type any), call it like a function, assign it to (or from) a value of any type, or pretty much anything else that’s syntactically legal: +TypeScript has a special type, `any`, that you can use whenever you don’t want a particular value to cause typechecking errors. - ``` - let obj: any = { x: 0 }; - // None of the following lines of code will throw compiler errors. - // Using `any` disables all further type checking, and it is assumed - // you know the environment better than TypeScript. - obj.foo(); - obj(); - obj.bar = 100; - obj = "hello"; - const n: number = obj; - ``` +When a value is of type `any`, you can access any properties of it (which will in turn be of type `any`), call it like a function, assign it to (or from) a value of any type, or pretty much anything else that’s syntactically legal: + +```typescript +let obj: any = { x: 0 }; +// None of the following lines of code will throw compiler errors. +// Using `any` disables all further type checking, and it is assumed +// you know the environment better than TypeScript. +obj.foo(); +obj(); +obj.bar = 100; +obj = "hello"; +const n: number = obj; +``` Learn more from the following links: -- [any](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#any) \ No newline at end of file +- [any type in TypeScript](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#any) diff --git a/src/roadmaps/typescript/content/101-typescript-types/112-object.md b/src/roadmaps/typescript/content/101-typescript-types/112-object.md index 7bc788056..2ba6d444e 100644 --- a/src/roadmaps/typescript/content/101-typescript-types/112-object.md +++ b/src/roadmaps/typescript/content/101-typescript-types/112-object.md @@ -1,19 +1,19 @@ # Object -To define an object type, we simply list its properties and their types. +To define an `object` type, we simply list its properties and their types. For example, here’s a function that takes a point-like object: - ``` - // The parameter's type annotation is an object type - function printCoord(pt: { x: number; y: number }) { - console.log("The coordinate's x value is " + pt.x); - console.log("The coordinate's y value is " + pt.y); - } - printCoord({ x: 3, y: 7 }); - ``` +```typescript +// The parameter's type annotation is an object type +function printCoord(pt: { x: number; y: number }) { + console.log("The coordinate's x value is " + pt.x); + console.log("The coordinate's y value is " + pt.y); +} + +printCoord({ x: 3, y: 7 }); +``` Learn more from the following links: -- [Number, String, Boolean, Symbol and Object](https://www.typescriptlang.org/docs/handbook/declaration-files/do-s-and-don-ts.html#number-string-boolean-symbol-and-object) -- [Object Types](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#object-types) \ No newline at end of file +- [Object Types in TypeScript](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#object-types) \ No newline at end of file diff --git a/src/roadmaps/typescript/content/101-typescript-types/113-unknown.md b/src/roadmaps/typescript/content/101-typescript-types/113-unknown.md index 931aa63af..ee973240d 100644 --- a/src/roadmaps/typescript/content/101-typescript-types/113-unknown.md +++ b/src/roadmaps/typescript/content/101-typescript-types/113-unknown.md @@ -1,19 +1,18 @@ # Unknown -The unknown type represents any value. This is similar to the any type, but is safer because it’s not legal to do anything with an unknown value: +`unknown` is the type-safe counterpart of any. Anything is assignable to `unknown`, but `unknown` isn’t assignable to anything but itself and `any` without a type assertion or a control flow based narrowing. Likewise, no operations are permitted on an `unknown` without first asserting or narrowing to a more specific type. - ``` - function f1(a: any) { - a.b(); // OK - } - function f2(a: unknown) { - a.b(); - Object is of type 'unknown'. - } - ``` +```typescript +function f1(a: any) { + a.b(); // OK +} -This is useful when describing function types because you can describe functions that accept any value without having any values in your function body. +function f2(a: unknown) { + // Error: Property 'b' does not exist on type 'unknown'. + a.b(); +} +``` Learn more from the following links: -- [Unknown](https://www.typescriptlang.org/docs/handbook/2/functions.html#unknown) \ No newline at end of file +- [Unknown Type in TypeScript](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-0.html#new-unknown-top-type) diff --git a/src/roadmaps/typescript/content/101-typescript-types/114-never.md b/src/roadmaps/typescript/content/101-typescript-types/114-never.md index d4f8d2946..653605678 100644 --- a/src/roadmaps/typescript/content/101-typescript-types/114-never.md +++ b/src/roadmaps/typescript/content/101-typescript-types/114-never.md @@ -1,27 +1,27 @@ # Never -The never type represents the type of values that never occur. For instance, never is the return type for a function expression or an arrow function expression that always throws an exception or one that never returns. Variables also acquire the type never when narrowed by any type guards that can never be true. +The `never` type represents the type of values that never occur. For instance, `never` is the return type for a function expression or an arrow function expression that always throws an exception or one that never returns. Variables also acquire the type never when narrowed by any type guards that can never be `true`. -The never type is a subtype of, and assignable to, every type; however, no type is a subtype of, or assignable to, never (except never itself). Even any isn’t assignable to never. +The never type is a subtype of, and assignable to, every type; however, no type is a subtype of, or assignable to, `never` (except `never` itself). Even any isn’t assignable to `never`. Examples of functions returning never: - ``` - // Function returning never must not have a reachable end point - function error(message: string): never { - throw new Error(message); - } - - // Inferred return type is never - function fail() { - return error("Something failed"); - } - - // Function returning never must not have a reachable end point - function infiniteLoop(): never { - while (true) {} - } - ``` +```typescript +// Function returning never must not have a reachable end point +function error(message: string): never { + throw new Error(message); +} + +// Inferred return type is never +function fail() { + return error("Something failed"); +} + +// Function returning never must not have a reachable end point +function infiniteLoop(): never { + while (true) {} +} +``` Learn more from the following links: diff --git a/src/roadmaps/typescript/content/101-typescript-types/115-type-assertions/index.md b/src/roadmaps/typescript/content/101-typescript-types/115-type-assertions/index.md index 117327c2a..0300956ef 100644 --- a/src/roadmaps/typescript/content/101-typescript-types/115-type-assertions/index.md +++ b/src/roadmaps/typescript/content/101-typescript-types/115-type-assertions/index.md @@ -4,20 +4,20 @@ Type assertions in TypeScript are a way to tell the compiler to treat a value as There are two syntaxes for type assertions in TypeScript: -1. The "angle-bracket" syntax: `value` -2. The "as" syntax: value as `T` +- The "angle-bracket" syntax: `value` +- The "as" syntax: value as `T` For example: - ``` - let num = 42; +```typescript +let num = 42; - // using angle-bracket syntax - let str = num; +// using angle-bracket syntax +let str = num; - // using as syntax - let str2 = num as string; - ``` +// using as syntax +let str2 = num as string; +``` In both examples, `num` is a number, but the type assertions tell the compiler to treat the value as a string. diff --git a/src/roadmaps/typescript/content/101-typescript-types/116-satisfies-keyword.md b/src/roadmaps/typescript/content/101-typescript-types/116-satisfies-keyword.md index 0dc9a5a45..5409d705f 100644 --- a/src/roadmaps/typescript/content/101-typescript-types/116-satisfies-keyword.md +++ b/src/roadmaps/typescript/content/101-typescript-types/116-satisfies-keyword.md @@ -1,23 +1,59 @@ -# Satisfies Keyword +# satisfies Keyword TypeScript developers are often faced with a dilemma: we want to ensure that some expression matches some type, but also want to keep the most specific type of that expression for inference purposes. For example: - ``` - // Each property can be a string or an RGB tuple. - const palette = { - red: [255, 0, 0], - green: "#00ff00", - bleu: [0, 0, 255] - // ^^^^ sacrebleu - we've made a typo! - }; - // We want to be able to use array methods on 'red'... - const redComponent = palette.red.at(0); - // or string methods on 'green'... - const greenNormalized = palette.green.toUpperCase(); - ``` - -Learn more from the following links: +```typescript +// Each property can be a string or an RGB tuple. +const palette = { + red: [255, 0, 0], + green: "#00ff00", + bleu: [0, 0, 255] +// ^^^^ sacrebleu - we've made a typo! +}; + +// We want to be able to use array methods on 'red'... +const redComponent = palette.red.at(0); + +// or string methods on 'green'... +const greenNormalized = palette.green.toUpperCase(); +``` + +Notice that we’ve written `bleu`, whereas we probably should have written `blue`. We could try to catch that `bleu` typo by using a type annotation on palette, but we’d lose the information about each property. + +```typescript +type Colors = "red" | "green" | "blue"; +type RGB = [red: number, green: number, blue: number]; + +const palette: Record = { + red: [255, 0, 0], + green: "#00ff00", + bleu: [0, 0, 255] +// ~~~~ The typo is now correctly detected +}; +// But we now have an undesirable error here - 'palette.red' "could" be a string. +const redComponent = palette.red.at(0); +``` + +The `satisfies` operator lets us validate that the type of an expression matches some type, without changing the resulting type of that expression. As an example, we could use `satisfies` to validate that all the properties of palette are compatible with `string | number[]`: + +```typescript +type Colors = "red" | "green" | "blue"; +type RGB = [red: number, green: number, blue: number]; + +const palette = { + red: [255, 0, 0], + green: "#00ff00", + bleu: [0, 0, 255] +// ~~~~ The typo is now caught! +} satisfies Record; + +// Both of these methods are still accessible! +const redComponent = palette.red.at(0); +const greenNormalized = palette.green.toUpperCase(); +``` + +Learn more from the following resources: - [Satisfies Keyword](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-4-9.html#the-satisfies-operator) \ No newline at end of file diff --git a/src/roadmaps/typescript/content/101-typescript-types/index.md b/src/roadmaps/typescript/content/101-typescript-types/index.md index 62b058398..0e50f3f66 100644 --- a/src/roadmaps/typescript/content/101-typescript-types/index.md +++ b/src/roadmaps/typescript/content/101-typescript-types/index.md @@ -2,22 +2,22 @@ TypeScript has several built-in types, including: -1. number -2. string -3. boolean -4. any -5. void -6. null and undefined -7. never -8. object -9. symbol -10. Enumerated types (enum) -11. Tuple types -12. Array types -13. Union types -14. Intersection types -15. Type aliases -16. Type assertions +- number +- string +- boolean +- any +- void +- null and undefined +- never +- object +- symbol +- Enumerated types (enum) +- Tuple types +- Array types +- Union types +- Intersection types +- Type aliases +- Type assertions You can also create custom types in TypeScript using interfaces, classes, and type aliases. diff --git a/src/roadmaps/typescript/content/102-type-inference.md b/src/roadmaps/typescript/content/102-type-inference.md index e70debd21..29ea69ad1 100644 --- a/src/roadmaps/typescript/content/102-type-inference.md +++ b/src/roadmaps/typescript/content/102-type-inference.md @@ -4,7 +4,7 @@ Type inference in TypeScript refers to the process of automatically determining Here's an example of type inference in TypeScript: -``` +```typescript let name = "John Doe"; ``` @@ -12,5 +12,4 @@ In this example, the TypeScript compiler automatically infers that the type of t Learn more from the following links: -- [Type Inference](https://www.typescriptlang.org/docs/handbook/type-inference.html#handbook-content) -- [Type Inference in TypeScript](https://www.tutorialsteacher.com/typescript/type-inference) \ No newline at end of file +- [Type Inference](https://www.typescriptlang.org/docs/handbook/type-inference.html#handbook-content) \ No newline at end of file diff --git a/src/roadmaps/typescript/content/103-type-compatibility.md b/src/roadmaps/typescript/content/103-type-compatibility.md index 11910dea4..baab7cf9a 100644 --- a/src/roadmaps/typescript/content/103-type-compatibility.md +++ b/src/roadmaps/typescript/content/103-type-compatibility.md @@ -1,24 +1,23 @@ # Type Compatibility -Type compatibility in TypeScript refers to the compatibility between different types in TypeScript. TypeScript uses structural typing to determine type compatibility. This means that two types are considered compatible if they have the same structure, regardless of their names. +TypeScript uses structural typing to determine type compatibility. This means that two types are considered compatible if they have the same structure, regardless of their names. Here's an example of type compatibility in TypeScript: - ``` - interface Point { - x: number; - y: number; - } +```typescript +interface Point { +x: number; +y: number; +} - let p1: Point = { x: 10, y: 20 }; - let p2: { x: number; y: number } = p1; +let p1: Point = { x: 10, y: 20 }; +let p2: { x: number; y: number } = p1; - console.log(p2.x); // Output: 10 - ``` +console.log(p2.x); // Output: 10 +``` In this example, `p1` has the type `Point`, while `p2` has the type `{ x: number; y: number }`. Despite the fact that the two types have different names, they are considered compatible because they have the same structure. This means that you can assign a value of type `Point` to a variable of type `{ x: number; y: number }`, as we do with `p1` and `p2` in this example. Learn more from the following links: -- [Type Compatibility](https://www.typescriptlang.org/docs/handbook/type-compatibility.html) -- [Tutorial - Type Compatibility in TypeScript](youtube.com/watch?v=wqm5ibtCSf0) \ No newline at end of file +- [Type Compatibility](https://www.typescriptlang.org/docs/handbook/type-compatibility.html) \ No newline at end of file diff --git a/src/roadmaps/typescript/content/104-combining-types/100-union-types.md b/src/roadmaps/typescript/content/104-combining-types/100-union-types.md index 02670f36e..250f34ff2 100644 --- a/src/roadmaps/typescript/content/104-combining-types/100-union-types.md +++ b/src/roadmaps/typescript/content/104-combining-types/100-union-types.md @@ -1,16 +1,15 @@ # Union Types -Union Types in TypeScript allow you to specify multiple possible types for a single variable or parameter. A union type is written as a vertical bar (|) separated list of types. +Union Types in TypeScript allow you to specify multiple possible types for a single variable or parameter. A union type is written as a vertical bar `|` separated list of types. For example, consider a function that takes either a string or a number as an argument: - ``` - function combine(input1: string | number, input2: string | number) { - return input1 + input2; - } - ``` +```typescript +function combine(input1: string | number, input2: string | number) { + return input1 + input2; +} +``` Learn more from the following links: -- [Unions Types](https://www.typescriptlang.org/docs/handbook/unions-and-intersections.html) -- [Union Types in TypeScript](https://www.typescriptlang.org/docs/handbook/unions-and-intersections.html) \ No newline at end of file +- [Union Types in TypeScript](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#union-types) \ No newline at end of file diff --git a/src/roadmaps/typescript/content/104-combining-types/101-intersection-types.md b/src/roadmaps/typescript/content/104-combining-types/101-intersection-types.md index c5c363ee8..7f325a1f1 100644 --- a/src/roadmaps/typescript/content/104-combining-types/101-intersection-types.md +++ b/src/roadmaps/typescript/content/104-combining-types/101-intersection-types.md @@ -1,22 +1,17 @@ # Intersection Types -Intersection Types in TypeScript allow you to combine multiple types into a single type. An intersection type is written as an ampersand (&) separated list of types. +An intersection type creates a new type by combining multiple existing types. The new type has all features of the existing types. -For example, consider an object that has both a name property and a email property: +To combine types, you use the `&` operator as follows: - ``` - interface User { - name: string; - email: string; - } +```typescript +type typeAB = typeA & typeB; +``` - const user: User = { - name: 'John Doe', - email: 'johndoe@example.com' - }; - ``` +The `typeAB` will have all properties from both typeA and typeB. + +Note that the union type uses the `|` operator that defines a variable which can hold a value of either `typeA` or `typeB` Learn more from the following links: -- [Intersection Types](https://www.typescriptlang.org/docs/handbook/unions-and-intersections.html#intersection-types) -- [Implement Intersection Types in the Typescript](https://www.youtube.com/watch?v=adr7W5uyIMk) \ No newline at end of file +- [Intersection Types in TypeScript](https://www.typescripttutorial.net/typescript-tutorial/typescript-intersection-types/) \ No newline at end of file diff --git a/src/roadmaps/typescript/content/104-combining-types/102-type-aliases.md b/src/roadmaps/typescript/content/104-combining-types/102-type-aliases.md index b6715c3ab..7aa6c4116 100644 --- a/src/roadmaps/typescript/content/104-combining-types/102-type-aliases.md +++ b/src/roadmaps/typescript/content/104-combining-types/102-type-aliases.md @@ -4,17 +4,16 @@ A Type Alias in TypeScript allows you to create a new name for a type. Here's an example: - ``` - type Name = string; - type Age = number; - type User = { name: Name; age: Age }; +```typescript +type Name = string; +type Age = number; +type User = { name: Name; age: Age }; - const user: User = { name: 'John', age: 30 }; - ``` +const user: User = { name: 'John', age: 30 }; +``` In the example above, `Name` and `Age` are type aliases for `string` and `number` respectively. And `User` is a type alias for an object with properties `name` of type `Name` and `age` of type `Age`. Learn more from the following links: -- [Type Aliases](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#type-aliases) -- [TypeScript Tutorial - Type Aliases](youtube.com/watch?v=AmpwfbdFYL8) \ No newline at end of file +- [Type Aliases](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#type-aliases) \ No newline at end of file diff --git a/src/roadmaps/typescript/content/104-combining-types/103-keyof-operator.md b/src/roadmaps/typescript/content/104-combining-types/103-keyof-operator.md index bf337d685..cf09cadcc 100644 --- a/src/roadmaps/typescript/content/104-combining-types/103-keyof-operator.md +++ b/src/roadmaps/typescript/content/104-combining-types/103-keyof-operator.md @@ -1,22 +1,20 @@ -# Keyof Operator +# keyof Operator -The keyof operator in TypeScript is used to get the union of keys from an object type. -Here's an example of how it can be used: +The `keyof` operator in TypeScript is used to get the union of keys from an object type. Here's an example of how it can be used: - ``` - interface User { - name: string; - age: number; - location: string; - } +```typescript +interface User { + name: string; + age: number; + location: string; +} - type UserKeys = keyof User; // "name" | "age" | "location" - const key: UserKeys = "name"; - ``` +type UserKeys = keyof User; // "name" | "age" | "location" +const key: UserKeys = "name"; +``` In this example, `UserKeys` is a type that represents the union of keys from the `User` interface, which is `"name"` | `"age"` | `"location"`. And a constant named `key` with the type `UserKeys` is declared with the value `"name"`. Learn more from the following links: -- [Keyof Type Operator](https://www.typescriptlang.org/docs/handbook/2/keyof-types.html#handbook-content) -- [Typescript Generics - Understanding the keyof Operator](https://www.youtube.com/watch?v=uy6fw4znJF4) \ No newline at end of file +- [Keyof Type Operator](https://www.typescriptlang.org/docs/handbook/2/keyof-types.html#handbook-content) \ No newline at end of file diff --git a/src/roadmaps/typescript/content/104-combining-types/index.md b/src/roadmaps/typescript/content/104-combining-types/index.md index b9d8423b4..a83c2614e 100644 --- a/src/roadmaps/typescript/content/104-combining-types/index.md +++ b/src/roadmaps/typescript/content/104-combining-types/index.md @@ -2,30 +2,37 @@ In TypeScript, you can combine types using type union and type intersection. -Type Union: +### Type Union: + The union operator `|` is used to combine two or more types into a single type that represents all the possible types. For example: - ``` - type stringOrNumber = string | number; - let value: stringOrNumber = "hello"; - value = 42; - ``` +```typescript +type stringOrNumber = string | number; +let value: stringOrNumber = "hello"; + +value = 42; +``` + +### Type Intersection: -Type Intersection: The intersection operator `&` is used to intersect two or more types into a single type that represents the properties of all the types. For example: - ``` - interface A { - a: string; - } - interface B { - b: number; - } - type AB = A & B; - let value: AB = { a: "hello", b: 42 }; - ``` +```typescript +interface A { + a: string; +} + +interface B { + b: number; +} + +type AB = A & B; +let value: AB = { a: "hello", b: 42 }; +``` Learn more from the following links: -- [Creating Types from Types](https://www.typescriptlang.org/docs/handbook/2/types-from-types.html#handbook-content) -- [Typescript - Combining Types with Generic](https://www.youtube.com/watch?v=Z3g8dVFsuMM) \ No newline at end of file +- [Union Types in TypeScript](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#union-types) +- [Intersection Types in TypeScript](https://www.typescripttutorial.net/typescript-tutorial/typescript-intersection-types/) +- [Type Aliases](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#type-aliases) +- [Keyof Type Operator](https://www.typescriptlang.org/docs/handbook/2/keyof-types.html#handbook-content) \ No newline at end of file diff --git a/src/roadmaps/typescript/content/105-type-guards/100-typeof-operator.md b/src/roadmaps/typescript/content/105-type-guards/100-typeof-operator.md index 3d1bd90b4..15c6ffe5c 100644 --- a/src/roadmaps/typescript/content/105-type-guards/100-typeof-operator.md +++ b/src/roadmaps/typescript/content/105-type-guards/100-typeof-operator.md @@ -1 +1,17 @@ -# Typeof operator \ No newline at end of file +# typeof Operator + +The `typeof` operator is used to check the type of a variable. It returns a string value representing the type of the variable. + +```typescript +let value: string | number = "hello"; + +if (typeof value === "string") { + console.log("value is a string"); +} else { + console.log("value is a number"); +} +``` + +Learn more from the following links: + +- [Type Guards and Differentiating Types](https://www.typescriptlang.org/docs/handbook/2/narrowing.html#typeof-type-guards) \ No newline at end of file diff --git a/src/roadmaps/typescript/content/105-type-guards/101-instanceof-operator.md b/src/roadmaps/typescript/content/105-type-guards/101-instanceof-operator.md index eade0f6e4..29ba434ac 100644 --- a/src/roadmaps/typescript/content/105-type-guards/101-instanceof-operator.md +++ b/src/roadmaps/typescript/content/105-type-guards/101-instanceof-operator.md @@ -1 +1,27 @@ -# Instanceof operator \ No newline at end of file +# instanceOf operator + +The `instanceof` operator is a way to narrow down the type of a variable. It is used to check if an object is an instance of a class, interface, or type. + +```typescript +class Bird { + fly() { + console.log('flying...'); + } + layEggs() { + console.log('laying eggs...'); + } +} + +const pet = new Bird(); + +// instanceof +if (pet instanceof Bird) { + pet.fly(); +} else { + console.log('pet is not a bird'); +} +``` + +Learn more from the following links: + +- [instanceOf Operator](https://www.typescriptlang.org/docs/handbook/2/narrowing.html#instanceof-narrowing) \ No newline at end of file diff --git a/src/roadmaps/typescript/content/105-type-guards/102-equality.md b/src/roadmaps/typescript/content/105-type-guards/102-equality.md index af741f4a3..bb0875bce 100644 --- a/src/roadmaps/typescript/content/105-type-guards/102-equality.md +++ b/src/roadmaps/typescript/content/105-type-guards/102-equality.md @@ -1 +1,22 @@ -# Equality \ No newline at end of file +# Equality + +TypeScript also uses switch statements and equality checks like `===`, `!==`, `==`, and `!=` to narrow types. For example: + +```typescript +function example(x: string | number, y: string | boolean) { + if (x === y) { + // We can now call any 'string' method on 'x' or 'y'. + x.toUpperCase(); + y.toLowerCase(); + } else { + console.log(x); + console.log(y); + } +} +``` + +When we checked that `x` and `y` are both equal in the above example, TypeScript knew their types also had to be equal. Since string is the only common type that both `x` and `y` could take on, TypeScript knows that `x` and `y` must be a string in the first branch. + +Learn more from the following links: + +- [Equality Narrowing](https://www.typescriptlang.org/docs/handbook/2/narrowing.html#equality-narrowing) \ No newline at end of file diff --git a/src/roadmaps/typescript/content/105-type-guards/103-truthiness.md b/src/roadmaps/typescript/content/105-type-guards/103-truthiness.md index 595372a17..de3633592 100644 --- a/src/roadmaps/typescript/content/105-type-guards/103-truthiness.md +++ b/src/roadmaps/typescript/content/105-type-guards/103-truthiness.md @@ -1 +1,19 @@ -# Truthiness \ No newline at end of file +# Truthiness + +Truthiness might not be a word you’ll find in the dictionary, but it’s very much something you’ll hear about in JavaScript. + +In JavaScript, we can use any expression in conditionals, `&&`s, `||`s, `if` statements, Boolean negations (`!`), and more. As an example, if statements don’t expect their condition to always have the type boolean. + +```typescript +function getUsersOnlineMessage(numUsersOnline: number) { + if (numUsersOnline) { + return `There are ${numUsersOnline} online now!`; + } + + return "Nobody's here. :("; +} +``` + +Learn more from the following links: + +- [Truthiness Narrowing](https://www.typescriptlang.org/docs/handbook/2/narrowing.html#truthiness-narrowing) \ No newline at end of file diff --git a/src/roadmaps/typescript/content/105-type-guards/104-type-predicates.md b/src/roadmaps/typescript/content/105-type-guards/104-type-predicates.md index cb8e09380..cd11e7e3d 100644 --- a/src/roadmaps/typescript/content/105-type-guards/104-type-predicates.md +++ b/src/roadmaps/typescript/content/105-type-guards/104-type-predicates.md @@ -1 +1,22 @@ -# Type predicates \ No newline at end of file +# Type Predicates + +Type predicates are functions that return a boolean value. They are used to narrow the type of a variable. Type predicates are used in type guards. + +```typescript +function isString(value: unknown): value is string { + return typeof value === 'string'; +} + +function example(x: unknown) { + if (isString(x)) { + // We can now call any 'string' method on 'x'. + x.toUpperCase(); + } else { + console.log(x); + } +} +``` + +Learn more from the following links: + +- [Type Guards and Differentiating Types](https://www.typescriptlang.org/docs/handbook/2/narrowing.html#using-type-predicates) \ No newline at end of file diff --git a/src/roadmaps/typescript/content/105-type-guards/index.md b/src/roadmaps/typescript/content/105-type-guards/index.md index 96e5fea79..dc111c6d4 100644 --- a/src/roadmaps/typescript/content/105-type-guards/index.md +++ b/src/roadmaps/typescript/content/105-type-guards/index.md @@ -1 +1,7 @@ -# Type guards \ No newline at end of file +# Type Guards + +Type guards are a way to narrow down the type of a variable. This is useful when you want to do something different depending on the type of a variable. + +Learn more from the following resources: + +- [Type Guards - TypeScript Docs](https://www.typescriptlang.org/docs/handbook/2/narrowing.html#typeof-type-guards) \ No newline at end of file diff --git a/src/roadmaps/typescript/content/106-functions/100-typing-functions.md b/src/roadmaps/typescript/content/106-functions/100-typing-functions.md index b24ddddd1..8422c3155 100644 --- a/src/roadmaps/typescript/content/106-functions/100-typing-functions.md +++ b/src/roadmaps/typescript/content/106-functions/100-typing-functions.md @@ -2,32 +2,32 @@ In TypeScript, functions can be typed in a few different ways to indicate the input parameters and return type of the function. -1. Function declaration with types: +Function declaration with types: - ``` - function add(a: number, b: number): number { - return a + b; - } - ``` +```typescript +function add(a: number, b: number): number { + return a + b; +} +``` -2. Arrow function with types: +Arrow function with types: - ``` - const multiply = (a: number, b: number): number => { - return a * b; - }; - ``` +```typescript +const multiply = (a: number, b: number): number => { + return a * b; +}; +``` -3. Function type: +Function type: - ``` - let divide: (a: number, b: number) => number; - divide = (a, b) => { - return a / b; - }; - ``` +```typescript +let divide: (a: number, b: number) => number; + +divide = (a, b) => { + return a / b; +}; +``` Learn more from the following links: -- [More on Functions](typescriptlang.org/docs/handbook/2/functions.html) -- [TypeScript Basics - Typing with functions](https://www.youtube.com/watch?v=do_8hnj45zg) \ No newline at end of file +- [TypeScript Functions](https://www.typescriptlang.org/docs/handbook/2/functions.html) \ No newline at end of file diff --git a/src/roadmaps/typescript/content/106-functions/101-function-overloading.md b/src/roadmaps/typescript/content/106-functions/101-function-overloading.md index 35cf2114b..62219adf0 100644 --- a/src/roadmaps/typescript/content/106-functions/101-function-overloading.md +++ b/src/roadmaps/typescript/content/106-functions/101-function-overloading.md @@ -2,22 +2,19 @@ Function Overloading in TypeScript allows multiple functions with the same name but with different parameters to be defined. The correct function to call is determined based on the number, type, and order of the arguments passed to the function at runtime. -For example: +```typescript +function add(a: number, b: number): number; +function add(a: string, b: string): string; - ``` - function add(a: number, b: number): number; - function add(a: string, b: string): string; +function add(a: any, b: any): any { + return a + b; +} - function add(a: any, b: any): any { - return a + b; - } - - console.log(add(1, 2)); // 3 - console.log(add("Hello", " World")); // "Hello World" - ``` +console.log(add(1, 2)); // 3 +console.log(add("Hello", " World")); // "Hello World" +``` Learn more from the following links: -- [TypeScript - Function Overloading](https://www.tutorialsteacher.com/typescript/function-overloading) - [Function Overloads](https://www.typescriptlang.org/docs/handbook/2/functions.html#function-overloads) \ No newline at end of file diff --git a/src/roadmaps/typescript/content/106-functions/index.md b/src/roadmaps/typescript/content/106-functions/index.md index 76a8d4f9e..ab54a2090 100644 --- a/src/roadmaps/typescript/content/106-functions/index.md +++ b/src/roadmaps/typescript/content/106-functions/index.md @@ -2,37 +2,25 @@ Functions are a core building block in TypeScript. Functions allow you to wrap a piece of code and reuse it multiple times. Functions in TypeScript can be either declared using function declaration syntax or function expression syntax. -1. Function Declaration Syntax: - - ``` - function name(param1: type1, param2: type2, ...): returnType { - // function body - return value; - } - ``` - -2. Function Expression Syntax: - - ``` - let name: (param1: type1, param2: type2, ...) => returnType = - function(param1: type1, param2: type2, ...): returnType { - // function body - return value; - }; - ``` - -For example: - - ``` - function add(a: number, b: number): number { - return a + b; - } - let result = add(1, 2); - console.log(result); // 3 - ``` +> Function Declaration Syntax: + +```typescript +function name(param1: type1, param2: type2, ...): returnType { + return value; +} +``` + +> Function Expression Syntax: + +```typescript +function add(a: number, b: number): number { + return a + b; +} + +let result = add(1, 2); +console.log(result); // 3 +``` Learn more from the following links: -- [Functions](https://www.typescriptlang.org/docs/handbook/functions.html) -- [TypeScript Functions](https://www.w3schools.com/typescript/typescript_functions.php) -- [TypeScript - functions](youtube.com/watch?v=mblaKPWM9NU) \ No newline at end of file +- [Functions in TypeScript](https://www.typescriptlang.org/docs/handbook/2/functions.html) \ No newline at end of file diff --git a/src/roadmaps/typescript/content/107-interfaces/100-types-vs-interfaces.md b/src/roadmaps/typescript/content/107-interfaces/100-types-vs-interfaces.md index 6ab12d9c7..6ef00bfe2 100644 --- a/src/roadmaps/typescript/content/107-interfaces/100-types-vs-interfaces.md +++ b/src/roadmaps/typescript/content/107-interfaces/100-types-vs-interfaces.md @@ -4,33 +4,33 @@ In TypeScript, both types and interfaces can be used to define the structure of Types are used to create a new named type based on an existing type or to combine existing types into a new type. They can be created using the type keyword. For example: - ``` - type Person = { - name: string; - age: number; - }; - - const person: Person = { - name: "John Doe", - age: 30 - }; - ``` +```typescript +type Person = { + name: string; + age: number; +}; + +const person: Person = { + name: "John Doe", + age: 30 +}; +``` Interfaces, on the other hand, are used to describe the structure of objects and classes. They can be created using the interface keyword. For example: - ``` - interface Person { - name: string; - age: number; - } +```typescript +interface Person { + name: string; + age: number; +} - const person: Person = { - name: "John Doe", - age: 30 - }; - ``` +const person: Person = { + name: "John Doe", + age: 30 +}; +``` Learn more from the following links: -- [Interfaces vs. Type Aliases](https://www.typescriptlang.org/docs/handbook/advanced-types.html#interfaces-vs-type-aliases) +- [Interfaces vs. Type Aliases](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#differences-between-type-aliases-and-interfaces) - [Interfaces vs Types in TypeScript](https://stackoverflow.com/questions/37233735/interfaces-vs-types-in-typescript) \ No newline at end of file diff --git a/src/roadmaps/typescript/content/107-interfaces/101-extending-interfaces.md b/src/roadmaps/typescript/content/107-interfaces/101-extending-interfaces.md index 08878ccfd..4d38691da 100644 --- a/src/roadmaps/typescript/content/107-interfaces/101-extending-interfaces.md +++ b/src/roadmaps/typescript/content/107-interfaces/101-extending-interfaces.md @@ -2,28 +2,25 @@ In TypeScript, you can extend an interface by creating a new interface that inherits from the original interface using the "extends" keyword. The new interface can include additional properties, methods, or redefine the members of the original interface. -Here is an example: +```typescript +interface Shape { + width: number; + height: number; +} - ``` - interface Shape { - width: number; - height: number; - } +interface Square extends Shape { + sideLength: number; +} - interface Square extends Shape { - sideLength: number; - } +let square: Square = { + width: 10, + height: 10, + sideLength: 10 +}; +``` - let square: Square = { - width: 10, - height: 10, - sideLength: 10 - }; - ``` - -In this example, the Square interface extends the Shape interface and adds an additional property sideLength. A variable of type Square must have all the properties defined in both Shape and Square interfaces. +In this example, the `Square` interface extends the `Shape` interface and adds an additional property `sideLength`. A variable of type `Square` must have all the properties defined in both `Shape` and `Square` interfaces. Learn more from the following links: -- [Interfaces](https://www.typescriptlang.org/docs/handbook/interfaces.html) -- [TypeScript - Extending Interfaces](https://www.typescriptlang.org/docs/handbook/interfaces.html#extending-interfaces) \ No newline at end of file +- [Extending Interfaces](https://www.typescriptlang.org/docs/handbook/2/objects.html) \ No newline at end of file diff --git a/src/roadmaps/typescript/content/107-interfaces/102-interface-declaration.md b/src/roadmaps/typescript/content/107-interfaces/102-interface-declaration.md index fbcd69667..d884b0cb4 100644 --- a/src/roadmaps/typescript/content/107-interfaces/102-interface-declaration.md +++ b/src/roadmaps/typescript/content/107-interfaces/102-interface-declaration.md @@ -1,21 +1,21 @@ # Interface Declaration -An interface in TypeScript is a blueprint for creating objects with specific structure. An interface defines a set of properties, methods, and events that a class or object must implement. The interface is a contract between objects and classes and can be used to enforce a specific structure for objects in your code. +An `interface` in TypeScript is a blueprint for creating objects with specific structure. An `interface` defines a set of properties, methods, and events that a class or object must implement. The interface is a contract between objects and classes and can be used to enforce a specific structure for objects in your code. Here is an example of an interface declaration in TypeScript: - ``` - interface Person { - firstName: string; - lastName: string; - age?: number; - getFullName(): string; - } - ``` +```typescript +interface Person { + firstName: string; + lastName: string; + age?: number; + + getFullName(): string; +} +``` In this example, the Person interface defines four properties: `firstName`, `lastName`, `age`, and a method `getFullName()`. The age property is optional, indicated by the `?` symbol. Any class or object that implements the `Person` interface must have these properties and method. Learn more from the following links: -- [Introduction - Declaration Files](https://www.typescriptlang.org/docs/handbook/declaration-files/introduction.html) -- [Find and Install Declaration Files](https://www.typescriptlang.org/docs/handbook/declaration-files/introduction.html#find-and-install-declaration-files) \ No newline at end of file +- [Extending Interfaces](https://www.typescriptlang.org/docs/handbook/2/objects.html) \ No newline at end of file diff --git a/src/roadmaps/typescript/content/107-interfaces/103-hybrid-types.md b/src/roadmaps/typescript/content/107-interfaces/103-hybrid-types.md index 693cbbebf..3125c26c9 100644 --- a/src/roadmaps/typescript/content/107-interfaces/103-hybrid-types.md +++ b/src/roadmaps/typescript/content/107-interfaces/103-hybrid-types.md @@ -4,20 +4,22 @@ In TypeScript, a hybrid type is a type that combines multiple types into a singl For example, you can create a hybrid type that can accept either a string or a number: - ``` - type StringOrNumber = string | number; - ``` - -Now, a value of type StringOrNumber can be either a string or a number: - - ``` - let value: StringOrNumber = 'Hello, world!'; - value = 42; - ``` - -You can also use hybrid types to create more complex types that can represent a combination of several different types of values. - -Learn more from the following links: - -- [TypeScript - Interface Hybrid Types](https://www.logicbig.com/tutorials/misc/typescript/interface-hybrid-types.html) -- [What is Hybrid types in typescript?](https://www.youtube.com/watch?v=eYAq1A4BsuI) \ No newline at end of file +```typescript +type StringOrNumber = string | number; +``` + +You can also use hybrid types to create more complex types that can represent a combination of several different types of values. For example: + +```typescript +type Education = { + degree: string; + school: string; + year: number; +}; + +type User = { + name: string; + age: number; + email: string; + education: Education; +}; \ No newline at end of file diff --git a/src/roadmaps/typescript/content/107-interfaces/index.md b/src/roadmaps/typescript/content/107-interfaces/index.md index 182d44bb0..fbd4accdc 100644 --- a/src/roadmaps/typescript/content/107-interfaces/index.md +++ b/src/roadmaps/typescript/content/107-interfaces/index.md @@ -4,21 +4,20 @@ Interfaces in TypeScript provide a way to define a contract for a type, which in Here's an example of defining and using an interface in TypeScript: - ``` - interface User { - name: string; - age: number; - } +```typescript +interface User { + name: string; + age: number; +} - const user: User = { - name: 'John Doe', - age: 30 - }; - ``` +const user: User = { + name: 'John Doe', + age: 30 +}; +``` -In this example, the User interface defines the structure of the user object with two properties, name and age. The object is then typed as User using a type-assertion : User. +In this example, the `User` interface defines the structure of the `user` object with two properties, `name` and `age`. The object is then typed as User using a type-assertion: `User`. Learn more from the following links: -- [TypeScript - Interfaces](https://www.typescriptlang.org/docs/handbook/interfaces.html) -- [TypeScript Tutorial - Interfaces](https://www.youtube.com/watch?v=VbW6vWTaHOY) \ No newline at end of file +- [TypeScript - Interfaces](https://www.typescriptlang.org/docs/handbook/2/objects.html) \ No newline at end of file diff --git a/src/roadmaps/typescript/content/108-classes/100-constructor-params.md b/src/roadmaps/typescript/content/108-classes/100-constructor-params.md index e912d7317..42d9b7690 100644 --- a/src/roadmaps/typescript/content/108-classes/100-constructor-params.md +++ b/src/roadmaps/typescript/content/108-classes/100-constructor-params.md @@ -1,16 +1,15 @@ # Constructor Params -In TypeScript, constructor parameters can be declared with access modifiers (e.g. public, private, protected) and/or type annotations. The parameters are then automatically assigned to properties of the same name within the constructor, and can be accessed within the class. For example: +In TypeScript, constructor parameters can be declared with access modifiers (e.g. `public`, `private`, `protected`) and/or type annotations. The parameters are then automatically assigned to properties of the same name within the constructor, and can be accessed within the class. For example: - ``` - class Example { - constructor(private name: string, public age: number) {} - } - ``` +```typescript +class Example { + constructor(private name: string, public age: number) {} +} +``` In this example, the constructor has two parameters: name and age. name has a private access modifier, so it can only be accessed within the Example class. age has a public access modifier, so it can be accessed from outside the class as well. Learn more from the following links: -- [TypeScript - Construct](https://www.typescriptlang.org/docs/handbook/2/classes.html#constructors) -- [TypeScript - Methods and constructors](https://www.youtube.com/watch?v=d9IJyMOmJoE) \ No newline at end of file +- [TypeScript - Construct](https://www.typescriptlang.org/docs/handbook/2/classes.html#constructors) \ No newline at end of file diff --git a/src/roadmaps/typescript/content/108-classes/101-constructor-overloading.md b/src/roadmaps/typescript/content/108-classes/101-constructor-overloading.md index 196356921..806015c9d 100644 --- a/src/roadmaps/typescript/content/108-classes/101-constructor-overloading.md +++ b/src/roadmaps/typescript/content/108-classes/101-constructor-overloading.md @@ -2,30 +2,29 @@ In TypeScript, you can achieve constructor overloading by using multiple constructors with different parameter lists in a single class. When you create an instance of the class, the constructor with the matching parameter list is called. Here's an example: - ``` - class MyClass { - property1: number; - property2: string; - - constructor(property1: number) { - this.property1 = property1; - } - - constructor(property1: number, property2: string) { - this.property1 = property1; - this.property2 = property2; - } - } - ``` +```typescript +class MyClass { + property1: number; + property2: string; + + constructor(property1: number) { + this.property1 = property1; + } + + constructor(property1: number, property2: string) { + this.property1 = property1; + this.property2 = property2; + } +} +``` In this example, we have two constructors with different parameter lists: constructor(property1: number) and constructor(property1: number, property2: string). When you create an instance of the class, the constructor with the matching parameter list is called: -``` +```typescript let myInstance1 = new MyClass(10); let myInstance2 = new MyClass(10, "Hello"); ``` Learn more from the following resources: -- [Constructors - TypeScript](https://www.typescriptlang.org/docs/handbook/2/classes.html#constructors) -- []() \ No newline at end of file +- [Constructors - TypeScript](https://www.typescriptlang.org/docs/handbook/2/classes.html#constructors) \ No newline at end of file diff --git a/src/roadmaps/typescript/content/108-classes/102-access-modifiers.md b/src/roadmaps/typescript/content/108-classes/102-access-modifiers.md index a61abe912..72eb38c43 100644 --- a/src/roadmaps/typescript/content/108-classes/102-access-modifiers.md +++ b/src/roadmaps/typescript/content/108-classes/102-access-modifiers.md @@ -2,14 +2,12 @@ In TypeScript, access modifiers are keywords used to control the visibility and accessibility of class properties and methods. There are three access modifiers in TypeScript: -1. `Public:` This is the default access modifier. Properties and methods declared as public can be accessed from anywhere, both inside and outside the class. -2. `Private:` Properties and methods declared as private can only be accessed within the same class. They are not accessible from outside the class. -3. `Protected:` Properties and methods declared as protected can be accessed within the class and its subclasses. They are not accessible from outside the class and its subclasses. +- `public:` This is the default access modifier. Properties and methods declared as public can be accessed from anywhere, both inside and outside the class. +- `private:` Properties and methods declared as private can only be accessed within the same class. They are not accessible from outside the class. +- `protected:` Properties and methods declared as protected can be accessed within the class and its subclasses. They are not accessible from outside the class and its subclasses. Access modifiers in TypeScript allow you to define the level of visibility and accessibility of properties and methods in your class, making your code more maintainable and secure. - Learn more from the following resources: -- [TypeScript Access Modifiers](https://www.typescripttutorial.net/typescript-tutorial/typescript-access-modifiers/) -- [TypeScript - Data Modifiers](https://www.tutorialsteacher.com/typescript/data-modifiers) \ No newline at end of file +- [TypeScript Access Modifiers](https://www.typescripttutorial.net/typescript-tutorial/typescript-access-modifiers/) \ No newline at end of file diff --git a/src/roadmaps/typescript/content/108-classes/103-abstract-classes.md b/src/roadmaps/typescript/content/108-classes/103-abstract-classes.md index ca08f2fb7..d1de6e376 100644 --- a/src/roadmaps/typescript/content/108-classes/103-abstract-classes.md +++ b/src/roadmaps/typescript/content/108-classes/103-abstract-classes.md @@ -2,11 +2,10 @@ Abstract classes in TypeScript are classes that cannot be instantiated on their own and must be subclassed by other classes. Abstract classes provide a blueprint for other classes and can have abstract methods, which are methods without a body and must be overridden by the subclass. These classes are useful for defining a common interface or basic functionality that other classes can inherit and build upon. -For example: - -``` +```typescript abstract class Animal { abstract makeSound(): void; + move(): void { console.log('moving...'); } @@ -21,5 +20,4 @@ class Dog extends Animal { Learn more from the following resources: -- [Abstract Classes](https://www.typescriptlang.org/docs/handbook/classes.html#abstract-classes) -- [TypeScript - Abstract Class](https://www.tutorialsteacher.com/typescript/abstract-class) \ No newline at end of file +- [Abstract Classes](https://www.typescriptlang.org/docs/handbook/2/classes.html#abstract-classes-and-members) \ No newline at end of file diff --git a/src/roadmaps/typescript/content/108-classes/104-inheritance-vs-polymorphism.md b/src/roadmaps/typescript/content/108-classes/104-inheritance-vs-polymorphism.md index e18b9f470..152f7c50d 100644 --- a/src/roadmaps/typescript/content/108-classes/104-inheritance-vs-polymorphism.md +++ b/src/roadmaps/typescript/content/108-classes/104-inheritance-vs-polymorphism.md @@ -6,33 +6,33 @@ Inheritance refers to a mechanism where a subclass inherits properties and metho Polymorphism refers to the ability of an object to take on many forms. This allows objects of different classes to be treated as objects of a common class, as long as they share a common interface or inheritance hierarchy. In TypeScript, polymorphism is achieved through method overriding and method overloading. -For example: - - ``` - class Animal { - makeSound(): void { - console.log('Making animal sound'); - } - } - - class Dog extends Animal { - makeSound(): void { - console.log('Bark'); - } - } - - class Cat extends Animal { - makeSound(): void { - console.log('Meow'); - } - } - - let animal: Animal; - animal = new Dog(); - animal.makeSound(); // Output: Bark - animal = new Cat(); - animal.makeSound(); // Output: Meow - ``` +```typescript +class Animal { + makeSound(): void { + console.log('Making animal sound'); + } +} + +class Dog extends Animal { + makeSound(): void { + console.log('Bark'); + } +} + +class Cat extends Animal { + makeSound(): void { + console.log('Meow'); + } +} + +let animal: Animal; + +animal = new Dog(); +animal.makeSound(); // Output: Bark + +animal = new Cat(); +animal.makeSound(); // Output: Meow +``` Learn more from the following resources: diff --git a/src/roadmaps/typescript/content/108-classes/105-method-overriding.md b/src/roadmaps/typescript/content/108-classes/105-method-overriding.md index 8284fe882..d296be04c 100644 --- a/src/roadmaps/typescript/content/108-classes/105-method-overriding.md +++ b/src/roadmaps/typescript/content/108-classes/105-method-overriding.md @@ -2,36 +2,29 @@ In TypeScript, method overriding is a mechanism where a subclass provides a new implementation for a method that is already defined in its parent class. This allows the subclass to inherit the behavior of the parent class, but change its behavior to fit its own needs. -To override a method in TypeScript, you need to use the override keyword, and the signature of the method in the subclass must match exactly with the signature of the method in the parent class. +To override a method in TypeScript, you need to use the `override` keyword, and the signature of the method in the subclass must match exactly with the signature of the method in the parent class. -For example: +```typescript +class Animal { + makeSound(): void { + console.log('Making animal sound'); + } +} - ``` - class Animal { - makeSound(): void { - console.log('Making animal sound'); - } - } +class Dog extends Animal { + makeSound(): void { + console.log('Bark'); + } +} - class Dog extends Animal { - makeSound(): void { - console.log('Bark'); - } - } +let animal: Animal; - let animal: Animal; - animal = new Dog(); - animal.makeSound(); // Output: Bark - ``` +animal = new Dog(); +animal.makeSound(); // Output: Bark +``` In this example, the `Dog` class overrides the makeSound method defined in the Animal class and provides its own implementation. When the `makeSound` method is called on an instance of the `Dog` class, it will use the implementation in the `Dog` class rather than the implementation in the `Animal` class. - - - - - Learn more from the following resources: -- [TypeScript - Overriding Methods](https://www.typescriptlang.org/docs/handbook/2/classes.html#overriding-methods) -- [Method Overriding in TypeScript](https://www.geeksforgeeks.org/method-overriding-in-typescript/) \ No newline at end of file +- [TypeScript - Overriding Methods](https://www.typescriptlang.org/docs/handbook/2/classes.html#overriding-methods) \ No newline at end of file diff --git a/src/roadmaps/typescript/content/108-classes/index.md b/src/roadmaps/typescript/content/108-classes/index.md index 329934005..55ff9ff87 100644 --- a/src/roadmaps/typescript/content/108-classes/index.md +++ b/src/roadmaps/typescript/content/108-classes/index.md @@ -4,26 +4,24 @@ Classes in TypeScript are a blueprint for creating objects (instances of a class A class in TypeScript is defined using the class keyword, followed by the name of the class. The class definition can include fields (also known as properties or attributes), methods (functions), and a constructor. -For example: - - ``` - class Animal { - name: string; - constructor(name: string) { - this.name = name; - } - makeSound(): void { - console.log(`${this.name} is making a sound`); - } - } - - const dog = new Animal('Dog'); - dog.makeSound(); // Output: Dog is making a sound - ``` +```typescript +class Animal { + name: string; + constructor(name: string) { + this.name = name; + } + + makeSound(): void { + console.log(`${this.name} is making a sound`); + } +} + +const dog = new Animal('Dog'); +dog.makeSound(); // Output: Dog is making a sound +``` In this example, the `Animal` class has a name field, a constructor that sets the value of the `name` field, and a `makeSound` method. An instance of the `Animal` class can be created using the `new` keyword, and its methods and properties can be accessed using dot notation. Learn more from the following resources: -- [Tutorial - Classes](https://www.typescriptlang.org/docs/handbook/2/classes.html) -- [TypeScript Tutorial - Classes](https://www.youtube.com/watch?v=OsFwOzr3_sE) \ No newline at end of file +- [Tutorial - Classes](https://www.typescriptlang.org/docs/handbook/2/classes.html) \ No newline at end of file diff --git a/src/roadmaps/typescript/content/109-generics/100-generic-types.md b/src/roadmaps/typescript/content/109-generics/100-generic-types.md index 9542adbba..83c0f00a2 100644 --- a/src/roadmaps/typescript/content/109-generics/100-generic-types.md +++ b/src/roadmaps/typescript/content/109-generics/100-generic-types.md @@ -1,16 +1,16 @@ # Generic Types -Generic types in TypeScript allow you to write functions and classes that work with multiple data types, instead of being limited to a single data type. A generic type is defined using angle brackets and can be used as a placeholder for a specific data type. The actual data type is specified when the function or class is used. +Generic types in TypeScript allow you to write objects, functions and classes that work with multiple data types, instead of being limited to a single data type. A generic type is defined using angle brackets `` and can be used as a placeholder for a specific data type. The actual data type is specified when the function or class is used. For example, the following is a generic function that takes a single argument of any data type and returns the same data type: - ``` - function identity(arg: T): T { - return arg; - } +```typescript +function identity(arg: T): T { + return arg; +} - let output = identity("Hello"); // type of output will be 'string' - ``` +let output = identity("Hello"); // type of output will be 'string' +``` In this example, the `identity` function takes a single argument of any data type and returns the same data type. The actual data type is specified when the function is called by using `` before the argument `Hello`. @@ -18,18 +18,17 @@ Generics can also be used with classes, interfaces, and object types, allowing t For example: - ``` - class GenericNumber { - zeroValue: T; - add: (x: T, y: T) => T; - } +```typescript +class GenericNumber { + zeroValue: T; + add: (x: T, y: T) => T; +} - let myGenericNumber = new GenericNumber(); - myGenericNumber.zeroValue = 0; - myGenericNumber.add = function(x, y) { return x + y; }; - ``` +let myGenericNumber = new GenericNumber(); +myGenericNumber.zeroValue = 0; +myGenericNumber.add = function(x, y) { return x + y; }; +``` Learn more from the following resources: -- [Generics - TypeScript](https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html#generics) -- [Typescript Generics Tutorial](https://www.youtube.com/watch?v=nViEqpgwxHE) \ No newline at end of file +- [Hello World of Generics](https://www.typescriptlang.org/docs/handbook/2/generics.html#hello-world-of-generics) \ No newline at end of file diff --git a/src/roadmaps/typescript/content/109-generics/101-generic-constraints.md b/src/roadmaps/typescript/content/109-generics/101-generic-constraints.md index 8795d5383..d455b2038 100644 --- a/src/roadmaps/typescript/content/109-generics/101-generic-constraints.md +++ b/src/roadmaps/typescript/content/109-generics/101-generic-constraints.md @@ -2,27 +2,26 @@ Generic constraints in TypeScript allow you to specify the requirements for the type parameters used in a generic type. These constraints ensure that the type parameter used in a generic type meets certain requirements. -Constraints are specified using the extends keyword, followed by the type that the type parameter must extend or implement. +Constraints are specified using the `extends` keyword, followed by the type that the type parameter must extend or implement. -For example: +```typescript +interface Lengthwise { + length: number; +} - ``` - interface Lengthwise { - length: number; - } +function loggingIdentity(arg: T): T { + // Now we know it has a .length property, so no more error + console.log(arg.length); - function loggingIdentity(arg: T): T { - console.log(arg.length); // Now we know it has a .length property, so no more error - return arg; - } + return arg; +} - loggingIdentity(3); // Error, number doesn't have a .length property - loggingIdentity({length: 10, value: 3}); // OK - ``` +loggingIdentity(3); // Error, number doesn't have a .length property +loggingIdentity({length: 10, value: 3}); // OK +``` In this example, the `Lengthwise` interface defines a `length` property. The `loggingIdentity` function uses a generic type parameter `T` that is constrained by the `Lengthwise` interface, meaning that the type parameter must extend or implement the `Lengthwise` interface. This constraint ensures that the length property is available on the argument passed to the `loggingIdentity` function. Learn more from the following resources: -- [Generic Constraints - TypeScript](https://www.typescriptlang.org/docs/handbook/2/generics.html#generic-constraints) -- [TypeScript Course - Generics Constraints](https://www.youtube.com/watch?v=hLP2evgcAq4) \ No newline at end of file +- [Generic Constraints - TypeScript](https://www.typescriptlang.org/docs/handbook/2/generics.html#generic-constraints) \ No newline at end of file diff --git a/src/roadmaps/typescript/content/109-generics/index.md b/src/roadmaps/typescript/content/109-generics/index.md index f76b1a2f4..82e125093 100644 --- a/src/roadmaps/typescript/content/109-generics/index.md +++ b/src/roadmaps/typescript/content/109-generics/index.md @@ -4,17 +4,16 @@ Generics in TypeScript are a way to write code that can work with multiple data For example, the following is a generic function that takes a single argument of any data type and returns the same data type: - ``` - function identity(arg: T): T { - return arg; - } +```typescript +function identity(arg: T): T { + return arg; +} - let output = identity("Hello"); // type of output will be 'string' - ``` +let output = identity("Hello"); // type of output will be 'string' +``` In this example, the `identity` function takes a single argument of any data type and returns the same data type. The actual data type is specified when the function is called by using `` before the argument `"Hello"`. Learn more from the following resources: -- [Hello World of Generics](https://www.typescriptlang.org/docs/handbook/2/generics.html#hello-world-of-generics) -- [Typescript Generics Tutorial](https://www.youtube.com/watch?v=nViEqpgwxHE) \ No newline at end of file +- [Hello World of Generics](https://www.typescriptlang.org/docs/handbook/2/generics.html#hello-world-of-generics) \ No newline at end of file diff --git a/src/roadmaps/typescript/content/110-decorators.md b/src/roadmaps/typescript/content/110-decorators.md index c780a5129..803608184 100644 --- a/src/roadmaps/typescript/content/110-decorators.md +++ b/src/roadmaps/typescript/content/110-decorators.md @@ -4,28 +4,30 @@ Decorators are a feature of TypeScript that allow you to modify the behavior of Here's an example of how you might use a decorator in TypeScript: - ``` - function log(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor) { - const originalMethod = descriptor.value; - descriptor.value = function (...args: any[]) { - console.log(`Calling ${propertyKey} with arguments: ${args}`); - return originalMethod.apply(this, args); - }; - return descriptor; - } - - class Calculator { - @log - add(a: number, b: number): number { - return a + b; - } - } - - const calculator = new Calculator(); - calculator.add(1, 2); - // Output: Calling add with arguments: 1,2 - // Output: 3 - ``` +```typescript +function log(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor) { + const originalMethod = descriptor.value; + + descriptor.value = function (...args: any[]) { + console.log(`Calling ${propertyKey} with arguments: ${args}`); + return originalMethod.apply(this, args); + }; + + return descriptor; +} + +class Calculator { + @log + add(a: number, b: number): number { + return a + b; + } +} + +const calculator = new Calculator(); +calculator.add(1, 2); +// Output: Calling add with arguments: 1,2 +// Output: 3 +``` In this example, we use the `@log` decorator to modify the behavior of the `add` method in the `Calculator` class. The `log` decorator logs the arguments passed to the method before calling the original method. This allows us to see what arguments are being passed to the method, without having to modify the method's code. diff --git a/src/roadmaps/typescript/content/111-utility-types/100-partial.md b/src/roadmaps/typescript/content/111-utility-types/100-partial.md index 76fb1e40f..9469f7578 100644 --- a/src/roadmaps/typescript/content/111-utility-types/100-partial.md +++ b/src/roadmaps/typescript/content/111-utility-types/100-partial.md @@ -4,26 +4,27 @@ The Partial type in TypeScript allows you to make all properties of a type optio Here's an example of using the Partial type in TypeScript: - ``` - interface User { - name: string; - age: number; - email: string; - } - - function createUser(user: Partial): User { - return { - name: 'John Doe', - age: 30, - email: 'john.doe@example.com', - ...user - }; - } - - const newUser = createUser({ name: 'Jane Doe' }); - console.log(newUser); - // Output: { name: 'Jane Doe', age: 30, email: 'john.doe@example.com' } - ``` +```typescript +interface User { + name: string; + age: number; + email: string; +} + +function createUser(user: Partial): User { + return { + name: 'John Doe', + age: 30, + email: 'john.doe@example.com', + ...user + }; +} + +const newUser = createUser({ name: 'Jane Doe' }); + +console.log(newUser); +// Output: { name: 'Jane Doe', age: 30, email: 'john.doe@example.com' } +``` Learn more from the following links: diff --git a/src/roadmaps/typescript/content/111-utility-types/101-pick.md b/src/roadmaps/typescript/content/111-utility-types/101-pick.md index 87fa0b03c..ac89389d2 100644 --- a/src/roadmaps/typescript/content/111-utility-types/101-pick.md +++ b/src/roadmaps/typescript/content/111-utility-types/101-pick.md @@ -2,24 +2,20 @@ Pick constructs a type by picking the set of properties Keys (string literal or union of string literals) from Type. - ``` - interface Todo { - title: string; - description: string; - completed: boolean; - } - - type TodoPreview = Pick; - - const todo: TodoPreview = { - title: "Clean room", - completed: false, - }; - - todo; - - const todo: TodoPreview - ``` +```typescript +interface Todo { + title: string; + description: string; + completed: boolean; +} + +type TodoPreview = Pick; + +const todo: TodoPreview = { + title: "Clean room", + completed: false, +}; +``` Learn more from the following links: diff --git a/src/roadmaps/typescript/content/111-utility-types/102-omit.md b/src/roadmaps/typescript/content/111-utility-types/102-omit.md index 5fa06a904..07c0144ff 100644 --- a/src/roadmaps/typescript/content/111-utility-types/102-omit.md +++ b/src/roadmaps/typescript/content/111-utility-types/102-omit.md @@ -2,38 +2,29 @@ Omit constructs a type by picking all properties from Type and then removing Keys (string literal or union of string literals). +```typescript +interface Todo { + title: string; + description: string; + completed: boolean; + createdAt: number; +} - ``` - interface Todo { - title: string; - description: string; - completed: boolean; - createdAt: number; - } - - type TodoPreview = Omit; - - const todo: TodoPreview = { - title: "Clean room", - completed: false, - createdAt: 1615544252770, - }; - - todo; - - const todo: TodoPreview - - type TodoInfo = Omit; - - const todoInfo: TodoInfo = { - title: "Pick up kids", - description: "Kindergarten closes at 5pm", - }; - - todoInfo; - - const todoInfo: TodoInfo - ``` +type TodoPreview = Omit; + +const todo: TodoPreview = { + title: "Clean room", + completed: false, + createdAt: 1615544252770, +}; + +type TodoInfo = Omit; + +const todoInfo: TodoInfo = { + title: "Pick up kids", + description: "Kindergarten closes at 5pm", +}; +``` Learn more from the following links: diff --git a/src/roadmaps/typescript/content/111-utility-types/103-readonly.md b/src/roadmaps/typescript/content/111-utility-types/103-readonly.md index 5057ab999..f88b65931 100644 --- a/src/roadmaps/typescript/content/111-utility-types/103-readonly.md +++ b/src/roadmaps/typescript/content/111-utility-types/103-readonly.md @@ -2,18 +2,18 @@ Readonly constructs a type with all properties of Type set to readonly, meaning the properties of the constructed type cannot be reassigned. - ``` - interface Todo { - title: string; - } - - const todo: Readonly = { - title: "Delete inactive users", - }; - - todo.title = "Hello"; - Cannot assign to 'title' because it is a read-only property. - ``` +```typescript +interface Todo { + title: string; +} + +const todo: Readonly = { + title: "Delete inactive users", +}; + +// Cannot assign to 'title' because it is a read-only property. +todo.title = "Hello"; +``` Learn more from the following links: diff --git a/src/roadmaps/typescript/content/111-utility-types/104-record.md b/src/roadmaps/typescript/content/111-utility-types/104-record.md index 38f09a6a6..ae90fa28b 100644 --- a/src/roadmaps/typescript/content/111-utility-types/104-record.md +++ b/src/roadmaps/typescript/content/111-utility-types/104-record.md @@ -2,24 +2,20 @@ Record constructs an object type whose property keys are Keys and whose property values are Type. This utility can be used to map the properties of a type to another type. - ``` - interface CatInfo { - age: number; - breed: string; - } - - type CatName = "miffy" | "boris" | "mordred"; - - const cats: Record = { - miffy: { age: 10, breed: "Persian" }, - boris: { age: 5, breed: "Maine Coon" }, - mordred: { age: 16, breed: "British Shorthair" }, - }; - - cats.boris; - - const cats: Record - ``` +```typescript +interface CatInfo { + age: number; + breed: string; +} + +type CatName = "miffy" | "boris" | "mordred"; + +const cats: Record = { + miffy: { age: 10, breed: "Persian" }, + boris: { age: 5, breed: "Maine Coon" }, + mordred: { age: 16, breed: "British Shorthair" }, +}; +``` Learn more from the following links: diff --git a/src/roadmaps/typescript/content/111-utility-types/105-exclude.md b/src/roadmaps/typescript/content/111-utility-types/105-exclude.md index ef484de87..9b8dc9ac2 100644 --- a/src/roadmaps/typescript/content/111-utility-types/105-exclude.md +++ b/src/roadmaps/typescript/content/111-utility-types/105-exclude.md @@ -2,17 +2,11 @@ Exclude constructs a type by excluding from UnionType all union members that are assignable to ExcludedMembers. - ``` - type T0 = Exclude<"a" | "b" | "c", "a">; - - type T0 = "b" | "c" - type T1 = Exclude<"a" | "b" | "c", "a" | "b">; - - type T1 = "c" - type T2 = Exclude void), Function>; - - type T2 = string | number - ``` +```typescript +type T0 = Exclude<"a" | "b" | "c", "a">; // "b" | "c" +type T1 = Exclude<"a" | "b" | "c", "a" | "b">; // "c" +type T2 = Exclude void), Function>; // string | number +``` Learn more from the following links: diff --git a/src/roadmaps/typescript/content/111-utility-types/106-extract.md b/src/roadmaps/typescript/content/111-utility-types/106-extract.md index 91b5b6381..1443513d0 100644 --- a/src/roadmaps/typescript/content/111-utility-types/106-extract.md +++ b/src/roadmaps/typescript/content/111-utility-types/106-extract.md @@ -2,14 +2,10 @@ Extract constructs a type by extracting from Type all union members that are assignable to Union. - ``` - type T0 = Extract<"a" | "b" | "c", "a" | "f">; - - type T0 = "a" - type T1 = Extract void), Function>; - - type T1 = () => void - ``` +```typescript +type T0 = Extract<"a" | "b" | "c", "a" | "f">; +// ^ = type T0 = "a" +``` Learn more from the following links: diff --git a/src/roadmaps/typescript/content/111-utility-types/107-non-nullable.md b/src/roadmaps/typescript/content/111-utility-types/107-non-nullable.md index be6d3d79d..0ab4581ae 100644 --- a/src/roadmaps/typescript/content/111-utility-types/107-non-nullable.md +++ b/src/roadmaps/typescript/content/111-utility-types/107-non-nullable.md @@ -1,15 +1,14 @@ # Non Nullable -Nun Nullable constructs a type by excluding null and undefined from Type. +Non-Nullable constructs a type by excluding `null` and `undefined` from Type. - ``` - type T0 = NonNullable; - - type T0 = string | number - type T1 = NonNullable; - - type T1 = string[] - ``` +```typescript +type T0 = NonNullable; +// type T0 = string | number + +type T1 = NonNullable; +// type T1 = string[] +``` Learn more from the following links: diff --git a/src/roadmaps/typescript/content/111-utility-types/108-parameters.md b/src/roadmaps/typescript/content/111-utility-types/108-parameters.md index 82761e7e2..19de681ca 100644 --- a/src/roadmaps/typescript/content/111-utility-types/108-parameters.md +++ b/src/roadmaps/typescript/content/111-utility-types/108-parameters.md @@ -2,36 +2,35 @@ Parameters constructs a tuple type from the types used in the parameters of a function type Type. - ``` - declare function f1(arg: { a: number; b: string }): void; - type T0 = Parameters<() => string>; - type T0 = [] - type T1 = Parameters<(s: string) => void>; - type T1 = [s: string] - type T2 = Parameters<(arg: T) => T>; - type T2 = [arg: unknown] - type T3 = Parameters; - - type T3 = [arg: { - a: number; - b: string; - }] - type T4 = Parameters; - - type T4 = unknown[] - type T5 = Parameters; - - type T5 = never - type T6 = Parameters; - Type 'string' does not satisfy the constraint '(...args: any) => any'. - - type T6 = never - type T7 = Parameters; - Type 'Function' does not satisfy the constraint '(...args: any) => any'. - Type 'Function' provides no match for the signature '(...args: any): any'. - - type T7 = never - ``` +```typescript +type T0 = Parameters<() => string>; +// type T0 = [] + +type T1 = Parameters<(s: string) => void>; +// type T1 = [s: string] + +type T2 = Parameters<(arg: T) => T>; +// type T2 = [arg: unknown] + +declare function f1(arg: { a: number, b: string }): void; +type T3 = Parameters; +// type T3 = [arg: { +// a: number; +// b: string; +// }] + +type T4 = Parameters; +// type T4 = unknown[] + +type T5 = Parameters; +// type T5 = never + +type T6 = Parameters; +// ^ Type 'string' does not satisfy the constraint '(...args: any) => any'. + +type T7 = Parameters; +// ^ Type 'Function' does not satisfy the constraint '(...args: any) => any'. +``` Learn more from the following links: diff --git a/src/roadmaps/typescript/content/111-utility-types/109-return-type.md b/src/roadmaps/typescript/content/111-utility-types/109-return-type.md index 2294d0dc5..088291d07 100644 --- a/src/roadmaps/typescript/content/111-utility-types/109-return-type.md +++ b/src/roadmaps/typescript/content/111-utility-types/109-return-type.md @@ -1,43 +1,39 @@ -# Return type +# ReturnType Return type constructs a type consisting of the return type of function Type. - ``` - declare function f1(): { a: number; b: string }; - type T0 = ReturnType<() => string>; - - type T0 = string - type T1 = ReturnType<(s: string) => void>; - - type T1 = void - type T2 = ReturnType<() => T>; - - type T2 = unknown - type T3 = ReturnType<() => T>; - - type T3 = number[] - type T4 = ReturnType; - - type T4 = { - a: number; - b: string; - } - type T5 = ReturnType; - - type T5 = any - type T6 = ReturnType; - - type T6 = never - type T7 = ReturnType; - Type 'string' does not satisfy the constraint '(...args: any) => any'. - - type T7 = any - type T8 = ReturnType; - Type 'Function' does not satisfy the constraint '(...args: any) => any'. - Type 'Function' provides no match for the signature '(...args: any): any'. - - type T8 = any - ``` +```typescript +type T0 = ReturnType<() => string>; +// type T0 = string + +type T1 = ReturnType<(s: string) => void>; +// type T1 = void + +type T2 = ReturnType<() => T>; +// type T2 = unknown + +type T3 = ReturnType<() => T>; +// type T3 = number[] + +declare function f1(): { a: number; b: string }; +type T4 = ReturnType; +// type T4 = { +// a: number; +// b: string; +// } + +type T5 = ReturnType; +// type T5 = any + +type T6 = ReturnType; +// type T6 = never + +type T7 = ReturnType; +// ^ Type 'string' does not satisfy the constraint '(...args: any) => any'. + +type T8 = ReturnType; +// ^ Type 'Function' does not satisfy the constraint '(...args: any) => any'. +``` Learn more from the following links: diff --git a/src/roadmaps/typescript/content/111-utility-types/110-instance-type.md b/src/roadmaps/typescript/content/111-utility-types/110-instance-type.md index 013dd0047..838a4e5ec 100644 --- a/src/roadmaps/typescript/content/111-utility-types/110-instance-type.md +++ b/src/roadmaps/typescript/content/111-utility-types/110-instance-type.md @@ -1,33 +1,28 @@ -# Instance type - +# InstanceType This type constructs a type consisting of the instance type of a constructor function in Type. - ``` - class C { - x = 0; - y = 0; - } +```typescript +class C { + x = 0; + y = 0; +} + +type T0 = InstanceType; +// type T0 = C + +type T1 = InstanceType; +// type T1 = any + +type T2 = InstanceType; +// type T2 = never + +type T3 = InstanceType; +// ^ Type 'string' does not satisfy the constraint 'abstract new (...args: any) => any'. - type T0 = InstanceType; - - type T0 = C - type T1 = InstanceType; - - type T1 = any - type T2 = InstanceType; - - type T2 = never - type T3 = InstanceType; - Type 'string' does not satisfy the constraint 'abstract new (...args: any) => any'. - - type T3 = any - type T4 = InstanceType; - Type 'Function' does not satisfy the constraint 'abstract new (...args: any) => any'. - Type 'Function' provides no match for the signature 'new (...args: any): any'. - - type T4 = any - ``` +type T4 = InstanceType; +// ^ Type 'Function' does not satisfy the constraint 'abstract new (...args: any) => any'. +``` Learn more from the following links: diff --git a/src/roadmaps/typescript/content/111-utility-types/111-awaited.md b/src/roadmaps/typescript/content/111-utility-types/111-awaited.md index 32541b4cd..1db6fedc8 100644 --- a/src/roadmaps/typescript/content/111-utility-types/111-awaited.md +++ b/src/roadmaps/typescript/content/111-utility-types/111-awaited.md @@ -1,20 +1,17 @@ # Awaited -This type is meant to model operations like await in async functions, or the .then() method on Promises - specifically, the way that they recursively unwrap Promises. +This type is meant to model operations like await in async functions, or the `.then()` method on Promises - specifically, the way that they recursively unwrap Promises. - ``` - type A = Awaited>; - - type A = string - - type B = Awaited>>; - - type B = number - - type C = Awaited>; - - type C = number | boolean - ``` +```typescript +type A = Awaited>; +// type A = string + +type B = Awaited>>; +// type B = number + +type C = Awaited>; +// type C = number | boolean +``` Learn more from the following links: diff --git a/src/roadmaps/typescript/content/111-utility-types/index.md b/src/roadmaps/typescript/content/111-utility-types/index.md index 77b12d47b..aeeca57c2 100644 --- a/src/roadmaps/typescript/content/111-utility-types/index.md +++ b/src/roadmaps/typescript/content/111-utility-types/index.md @@ -2,11 +2,12 @@ TypeScript provides several utility types that can be used to manipulate and transform existing types. Here are some of the most common ones: -1. Partial: makes all properties of a type optional. -2. Readonly: makes all properties of a type read-only. -3. Pick: allows you to pick specific properties from a type. -4. Omit: allows you to omit specific properties from a type. -5. Exclude: creates a type that is the set difference of A and B. +- `Partial`: makes all properties of a type optional. +- `Readonly`: makes all properties of a type read-only. +- `Pick`: allows you to pick specific properties from a type. +- `Omit`: allows you to omit specific properties from a type. +- `Exclude`: creates a type that is the set difference of A and B. +- ..and more. Learn more from the following links: diff --git a/src/roadmaps/typescript/content/112-advanced-types/100-mapped-types.md b/src/roadmaps/typescript/content/112-advanced-types/100-mapped-types.md index c612e025c..9efdd18b7 100644 --- a/src/roadmaps/typescript/content/112-advanced-types/100-mapped-types.md +++ b/src/roadmaps/typescript/content/112-advanced-types/100-mapped-types.md @@ -4,7 +4,7 @@ Mapped types in TypeScript are a way to create a new type based on an existing t For example, the following is a mapped type that takes an object type and creates a new type with all properties of the original type but with their type changed to `readonly`: -``` +```typescript type Readonly = { readonly [P in keyof T]: T[P]; }; @@ -17,5 +17,4 @@ In this example, the `Readonly` mapped type takes an object type `T` and creates Learn more from the following links: -- [Mapped Types](https://www.typescriptlang.org/docs/handbook/2/mapped-types.html#handbook-content) -- [Mapped Types - Advanced TypeScript](https://www.youtube.com/watch?v=RjQpep8fBdo) \ No newline at end of file +- [Mapped Types](https://www.typescriptlang.org/docs/handbook/2/mapped-types.html#handbook-content) \ No newline at end of file diff --git a/src/roadmaps/typescript/content/112-advanced-types/101-conditional-types.md b/src/roadmaps/typescript/content/112-advanced-types/101-conditional-types.md index ce195be7b..29b6d6d88 100644 --- a/src/roadmaps/typescript/content/112-advanced-types/101-conditional-types.md +++ b/src/roadmaps/typescript/content/112-advanced-types/101-conditional-types.md @@ -4,7 +4,7 @@ Conditional types in TypeScript are a way to select a type based on a condition. For example, the following is a conditional type that takes two types and returns the type of the first argument if it extends the second argument, and the type of the second argument otherwise: -``` +```typescript type Extends = T extends U ? T : U; type A = Extends; // type A is 'string' diff --git a/src/roadmaps/typescript/content/112-advanced-types/102-literal-types.md b/src/roadmaps/typescript/content/112-advanced-types/102-literal-types.md index 6955112dd..82b9db0e3 100644 --- a/src/roadmaps/typescript/content/112-advanced-types/102-literal-types.md +++ b/src/roadmaps/typescript/content/112-advanced-types/102-literal-types.md @@ -4,7 +4,7 @@ Literal types in TypeScript are a way to specify a value exactly, rather than ju For example, the following is a literal type that represents a value of 42: -``` +```typescript type Age = 42; let age: Age = 42; // ok @@ -15,5 +15,4 @@ In this example, the `Age` literal type is created by using the number `42` as a Learn more from the following links: -- [Literal Types](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#literal-types) -- [TypeScript Literal Types Explained](https://www.youtube.com/watch?v=JXVrPRmnQt0) \ No newline at end of file +- [Literal Types](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#literal-types) \ No newline at end of file diff --git a/src/roadmaps/typescript/content/112-advanced-types/103-template-literal-types.md b/src/roadmaps/typescript/content/112-advanced-types/103-template-literal-types.md index 5eb36a0d8..a02e06ff4 100644 --- a/src/roadmaps/typescript/content/112-advanced-types/103-template-literal-types.md +++ b/src/roadmaps/typescript/content/112-advanced-types/103-template-literal-types.md @@ -4,16 +4,15 @@ Template literal types in TypeScript are a way to manipulate string values as ty For example, the following is a template literal type that concatenates two strings: - ``` - type Name = `Mr. ` + string; +```typescript +type Name = `Mr. ` + string; - let name: Name = `Mr. Smith`; // ok - let name: Name = `Mrs. Smith`; // error - ``` +let name: Name = `Mr. Smith`; // ok +let name: Name = `Mrs. Smith`; // error +``` In this example, the `Name` template literal type is created by concatenating the string `"Mr. "` with the type `string`. This type can then be used to enforce that a value must be a string that starts with `"Mr. "`. Learn more from the following links: -- [Template Literal Types](https://www.typescriptlang.org/docs/handbook/2/template-literal-types.html#handbook-content) -- [TypeScript Template Literal Types](https://www.youtube.com/watch?v=nskIP1iyrAo) \ No newline at end of file +- [Template Literal Types](https://www.typescriptlang.org/docs/handbook/2/template-literal-types.html#handbook-content) \ No newline at end of file diff --git a/src/roadmaps/typescript/content/112-advanced-types/104-recursive-types.md b/src/roadmaps/typescript/content/112-advanced-types/104-recursive-types.md index 77617373d..e33d12268 100644 --- a/src/roadmaps/typescript/content/112-advanced-types/104-recursive-types.md +++ b/src/roadmaps/typescript/content/112-advanced-types/104-recursive-types.md @@ -4,10 +4,10 @@ Recursive types in TypeScript are a way to define a type that references itself. For example, the following is a recursive type that represents a linked list: - ``` - type LinkedList = T & { next: LinkedList }; +```typescript +type LinkedList = T & { next: LinkedList }; - let list: LinkedList = { value: 1, next: { value: 2, next: { value: 3, next: null } } }; - ``` +let list: LinkedList = { value: 1, next: { value: 2, next: { value: 3, next: null } } }; +``` In this example, the `LinkedList` type is defined as a type that extends `T` and contains a property `next` of the same type `LinkedList`. This allows us to create a linked list where each node contains a value of type `T` and a reference to the next node in the list. \ No newline at end of file diff --git a/src/roadmaps/typescript/content/113-modules/100-namespaces.md b/src/roadmaps/typescript/content/113-modules/100-namespaces.md index 3e5235ebf..9ade61083 100644 --- a/src/roadmaps/typescript/content/113-modules/100-namespaces.md +++ b/src/roadmaps/typescript/content/113-modules/100-namespaces.md @@ -4,18 +4,18 @@ In TypeScript, namespaces are used to organize and share code across multiple fi Here's an example of how you can use namespaces in TypeScript: - ``` - // myNamespace.ts - namespace MyNamespace { - export function doSomething() { - console.log("Doing something..."); - } +```typescript +// myNamespace.ts +namespace MyNamespace { + export function doSomething() { + console.log("Doing something..."); } +} - // main.ts - /// - MyNamespace.doSomething(); // Output: "Doing something..." - ``` +// main.ts +/// +MyNamespace.doSomething(); // Output: "Doing something..." +``` In this example, we use the `namespace` keyword in the "myNamespace.ts" file to define a namespace "MyNamespace". Within the namespace, we export a function "doSomething". diff --git a/src/roadmaps/typescript/content/113-modules/101-ambient-modules.md b/src/roadmaps/typescript/content/113-modules/101-ambient-modules.md index 01a97b31f..fff7a07d0 100644 --- a/src/roadmaps/typescript/content/113-modules/101-ambient-modules.md +++ b/src/roadmaps/typescript/content/113-modules/101-ambient-modules.md @@ -4,20 +4,19 @@ Ambient modules in TypeScript are used to declare external modules or third-part Here's an example of how you can use ambient modules in TypeScript: - ``` - // myModule.d.ts - declare module "my-module" { - export function doSomething(): void; - } +```typescript +// myModule.d.ts +declare module "my-module" { + export function doSomething(): void; +} - // main.ts - import * as myModule from "my-module"; - myModule.doSomething(); - ``` +// main.ts +import * as myModule from "my-module"; +myModule.doSomething(); +``` In this example, we declare an ambient module "my-module" in the `myModule.d.ts` file. This declaration provides type information for the "my-module" module, including the "doSomething" function that is exported from the module. Learn more from the following links: -- [Ambient Modules](https://www.typescriptlang.org/docs/handbook/modules.html#ambient-modules) -- [TypeScript Ambient Module](https://www.w3schools.blog/ambient-module-typescript) \ No newline at end of file +- [Ambient Modules](https://www.typescriptlang.org/docs/handbook/modules.html#ambient-modules) \ No newline at end of file diff --git a/src/roadmaps/typescript/content/113-modules/102-external-modules.md b/src/roadmaps/typescript/content/113-modules/102-external-modules.md index 9686782ac..5e4c8efca 100644 --- a/src/roadmaps/typescript/content/113-modules/102-external-modules.md +++ b/src/roadmaps/typescript/content/113-modules/102-external-modules.md @@ -4,16 +4,16 @@ In TypeScript, external modules allow you to organize and share code across mult Here's an example of how you can use external modules in TypeScript: - ``` - // myModule.ts - export function doSomething() { - console.log("Doing something..."); - } +```typescript +// myModule.ts +export function doSomething() { + console.log("Doing something..."); +} - // main.ts - import { doSomething } from "./myModule"; - doSomething(); // Output: "Doing something..." - ``` +// main.ts +import { doSomething } from "./myModule"; +doSomething(); // Output: "Doing something..." +``` In this example, we use the "export" keyword in the "myModule.ts" file to export the "doSomething" function, making it available for other files to use. diff --git a/src/roadmaps/typescript/content/113-modules/103-namespace-augmentation.md b/src/roadmaps/typescript/content/113-modules/103-namespace-augmentation.md index 06363a024..2e3b36b5c 100644 --- a/src/roadmaps/typescript/content/113-modules/103-namespace-augmentation.md +++ b/src/roadmaps/typescript/content/113-modules/103-namespace-augmentation.md @@ -4,27 +4,27 @@ In TypeScript, namespace augmentation is a way to extend or modify existing name Here's an example of how you can use namespace augmentation in TypeScript: - ``` - // myModule.d.ts - declare namespace MyModule { - export interface MyModule { - newFunction(): void; - } +```typescript +// myModule.d.ts +declare namespace MyModule { + export interface MyModule { + newFunction(): void; + } +} + +// main.ts +/// +namespace MyModule { + export class MyModule { + public newFunction() { + console.log("I am a new function in MyModule!"); } + } +} - // main.ts - /// - namespace MyModule { - export class MyModule { - public newFunction() { - console.log("I am a new function in MyModule!"); - } - } - } - - const obj = new MyModule.MyModule(); - obj.newFunction(); // Output: "I am a new function in MyModule!" - ``` +const obj = new MyModule.MyModule(); +obj.newFunction(); // Output: "I am a new function in MyModule!" +``` In this example, we use namespace augmentation to add a new function "newFunction" to the "MyModule" namespace. This is done in the declaration file `myModule.d.ts` by declaring a new interface "MyModule" within the "MyModule" namespace and adding the "newFunction" function to it. diff --git a/src/roadmaps/typescript/content/113-modules/104-global-augmentation.md b/src/roadmaps/typescript/content/113-modules/104-global-augmentation.md index e0b0af3c1..25026c3f3 100644 --- a/src/roadmaps/typescript/content/113-modules/104-global-augmentation.md +++ b/src/roadmaps/typescript/content/113-modules/104-global-augmentation.md @@ -4,22 +4,22 @@ In TypeScript, global augmentation is a way to add declarations to the global sc Here's an example of how you can use global augmentation in TypeScript: - ``` - // myModule.d.ts - declare namespace NodeJS { - interface Global { - myGlobalFunction(): void; - } - } +```typescript +// myModule.d.ts +declare namespace NodeJS { + interface Global { + myGlobalFunction(): void; + } +} - // main.ts - global.myGlobalFunction = function () { - console.log("I am a global function!"); - }; +// main.ts +global.myGlobalFunction = function () { + console.log("I am a global function!"); +}; - myGlobalFunction(); // Output: "I am a global function!" - ``` - +myGlobalFunction(); // Output: "I am a global function!" +``` + In this example, we declare a new namespace "NodeJS" and add an interface "Global" to it. Within the "Global" interface, we declare a new function "myGlobalFunction". Learn more from the following links: diff --git a/src/roadmaps/typescript/content/113-modules/index.md b/src/roadmaps/typescript/content/113-modules/index.md index 2417e78dd..288f398c8 100644 --- a/src/roadmaps/typescript/content/113-modules/index.md +++ b/src/roadmaps/typescript/content/113-modules/index.md @@ -11,18 +11,18 @@ External modules are used to organize code across multiple files. They are defin Here is an example of how you can use internal modules in TypeScript: - ``` - // myModule.ts - namespace MyModule { - export function doSomething() { - console.log("Doing something..."); - } +```typescript +// myModule.ts +namespace MyModule { + export function doSomething() { + console.log("Doing something..."); } +} - // main.ts - /// - MyModule.doSomething(); // Output: "Doing something..." - ``` +// main.ts +/// +MyModule.doSomething(); // Output: "Doing something..." +``` Learn more from the following links: diff --git a/src/roadmaps/typescript/content/114-ecosystem/100-formatting.md b/src/roadmaps/typescript/content/114-ecosystem/100-formatting.md index 9a301aeaa..21e1cb265 100644 --- a/src/roadmaps/typescript/content/114-ecosystem/100-formatting.md +++ b/src/roadmaps/typescript/content/114-ecosystem/100-formatting.md @@ -1,20 +1,8 @@ # Formatting -Formatting in TypeScript refers to the way code is indented, spaced, and arranged to make it easier to read and understand. Consistent formatting helps to ensure that code is readable, maintainable, and consistent across multiple developers and projects. +Prettier is an opinionated code formatter with support for JavaScript, HTML, CSS, YAML, Markdown, GraphQL Schemas. By far the biggest reason for adopting Prettier is to stop all the on-going debates over styles. -Here's an example of basic formatting in TypeScript: +Visit the following resources to learn more: - ``` - function add(a: number, b: number): number { - return a + b; - } - - const result = add(3, 5); - console.log(result); // Output: 8 - ``` - -In this example, the code is indented with two spaces, and each line of code is separated by a line break. The opening brace `{` is placed on the same line as the function declaration, and the closing brace } is indented on a new line. This is a common style for formatting code in TypeScript. - -Learn more from the following links: - -- [How to format strings in TypeScript?](https://www.tutorialspoint.com/how-to-format-strings-in-typescript) \ No newline at end of file +- [Prettier Website](https://prettier.io) +- [Why Prettier](https://prettier.io/docs/en/why-prettier.html) diff --git a/src/roadmaps/typescript/content/114-ecosystem/101-linting.md b/src/roadmaps/typescript/content/114-ecosystem/101-linting.md index d91b9e267..dabd06181 100644 --- a/src/roadmaps/typescript/content/114-ecosystem/101-linting.md +++ b/src/roadmaps/typescript/content/114-ecosystem/101-linting.md @@ -1,32 +1,9 @@ # Linting +With ESLint you can impose the coding standard using a certain set of standalone rules. -Linting in TypeScript refers to the process of using a linter to analyze your code and find potential problems or issues. Linters can help you enforce a consistent coding style, catch syntax errors, and identify problematic patterns in your code. +Visit the following resources to learn more: -Here's an example of how you can use TSLint, a popular TypeScript linter, in your TypeScript project: - - ``` - // Step 1: Install TSLint - npm install tslint - - // Step 2: Create a TSLint configuration file (tslint.json) - { - "extends": [ - "tslint:recommended" - ], - "rules": { - "semicolon": [true, "always"], - "quotemark": [true, "double"] - } - } - - // Step 3: Run TSLint on your TypeScript code - ./node_modules/.bin/tslint myFile.ts - ``` - -In this example, we first install TSLint using the npm package manager. Next, we create a TSLint configuration file, "tslint.json", that extends the recommended TSLint rules and sets specific rules for semicolons and quotes. - -Learn more from the following links: - -- [Linting TypeScript](https://www.youtube.com/watch?v=020KjoCox70) -- [Linting in TypeScript using ESLint and Prettier](https://blog.logrocket.com/linting-typescript-eslint-prettier/) \ No newline at end of file +- [ESLint Official Website](https://eslint.org/) +- [Introduction to ESLint](https://dev.to/shivambmgupta/eslint-what-why-when-how-5f1d) +- [ESLint Quickstart - find errors automatically](https://www.youtube.com/watch?v=qhuFviJn-es) diff --git a/src/roadmaps/typescript/content/114-ecosystem/102-useful-packages.md b/src/roadmaps/typescript/content/114-ecosystem/102-useful-packages.md index c3cf8d5a7..f50c02684 100644 --- a/src/roadmaps/typescript/content/114-ecosystem/102-useful-packages.md +++ b/src/roadmaps/typescript/content/114-ecosystem/102-useful-packages.md @@ -1,49 +1,11 @@ # Useful Packages -There are many useful packages available for TypeScript that can help you improve your development workflow and add new functionality to your projects. Here are a few popular packages to consider using in your TypeScript projects: - -1. Lodash: A utility library that provides a wide range of helpful functions for working with arrays, objects, and other data structures. - - ``` - // Step 1: Install Lodash - npm install lodash - - // Step 2: Import Lodash in your TypeScript code - import * as _ from "lodash"; - - // Step 3: Use Lodash in your code - const result = _.map([1, 2, 3], (num) => num * 3); - console.log(result); // Output: [3, 6, 9] - ``` - -2. Axios: A popular HTTP client for making REST API requests. - - ``` - // Step 1: Install Axios - npm install axios - - // Step 2: Import Axios in your TypeScript code - import axios from "axios"; - - // Step 3: Use Axios in your code - axios.get("https://jsonplaceholder.typicode.com/posts") - .then((response) => { - console.log(response.data); - }); - ``` - -3. Moment.js: A library for working with dates and times. - - ``` - // Step 1: Install Moment.js - npm install moment - - // Step 2: Import Moment.js in your TypeScript code - import * as moment from "moment"; - - // Step 3: Use Moment.js in your code - const date = moment().format("MMMM Do YYYY, h:mm:ss a"); - console.log(date); // Output: "February 1st 2023, 2:00:00 pm" - ``` - -These are just a few examples of the many useful packages available for TypeScript. By using these and other packages, you can improve your development workflow and add new functionality to your projects. \ No newline at end of file +TypeScript has a large ecosystem of packages that can be used to extend the language or to add functionality to your project. Here is the list of some of the most useful packages. + +- [zod](https://zod.dev/): A TypeScript-first data validation library +- [ts-morph](https://github.com/dsherret/ts-morph): A TypeScript-first API for manipulating TypeScript code +- [ts-node](https://typestrong.org/ts-node/): A TypeScript execution and REPL for node.js +- [ts-jest](https://github.com/kulshekhar/ts-jest): A Jest transformer with source map support that lets you use Jest to test projects written in TypeScript. +- [typesync](https://github.com/jeffijoe/typesync): Install missing TypeScript typings for dependencies in your package.json. +- [tsd](https://github.com/SamVerschueren/tsd) - TypeScript Definition Manager +- [type-fest](https://github.com/sindresorhus/type-fest) - A collection of essential TypeScript types \ No newline at end of file diff --git a/src/roadmaps/typescript/content/114-ecosystem/103-build-tools.md b/src/roadmaps/typescript/content/114-ecosystem/103-build-tools.md index 0c57abb63..fb6265feb 100644 --- a/src/roadmaps/typescript/content/114-ecosystem/103-build-tools.md +++ b/src/roadmaps/typescript/content/114-ecosystem/103-build-tools.md @@ -1,13 +1,16 @@ # Build Tools -Build tools are used to compile and bundle your TypeScript code into a format that can be run in a browser or other environment. Some popular build tools for TypeScript include: +Task runners automatically execute commands and carry out processes behind the scenes. This helps automate your workflow by performing mundane, repetitive tasks that you would otherwise waste an egregious amount of time repeating yourself. -- Webpack: A popular module bundler that can compile and bundle TypeScript code, as well as other assets such as CSS, images, and more. -- Babel: A popular JavaScript compiler that can be used to compile TypeScript code into a format that is compatible with older browsers and environments. -- Rollup: A module bundler that can be used to compile and bundle TypeScript code for small to medium-sized projects. -- Parcel: A fast and efficient zero-configuration bundler that can compile and bundle TypeScript code. +Common usages of task runners include numerous development tasks such as: spinning up development servers, compiling code (ex. SCSS to CSS), running linters, serving files up from a local port on your computer, and many more! -Learn more from the following links: +Visit the following resources to learn more: -- [Integrating with Build Tools](https://www.typescriptlang.org/docs/handbook/integrating-with-build-tools.html#handbook-content) -- [TypeScript Build Tools](https://www.javatpoint.com/typescript-build-tools) \ No newline at end of file +- [webpack is a static module bundler for modern JavaScript applications](https://webpack.js.org/) +- [Vite Next Generation Frontend Tooling](https://vitejs.dev) +- [Parcel is a zero configuration build tool for the web](https://parceljs.org/) +- [esbuild is an extremely fast JavaScript bundler and minifier](https://esbuild.github.io/) +- [swc is a super-fast compiler written in Rust](https://swc.rs/) +- [tsup is a zero-config TypeScript build tool](https://tsup.egoist.sh/) +- [Rollup is a module bundler for JavaScript](https://rollupjs.org/guide/en/) +- [tsdx is a zero-config CLI for TypeScript package development](https://tsdx.io/) \ No newline at end of file diff --git a/src/roadmaps/typescript/content/114-ecosystem/index.md b/src/roadmaps/typescript/content/114-ecosystem/index.md index 3a975ed0d..37af10642 100644 --- a/src/roadmaps/typescript/content/114-ecosystem/index.md +++ b/src/roadmaps/typescript/content/114-ecosystem/index.md @@ -1,24 +1,3 @@ # Ecosystem -The TypeScript ecosystem refers to the set of tools, libraries, and packages that are available to support the development of applications using TypeScript. Here are a few examples of the components that make up the TypeScript ecosystem: - -1. TypeScript Compiler - - ``` - // Example: Compiling TypeScript code using the TypeScript compiler - tsc index.ts - ``` - -2. TypeScript Definition Files - - ``` - // Example: Installing TypeScript definition files for the Lodash library - npm install @types/lodash - ``` - -3. TypeScript Plugins for Editor Environments -4. TypeScript-based Frameworks and Libraries - -Learn more from the following links: - -- [tsc, the TypeScript compiler](https://www.typescriptlang.org/docs/handbook/2/basic-types.html#tsc-the-typescript-compiler) \ No newline at end of file +Have a look at the linked nodes for different tools and frameworks that you can use to build your projects. \ No newline at end of file