工具类型
TS在全局内置了很多Utility Types
,来对已有类型做一些处理,然后获得我们想要的新类型:
type --> [type utils] --> newType
1 Partial<Type>
作用:它会将Type
内所有属性置为可选,返回一个给定类型Type
的子集。
示例:
interface Todo {
title: string;
description: string;
}
// 场景:只想更新toTo部分属性,Partial的使用就比较优雅了
function updateTodo(todo: Todo, fieldsToUpdate: Partial<Todo>) {
return { ...todo, ...fieldsToUpdate };
}
const todo1 = {
title: "organize desk",
description: "clear clutter",
};
const todo2 = updateTodo(todo1, {
description: "throw out trash",
});
我们看看Partial
背后是如何实现的:
/**
* Make all properties in T optional
*/
type Partial<T> = {
[P in keyof T]?: T[P];
};
上面定义涉及的知识点:
泛型
<T>
keyof
运算符:获取T的所有键[P in keyof T]
:遍历T的所有key,映射类型、索引签名?
:可选
2 Required<Type>
作用:Required
与上面的Partial
相反,构建返回一个Type
的所有属性为必选的新类型。
示例:
interface Props {
a?: number;
b?: string;
}
const obj: Props = { a: 5 };
const obj2: Required<Props> = { a: 5 }; // Property 'b' is missing in type '{ a: number; }' but required in type 'Required<Props>'.
我们看看Required
背后的实现:
/**
* Make all properties in T required
*/
type Required<T> = {
[P in keyof T]-?: T[P];
};
上面定义涉及的知识点:
在TS2.8版本改善了对映射类型修饰符的支持。
在TS2.8版本之前,支持对映射类型的属性添加readonly
、?
的修饰符,但是并没有提供移除修饰符的能力。默认它的修饰符是跟映射类型保持一致的,有兴趣的可以看这个PR以及它fix的issue。那现在映射类型它支持通过+
或者-
来添加or移除readonly
或者?
修饰符。
我们看一个示例:
type A = { readonly a? : number, b: string };
type MockRequired<T> = {
-readonly [P in keyof T]-?: T[P] // 这里可以不需要-?
};
const test: MockRequired<A> = { // 我希望a是必须的
a: 10,
b: 'b'
};
test.a = 20; // 我希望可以修改a
到这里我们就理解-?
的含义了。
3 Readonly<Type>
作用:将Type
所有属性置为只读。示例:
interface Todo {
title: string;
}
const todo: Readonly<Todo> = {
title: "Delete inactive users",
};
todo.title = "Hello"; // Cannot assign to 'title' because it is a read-only property.
我们看看Readonly
背后的实现:
/**
* Make all properties in T readonly
*/
type Readonly<T> = {
readonly [P in keyof T]: T[P];
};
这里有上面的知识铺垫就比较好理解了,只需要知道映射类型支持修饰符readonly
、?
。
另外这里补充下readonly
的含义跟JS的const
不能修改的含义一样,指的是不能重写(重写赋值)。
这个方法对于Object.freeze
的定义非常适用:
function freeze<Type>(obj: Type): Readonly<Type>;
4 Record<Keys,Type>
作用:构建一个对象类型,该对象类型的key
来自Keys
,并且其key
对应的value
是Type
。所以这个方法非常适用于将一个类型的属性映射到另外一个类型。
示例:
interface CatInfo {
age: number;
breed: string;
}
type CatName = "miffy" | "boris" | "mordred";
const cats: Record<CatName, CatInfo> = {
miffy: { age: 10, breed: "Persian" },
boris: { age: 5, breed: "Maine Coon" },
mordred: { age: 16, breed: "British Shorthair" },
};
cats.boris; // (property) boris: CatInfo
我们看看Record
背后定义。
/**
* Construct a type with a set of properties K of type T
*/
type Record<K extends keyof any, T> = {
[P in K]: T;
};
上面涉及的新的知识点:keyof any
。
我们先看一段代码:
type A = keyof any;
type EqualA = string | number | symbol; // A其实等价于EqualA
type Is = A extends EqualA ? true : false;
const is: Is = false; // Type 'false' is not assignable to type 'true'.
因此如果我们这样使用就会提示报错了:
interface CatInfo {
age: number;
breed: string;
}
type CatName = "miffy" | "boris" | "mordred" | false; // false导致
const cats: Record<CatName, CatInfo> = { // Error: Type 'string | boolean' does not satisfy the constraint 'string | number | symbol'. Type 'boolean' is not assignable to type 'string | number | symbol'.
miffy: { age: 10, breed: "Persian" },
boris: { age: 5, breed: "Maine Coon" },
mordred: { age: 16, breed: "British Shorthair" },
};
5 Pick<Type, Keys>
Keys
的类型有要求:string literal or union of string literals
。
作用:构建返回一个根据Keys
从类型Type
拣选所需的属性的新类型。
代码示例:
interface Todo {
title: string;
description: string;
completed: boolean;
}
type TodoPreview = Pick<Todo, "title" | "completed">;
const todo: TodoPreview = { // 只需要Keys: title and completed
title: "Clean room",
completed: false,
};
todo;
同样我们看看其背后的实现:这里就没有新的知识点了。
/**
* From T, pick a set of properties whose keys are in the union K
*/
type Pick<T, K extends keyof T> = {
[P in K]: T[P];
};
6 Omit<Type, Keys>
这里就不重复介绍,可以看我之前文章:TypeScript学习之Omit。
7 Exclude<Type, ExcludedUnion>
作用:从Type
中排除可以分配给ExcludedUnion
的类型。
示例:
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<string | number | (() => void), Function>; // type T2 = string | number
我们看看Exclude
背后的实现:
/**
* Exclude from T those types that are assignable to U
*/
type Exclude<T, U> = T extends U ? never : T;
涉及知识点:
T extends U ? never : T
这里的extends
可与class的extends
不是一回事,这里指的是条件类型。这里不做过多的扩展,重点通过一个概念分布式条件类型来理解上面Exclude
的写法。
type A = 'a' | 'b' | 'c';
type B = 'a';
type C = Exclude<A, B>; // 'b' | 'c';
// A extends B ? never : A 等价于 ('a' | 'b' | 'c') extends B ? never : ('a' | 'b' | 'c') 等价于如下
type D = ('a' extends B ? never : 'a') | ('b' extends B ? never : 'b') | ('c' extends B ? never : 'c'); // 'b' | 'c';
8 Extract<Type, Union>
作用:从Type
中检出可以分配给Union
的类型。示例:
type T0 = Extract<"a" | "b" | "c", "a" | "f">; // type T0 = "a"
type T1 = Extract<string | number | (() => void), Function>; // type T1 = () => void
我们看看Extract
背后的定义:
/**
* Extract from T those types that are assignable to U
*/
type Extract<T, U> = T extends U ? T : never;
所有你阔以看到Extract
就是跟Exclude
取反的区别。
9 NonNullable<Type>
作用:排除类型Type
中的null
、undefined
。
示例:
type T0 = NonNullable<string | number | undefined>; // type T0 = string | number
type T1 = NonNullable<string[] | null | undefined>;// type T1 = string[]
看看NonNullable
的定义:
/**
* Exclude null and undefined from T
*/
type NonNullable<T> = T extends null | undefined ? never : T;
我们可以看到其实还是上面分布式条件类型extends
的运用。
10 Parameters<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<<T>(arg: T) => T>; // type T2 = [arg: unknown]
type T3 = Parameters<typeof f1>;
// type T3 = [arg: {
// a: number;
// b: string;
// }]
type T4 = Parameters<any>; // type T4 = unknown[]
type T5 = Parameters<never>; // type T5 = never
type T6 = Parameters<string>; // Type 'string' does not satisfy the constraint '(...args: any) => any'. type T6 = never
type T7 = Parameters<Function>;
// Type 'Function' does not satisfy the constraint '(...args: any) => any'.
// Type 'Function' provides no match for the signature '(...args: any): any'.
// type T7 = never
我们再看看Parameters
背后实现。
/**
* 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;
涉及知识点:
T extends (...args: any) => any
定义了Parameters
的泛型约束,兼容目前所有函数的类型定义。infer P
:用于表示待推断的函数参数。
T extends (...args: infer P) => any ? P : never
:表示如果 T
能赋值给 (...args: infer P) => any
,则结果是 (...args: infer P) => any
类型中的参数为 P
,否则返回为 never
。
关于info
更多学习推荐深入理解typescript-info。
11 ConstructorParameters<Type>
作用:从构造函数类型 Type
的参数类型构造元组或数组类型(如果 Type
不是函数,则为 never
)。示例:
type T0 = ConstructorParameters<ErrorConstructor>; // type T0 = [message?: string]
type T1 = ConstructorParameters<FunctionConstructor>; // type T1 = string[]
type T2 = ConstructorParameters<RegExpConstructor>; // type T2 = [pattern: string | RegExp, flags?: string]
type T3 = ConstructorParameters<any>; // type T3 = unknown[]
看看其ConstructorParameters
定义:
/**
* Obtain the parameters of a constructor function type in a tuple
*/
type ConstructorParameters<T extends abstract new (...args: any) => any> = T extends abstract new (...args: infer P) => any ? P : never;
ConstructorParameters
跟Parameters
的定义几乎一样,区别在于前者是表达构造函数签名的定义。
常见的构造函数类型签名有:基于Type
或者Interface
。
type SomeConstructor = {
new (s: string): SomeObject;
};
function fn(ctor: SomeConstructor) {
return new ctor("hello");
}
interface CallOrConstruct {
new (s: string): Date;
(n?: number): number;
}
12 ReturnType<Type>
作用:基于函数Type
的返回值类型创建一个新类型。
示例:
declare function f1(): { a: number; b: string };
type T0 = ReturnType<() => string>; // type T0 = string
type T4 = ReturnType<typeof f1>;
// type T4 = {
// a: number;
// b: string;
// }
源码定义:
/**
* Obtain the return type of a function type
*/
type ReturnType<T extends (...args: any) => any> = T extends (...args: any) => infer R ? R : any;
我们可以看到其原理跟前几个差不多,区别在于infer
推断的位置不同。
13 InstanceType<Type>
作用:基于函数类型Type
的constructor
的类型构造一个新类型。示例:
class C {
x = 0;
y = 0;
}
type T0 = InstanceType<typeof C>; // type T0 = C
type T1 = InstanceType<any>; // type T1 = any
源码定义:
/**
* Obtain the return type of a constructor function type
*/
type InstanceType<T extends abstract new (...args: any) => any> = T extends abstract new (...args: any) => infer R ? R : any;
通过对比发现:InstanceType
与 ReturnType
的区别是它多了函数构造签名定义,与 ConstructorParameters
的区别是它推断的不是参数类型,而是返回值类型。
14 ThisParameterType<Type>
作用:获取函数类型Type
中的this
类型。如果没有返回unknown
。
function toHex(this: Number) {
return this.toString(16);
}
function numberToString(n: ThisParameterType<typeof toHex>) { // n: number
return toHex.apply(n);
}
源码定义:
/**
* 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;
如果想了解如何在函数中定义this
,建议还是看官网。
15 OmitThisParameter<Type>
作用:移除函数类型Type
中参数的this
。
示例:
function toHex(this: Number) {
return this.toString(16);
}
const fiveToHex: OmitThisParameter<typeof toHex> = toHex.bind(5); // const fiveToHex: () => string
console.log(fiveToHex());
源码定义:
/**
* 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;
unknown extends ThisParameterType<T>
:如果T
函数参数中没有this
,则直接返回T
。否则,T extends (...args: infer A) => infer R ? (...args: A) => R : T;
,如果T
是后者的子类型,那么返回新的函数,函数参数为推导的infer A
,返回值为infer R
。否则返回T
。