diff --git a/Programming_Languages/TypeScript/Generics.md b/Programming_Languages/TypeScript/Generics.md index 6e72d46..725bc2e 100644 --- a/Programming_Languages/TypeScript/Generics.md +++ b/Programming_Languages/TypeScript/Generics.md @@ -127,3 +127,33 @@ console.log(allItems); // { key: 2, value: "two" } // ] ``` + +## Real examples + +### GraphQL client for query and mutation requests over `fetch` + +### VSCode extension TreeView generator + +In VSCode a TreeView is a list of values that may have nested values, like a directory. The following generic is a helper function that generates a TreeView based on a given class that is passed in as an argument, along with the class's constructor values (`args` in the example). It also calls a method `refresh` on each instance of the class. + +```ts +function createTreeView< + T extends IndexHyperlinksProvider | IndexMetadataProvider, + U extends LinkTypes | MetadataTypes +>( + viewType: string, + ProviderClass: new (...args: any[]) => T, + type: U, + activeEditor?: string | undefined, + ...args: ConstructorParameters +): T { + const view = new ProviderClass(...args, type); + if (view instanceof IndexHyperlinksProvider) { + view.refresh(activeEditor, type as LinkTypes); + } else if (view instanceof IndexMetadataProvider) { + view.refreshIndex(); + } + vscode.window.registerTreeDataProvider(viewType, view); + return view; +} +``` diff --git a/Programming_Languages/TypeScript/Mapped_types.md b/Programming_Languages/TypeScript/Mapped_types.md new file mode 100644 index 0000000..09ded0b --- /dev/null +++ b/Programming_Languages/TypeScript/Mapped_types.md @@ -0,0 +1,130 @@ +--- +categories: + - Programming Languages +tags: + - typescript +--- + +# Mapped types in TypeScript + +A mapped type is a way to create new types based on existing ones by transforming their properties + +As it works on a single type and typically narrows or limits the properties it works in a way that is opposite to a [union]() or [intersection]() type. + +> Mapped types are an example of when `type` is preferable to `interface`, since you cannot generate mapped types as interfaces, although you may generate a mapped type from an interface. + +For the demonstrations we will use the following type as the example that we will map from: + +```ts +type Person = { + name: string; + age: number; + city: string; + country: string; +}; +``` + +### Read only mapped type + +Creates a type with all properties of the given type set to `readonly`: + +```ts +type Readonly = { + readonly [P in keyof T]: T[P]; +}; + +type ReadonlyPerson = Readonly; +``` + +This is equivalent to: + +```ts +type ReadonlyPerson = { + readonly name: string; + readonly age: number; + readonly city: string; + readonly country: string; +}; +``` + +### Partial mapped type + +Creates a type with all properties of the given type set to optional. + +```ts +type Partial = { + [P in keyof T]?: T[P]; +}; + +type PartialPerson = Partial; +``` + +This is equivalent to: + +```ts +type PartialPerson = { + name?: string; + age?: number; + city?: string; + country?: string; +}; +``` + +### Pick mapped type + +```ts +type Pick = { + [P in K]: T[P]; +}; + +type PersonNameAndAge = Pick; +``` + +This is equivalent to: + +```ts +type PersonNameAndAge = { + name: string; + age: number; +}; +``` + +### Record mapped type + +Creates a type with keys of the given type and values of the specified type. + +> How does this related to `Record` more generally in TS? + +> How is this different from `Pick` ? + +```ts +type Record = { + [P in K]: T; +}; + +type PersonRecord = Record<"id", Person>; +``` + +This is equivalent to: + +```ts +type PersonRecord = { + id: Person; +}; +``` + +### Exclude mapped type + +Creates a type by excluding specific properties from the given type. + +```ts +type Exclude = T extends U ? never : T; + +type KeysWithoutAge = Exclude; +``` + +This is equivalent to: + +```ts +type KeysWithoutAge = "name" | "city" | "country"; +``` diff --git a/_meta/Resources.md b/_meta/Resources.md index e353ebd..8ebca9e 100644 --- a/_meta/Resources.md +++ b/_meta/Resources.md @@ -104,7 +104,7 @@ J. Hunt. 2019. **An Advanced Guide to Python Programming** [Learning Arduino with Python](https://realpython.com/arduino-python/) -[Python Programming Projects](https://github.com/zhiwehu/Python-programming-exercises/blob/master/100%2B%20Python%20challenging%20programming%20exercises.txt) +[Python Programming Exercises](https://github.com/zhiwehu/Python-programming-exercises/blob/master/100%2B%20Python%20challenging%20programming%20exercises.txt) ## Shell