From 7627bc73b5ce52fd41c883afd73396882b2355b2 Mon Sep 17 00:00:00 2001 From: syedmouaazfarrukh Date: Wed, 1 Feb 2023 07:05:23 -0800 Subject: [PATCH] 112-advanced-types --- .../112-advanced-types/100-mapped-types.md | 22 ++++++++++++++++++- .../101-conditional-types.md | 20 ++++++++++++++++- .../112-advanced-types/102-literal-types.md | 20 ++++++++++++++++- .../103-template-literal-types.md | 20 ++++++++++++++++- .../112-advanced-types/104-recursive-types.md | 14 +++++++++++- .../content/112-advanced-types/index.md | 19 +++++++++++++++- 6 files changed, 109 insertions(+), 6 deletions(-) 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 a8f967f01..c612e025c 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 @@ -1 +1,21 @@ -# Mapped types \ No newline at end of file +# Mapped Types + +Mapped types in TypeScript are a way to create a new type based on an existing type, where each property of the existing type is transformed in some way. Mapped types are declared using a combination of the `keyof` operator and a type that maps each property of the existing type to a new property type. + +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`: + +``` +type Readonly = { + readonly [P in keyof T]: T[P]; +}; + +let obj = { x: 10, y: 20 }; +let readonlyObj: Readonly = obj; +``` + +In this example, the `Readonly` mapped type takes an object type `T` and creates a new type with all properties of `T` but with their type changed to `readonly`. The keyof `T` operator is used to extract the names of the properties of `T`, and the `T[P]` syntax is used to access the type of each property of `T`. The `readonly` keyword is used to make the properties of the new type `readonly`. + +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 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 7490075c4..ce195be7b 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 @@ -1 +1,19 @@ -# Conditional types \ No newline at end of file +# Conditional Types + +Conditional types in TypeScript are a way to select a type based on a condition. They allow you to write a type that dynamically chooses a type based on the types of its inputs. Conditional types are declared using a combination of the `infer` keyword and a type that tests a condition and selects a type based on the result of the test. + +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: + +``` +type Extends = T extends U ? T : U; + +type A = Extends; // type A is 'string' +type B = Extends; // type B is 'string' +``` + +In this example, the Extends conditional type takes two types T and U and returns the type of the first argument `T` if it extends the second argument `U`, and the type of the second argument `U` otherwise. The T extends `U` syntax is used to test whether `T extends U`, and the `? T : U` syntax is used to select the type `T` if the test passes and the type `U` otherwise. + +Learn more from the following links: + +- [Conditional Types](https://www.typescriptlang.org/docs/handbook/2/conditional-types.html#handbook-content) +- [Conditional Types - Advanced TypeScript](https://www.youtube.com/watch?v=QFWrbNehKk0) \ No newline at end of file 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 5f0773727..6955112dd 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 @@ -1 +1,19 @@ -# Literal types \ No newline at end of file +# Literal Types + +Literal types in TypeScript are a way to specify a value exactly, rather than just a type. Literal types can be used to enforce that a value must be of a specific type and a specific value. Literal types are created by using a literal value, such as a string, number, or boolean, as a type. + +For example, the following is a literal type that represents a value of 42: + +``` +type Age = 42; + +let age: Age = 42; // ok +let age: Age = 43; // error +``` + +In this example, the `Age` literal type is created by using the number `42` as a type. This type can then be used to enforce that a value must be of type `number` and have the value `42`. + +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 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 0636788e6..5eb36a0d8 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 @@ -1 +1,19 @@ -# Template literal types \ No newline at end of file +# Template Literal Types + +Template literal types in TypeScript are a way to manipulate string values as types. They allow you to create a type based on the result of string manipulation or concatenation. Template literal types are created using the backtick (``) character and string manipulation expressions within the type. + +For example, the following is a template literal type that concatenates two strings: + + ``` + type Name = `Mr. ` + string; + + 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 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 80540a482..77617373d 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 @@ -1 +1,13 @@ -# Recursive types \ No newline at end of file +# Recursive Types + +Recursive types in TypeScript are a way to define a type that references itself. Recursive types are used to define complex data structures, such as trees or linked lists, where a value can contain one or more values of the same type. + +For example, the following is a recursive type that represents a linked list: + + ``` + type LinkedList = T & { next: LinkedList }; + + 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/112-advanced-types/index.md b/src/roadmaps/typescript/content/112-advanced-types/index.md index f379adf1c..b82461f8e 100644 --- a/src/roadmaps/typescript/content/112-advanced-types/index.md +++ b/src/roadmaps/typescript/content/112-advanced-types/index.md @@ -1 +1,18 @@ -# Advanced types \ No newline at end of file +# Advanced Types + +Advanced types in TypeScript are a set of advanced type constructs that allow for more complex and expressive type systems. Some of the most commonly used advanced types in TypeScript include: + +- Intersection Types +- Union Types +- Type Aliases +- Conditional Types +- Index Types +- Mapped Types +- Type Guards + +These advanced types allow for more complex and expressive type systems, and enable you to write code that is safer, more maintainable, and easier to understand. By leveraging these advanced types, you can write code that is more robust, less prone to errors, and easier to maintain. + +Learn more from the following links: + +- [Advanced Topics](https://www.typescriptlang.org/docs/handbook/type-compatibility.html#advanced-topics) +- [Tutorial of Typescript - Advanced Types](https://www.youtube.com/playlist?list=PLw5h0DiJ-9PBIgIyd2ZA1CVnJf0BLFJg2) \ No newline at end of file