TypeScript 常用工具（Partial、Readonly、Record、Pick、Omit、Required、InstanceType）

工具类型

Partial

构造类型 Type，并将它所有的属性设置为可选的。它的返回类型表示输入类型的所有子类型。

type Person = {
  name: string,
  age: number,
  sex?: string,
};

type Teacher = Partial<Person>;
type Teacher = {
  name?: string | undefined,
  age?: number | undefined,
  sex?: string | undefined,
};

Readonly

构造类型 Type，并将它所有的属性设置为 readonly，也就是说构造出的类型的属性不能被再次赋值。

type Person = {
  name: string;
  age: number;
  sex?: string;
};

type Teacher = Readonly<Person>;
type Teacher = {
    readonly name: string;
    readonly age: number;
    readonly sex?: string | undefined;
}

Record<Keys, Type>

构造一个类型，其属性名的类型为 K，属性值的类型为 T。这个工具可用来将某个类型的属性映射到另一个类型上。

type Person = {
  name: string,
  age: number,
  sex?: string,
};

type Teacher = Record<"data", Person>;
type Teacher = {
  data: Person,
};

Pick<Type, Keys>

从类型 Type 中挑选部分属性 Keys 来构造类型。

type Person = {
  name: string,
  age: number,
  sex?: string,
};

type Teacher = Pick<Person, "name" | "sex">;
type Teacher = {
  name: string,
  sex?: string | undefined,
};

Omit<Type, Keys>

从类型 Type 中获取所有属性，然后从中剔除 Keys 属性后构造一个类型。

type Person = {
  name: string,
  age: number,
  sex: string,
};
// 去除一个
type Teacher = Omit<Person, "sex">;
type Teacher = {
  name: string,
  age: number,
};

// 去除多个写法
type Student = Omit<Person, "sex" | "age">;
type Student = {
  name: string,
};

Required

构建一个类型，使类型 Type 的所有属性为 required。 与此相反的是 Partial。

type Person = {
  name: string,
  age: number,
  sex?: string,
};

type Teacher = Required<Person>;
type Teacher = {
  name: string,
  age: number,
  sex: string,
};

InstanceType

由构造函数类型 Type 的实例类型来构建一个新类型。

class C {
  x = 0;
  y = 0;
}

type T0 = InstanceType<typeof C>; // C
type T1 = InstanceType<any>; // any
type T2 = InstanceType<never>; // any
type T3 = InstanceType<string>; // Error
type T4 = InstanceType<Function>; // Error

<Child  ref="child" />
import { ref, onMounted } from 'vue';
import Child from './Child.vue';
const child = ref<InstanceType<typeof Child> | null>(null);

onMounted(() => {
  console.log('child', child.value?.name);
});