江苏龙网

  1. 主页 > 生活百科 > >

一看就懂的TypeScript工具类型( 二 )

TypeScript


应用：
interface Text {size: numbercolor: string}type T = Pick<Text,'size'>type R = Omit<Text,'size'>type N = NonNullable<Text|null|undefinde>新定义的T类型，只包括Text类型中的属性size及其类型；新定义的T类型，只包括Text类型中的属性color及其类型；新定义的N类型，只包括Text类型 。
Parameters、ConstructorParameters、ReturnType与InstanceType该组工具类型为与函数相关的工具类型，包括获取普通函数参数和返回值的工具类型和获取构造函数参数和返回值的构造类型 。
定义：
/** * Obtain the parameters of a function type in a tuple */type Parameters<T extends (...args: any) => any> = T extends (...args: infer P) => any ? P : never;/** * Obtain the parameters of a constructor function type in a tuple */type ConstructorParameters<T extends new (...args: any) => any> = T extends new (...args: infer P) => any ? P : never;/** * Obtain the return type of a function type */type ReturnType<T extends (...args: any) => any> = T extends (...args: any) => infer R ? R : any;/** * Obtain the return type of a constructor function type */type InstanceType<T extends new (...args: any) => any> = T extends new (...args: any) => infer R ? R : any;知识点：
infer：关键字，在extends条件类型语句（T extends U ？X : Y）中，允许在类型U的位置上使用关键字infer定义可推断的类型变量，可推断的类型变量只允许在类型X的位置上使用 。简单应用如下，取出数组中的类型：
type ExtractArrayItemType<T> = T extends (infer U)[] ? U : T;// 条件判断为 true，返回 Utype T = ExtractArrayItemType<string[]>; // string作用：
Parameters工具类型能够获取函数类型的参数类型，并使用参数类型构造一个元组类型; ConstructorParameters工具类型可以把构造函数的参数类型作为一个元组类型返回；ReturnType工具类型可以获取函数的返回值类型; InstanceType工具类型可以获取构造函数的返回类型；
应用：
type Fn = (a: string, b: number) => string;type FnParamTypes = Parameters(Fn);// [string, number]type FnReturnType = ReturnType(Fn); // stringinterface FunctionConstructor {new(...args: string[]): Function;(...args: string[]): Function;readonly prototype: Function;}type ConstructorParamTypes = ConstructorParameters(FunctionConstructor) // string[]type ConstructorInstanceType = InstanceType(FunctionConstructor) // FunctionThisParameterType、OmitThisParameter与ThisType该组类型均为与this相关的工具类型 。
定义：
/** * Extracts the type of the 'this' parameter of a function type, or 'unknown' if the function type has no 'this' parameter. */type ThisParameterType<T> = T extends (this: infer U, ...args: any[]) => any ? U : unknown;/** * Removes the 'this' parameter from a function type. */type OmitThisParameter<T> = unknown extends ThisParameterType<T> ? T : T extends (...args: infer A) => infer R ? (...args: A) => R : T;/** * Marker for contextual 'this' type */interface ThisType<T> { }知识点：
unknown：顶端类型，TypeScript中仅有any和unknown两种顶端类型，所有其他类型都可以赋值给两者，但unknown只能赋值给any类型和unknown类型 。TypeScript中只有一个尾端类型never，是其他所有类型的子类型 。
作用 ThisParameterType类型可以获取函数参数中this参数的类型；OmitThisParameter类型可以剔除函数参数中this参数的类型；ThisType类型可以对象字面量中this的类型 。
应用
interface Foo {x: number};function fn(this: Foo) {}type Test = ThisParameterType<typeof fn>; // Footype Fn = (this: Foo) => voidtype NonReturnFn = OmitThisParameter<Fn>; // () => voidlet obj: ThisType<{x: number, getX: () => number}>obj = {x: 100,getX(){return this.x}}以上简单介绍了TypeScript中的自带工具类型，TypeScript与JAVAScript有相通之处，但又有更多的不同和背景知识，只有内化了这些知识同时不断地练习才能有效掌握这一门语言 。




推荐阅读


上一篇：5个等级的数据分析，哪个最深入？

下一篇：深入剖析JavaScript中深浅拷贝