[TypeScript] Generic Functions, class, Type Inference and Generics
typescript and type Class Functions generic Inference generics
2023-09-14 09:00:50 时间
Generic Fucntion:
For example we have a set of data and an function:
interface HasName { name: string; } const heros: HasName[] = [ {name: 'Jno'}, {name: 'Miw'}, {name: 'Ggr'}, {name: 'Gew'}, {name: 'Wfe'} ]; function cloneArray(ary: any[]): any[] { return ary.slice(0); } const clones = cloneArray(heros);
When we check the 'clones' type, you can see it is 'any[]'.
To add more type information we can change the function:
function cloneArray<T>(ary: T[]): T[] { return ary.slice(0); }
Now we get 'clones' type as 'HasName[]'.
Generic Class:
class SuperCharacter { constructor(public name: string) { } } class Hero extends SuperCharacter { } class SuperTeam { constructor(public members: SuperCharacter[], public leader: SuperCharacter ) { } } const captainAmerica = new Hero('Captain America'); const thor = new Hero('Thor'); const ironMan = new Hero('IronMan'); const avengers = new SuperTeam( [captainAmerica, thor, ironMan], captainAmerica ); const members = avengers.members;
If we check 'avengers' type is 'SuperTeam'. 'memebers' type is 'SuperCharacter[]'.
To add more information to the types we can do:
class SuperTeam<T> { constructor(public members: T[], public leader: T ) { } }
Now the 'avengers' type is 'SuperTeam<Hero>' and 'members' type is 'Hero[]'.
Now, let's say we have another class:
class Villain extends SuperCharacter { }
Have some members.
const luthor = new Villain('Luthor'); const bizarro = new Villain('Bizarro'); const captainCold = new Villain('Captain Cold'); const megaCrossoverTeam = new SuperTeam([ captainAmerica, thor, ironMan, luthor, bizarro, captainCold ], captainAmerica);
'megaCrossoverTeam' is type of 'SuperTeam<Hero | Villain>'.
If we want to add some restrictions to the class, we can do:
class SuperTeam<T extends SuperCharacter> { constructor(public members: T[], public leader: T ) { } }
Then the example below will throw error:
const avengers = new SuperTeam( [0, 1, 2], 0 );
Because the type is number.
相关文章
- [Typescript] Create a Type-Safe Request Handler with Zod and Express
- [!Typescript] Tips: Access deeper parts of objects and arrays
- [Typescript] Abstract Classes
- [Typescript] Key remapping in mapped types by using `as` keyword V4.2
- [TypeScript] Thrown values as unknown V4
- [Typescript] Intersections types
- [Typescript] Performance Bundling and tslib
- [TypeScript] instanceof and Type Guards (getPrototypeOf)
- [TypeScript] String Enums and Inlining Members
- [CLI] Create a Hybrid Single-Multi Command Node.js CLI with Oclif and TypeScript
- [Vuex] Use Namespaces in Vuex Stores using TypeScript
- [React] Write a stateful Component with the React useState Hook and TypeScript
- [TypeScript] Create Explicit and Readable Type Declarations with TypeScript mapped Type Modifiers
- [Webpack + React] Import CSS Modules with TypeScript and webpack
- [Typescript] What is a Function Type ? Function Types and Interfaces - Are They Related ?
- [TypeScript] Union Types and Type Aliases in TypeScript
- [TypeScript] Using Exclude and RootDir until File Globs Lands in 2.0.
- [Typescript] Default value for Builder pattern - 04 (keyof {} -> never)
- [Typescript] "Readonly" Mapped Type
- [TypeScript] instanceof and Type Guards (getPrototypeOf)
- [React] Write a stateful Component with the React useState Hook and TypeScript
- [TypeScript] Create Explicit and Readable Type Declarations with TypeScript mapped Type Modifiers
- [TypeScript] Type check JavaScript files using JSDoc and Typescript 2.5
- [Typescript] What is a Function Type ? Function Types and Interfaces - Are They Related ?
- [TypeScript] Union Types and Type Aliases in TypeScript
- [TypeScript] Function Overloads in Typescript
- [TypeScript] Using Exclude and RootDir until File Globs Lands in 2.0.
- [TypeScript] Avoid any type
- typescript ts定义对象类型的三种方式
- TypeScript里的空值合并运算符(双问号)用法
- TypeScript里的可选链(Optional Chaining,即问号)用法 - ?.