工具类型

10 小时前
/ ,
1

工具类型

Awaited<Type>

在类型层面模拟 await 的效果——把一个“可能是 Promise 的类型”解包成“await 之后得到的值的类型”。它还能递归解包嵌套 Promise

1) 基本用法:解包 Promise

type A = Awaited<Promise<number>>; // number
type B = Awaited<number>;          // number(不是 Promise 就原样返回)

2) 递归解包:嵌套 Promise

type C = Awaited<Promise<Promise<string>>>; // string

3) 处理联合类型:逐个分发

type D = Awaited<Promise<number> | string>; // number | string

4) 常见搭配:拿到 async 函数的返回值类型(await 后)
ReturnType<typeof fn> 拿到的是函数返回类型(通常是 Promise<...>),再用 Awaited<> 解包成最终值类型:

async function fetchUser() {
  return { id: 1, name: "Ling" };
}

type R1 = ReturnType<typeof fetchUser>; // Promise<{ id: number; name: string }>
type R2 = Awaited<R1>;                  // { id: number; name: string }

更实用的封装:AsyncReturnType

type AsyncReturnType<T extends (...args: any) => any> =
  Awaited<ReturnType<T>>;

type User = AsyncReturnType<typeof fetchUser>; // { id: number; name: string }

Partial<Type>

构造一个类型,所有属性都设置为可选。该工具将返回代表给定类型所有子集的类型

interface Todo {
  title: string;
  description: string;
}
 
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",
});

Required<Type>

构造一个类型,将包含所有类型属性,设置为必须字段。与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>'.

Readonly<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.

Record<Keys, Type>

构造一个对象类型,其属性键为键 ,属性值为类型 。该工具可用于将一个类型的属性映射到另一个类型。

type CatName = "miffy" | "boris" | "mordred";
 
interface CatInfo {
  age: number;
  breed: string;
}
 
const cats: Record<CatName, CatInfo> = {
  miffy: { age: 10, breed: "Persian" },
  boris: { age: 5, breed: "Maine Coon" },
  mordred: { age: 16, breed: "British Shorthair" },
};

Pick<Type, Keys>

用于从一个类型 Type 中选取指定的属性(Keys)构建一个新类型。它的作用是从类型中“提取”部分属性,通常用于创建“精简版”类型。

interface Todo {
  title: string;
  description: string;
  completed: boolean;
}
 
type TodoPreview = Pick<Todo, "title" | "completed">;
 
const todo: TodoPreview = {
  title: "Clean room",
  completed: false,
};

Omit<Type, Keys>

通过从类型中选择所有属性,然后移除键来构造一个类型。这和 Pick 相反。

interface Todo {
  title: string;
  description: string;
  completed: boolean;
  createdAt: number;
}
 
type TodoPreview = Omit<Todo, "description">;
 
const todo: TodoPreview = {
  title: "Clean room",
  completed: false,
  createdAt: 1615544252770,
};
  
const todo: TodoPreview
 
type TodoInfo = Omit<Todo, "completed" | "createdAt">;
 
const todoInfo: TodoInfo = {
  title: "Pick up kids",
  description: "Kindergarten closes at 5pm",
};

Exclude<Type, ExcludedUnion>

Exclude 用于从联合类型(Type)中排除掉某些成员。它会返回一个新类型,去除指定的类型成员。

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
 
type Shape =
  | { kind: "circle"; radius: number }
  | { kind: "square"; x: number }
  | { kind: "triangle"; x: number; y: number };
type T3 = Exclude<Shape, { kind: "circle" }>
// type T3 = {
//     kind: "square";
//     x: number;
//      } | {
//     kind: "triangle";
//     x: number;
//     y: number;
// }

Extract<Type, Union>

Exclude<Type, ExcludedUnion>相反,通过从类型中提取所有可分配到 Union 的并集成员来构造类型。

type T0 = Extract<"a" | "b" | "c", "a" | "f">;    
// type T0 = "a"

type T1 = Extract<string | number | (() => void), Function>; 
// type T1 = () => void
 
type Shape =
  | { kind: "circle"; radius: number }
  | { kind: "square"; x: number }
  | { kind: "triangle"; x: number; y: number };
type T2 = Extract<Shape, { kind: "circle" }>
// type T2 = {
//     kind: "circle";
//     radius: number;
// }

NonNullable<Type>

通过排除 null 和 undefined 来构造类型。

type T0 = NonNullable<string | number | undefined>;
// type T0 = string | number

type T1 = NonNullable<string[] | null | undefined>;
// type T1 = string[]

Parameters<Type>

用于提取函数类型 Type 的参数类型。它会返回一个元组类型,包含函数类型所有参数的类型

function add(a: number, b: number): number {
  return a + b;
}
// 提取 add 函数的参数类型
type AddParameters = Parameters<typeof add>;
// AddParameters = [number, number]

ReturnType<Type>

构造由返回类型组成的类型,这里的Type必须是一个函数类型。

declare function f1(): { a: number; b: string };    
type T1 = ReturnType<typeof f1>;
// type T1 = {
//     a: number;
//     b: string;
// }

InstanceType<Type>

它能够提取出一个构造函数返回的类型,Type必须是一个构造函数类型(即具有 new 操作符的函数类型)。

class Person {
  constructor(public name: string, public age: number) {}
}

type PersonInstance = InstanceType<typeof Person>; // Person

type PersonConstructor = new (name: string, age: number) => Person;
type PersonInstance2 = InstanceType<PersonConstructor>; // Person

function createPerson(name: string, age: number) {
  return { name, age };
}

type PersonInstance3 = InstanceType<typeof createPerson>; // { name: string; age: number; }

使用社交账号登录

  • Loading...
  • Loading...
  • Loading...
  • Loading...
  • Loading...