TypeScript学习之Utility Types-typescript @types

[[419655]]

本文转载自微信公众号「xyz编程日记」，作者小综哥。转载本文请联系xyz编程日记公众号。

TypeScript学习之Utility Types

TS在全局内置了很多Utility Types，可以极大的提高我们开发效率。所以本文就是详细介绍、理解、掌握。

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，映射类型、索引签名
?：可选

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

到这里我们就理解-?的含义了。

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>;

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" }, 
};

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]; 
};

Omit<Type, Keys>

这里就不重复介绍，可以看我之前文章：TypeScript学习之Omit。

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';

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取反的区别。

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的运用。

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。

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; 
}

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推断的位置不同。

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 的区别是它推断的不是参数类型，而是返回值类型。

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，建议还是看官网。

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。

ending

参考官网。