TypeScript 高级类型

本文将介绍

1. 交叉类型
2. 联合类型
3. 泛型<T>
4. Partial
5. Required
6. Readonly
7. Pick
8. Omit
9. 映射类型

1、交叉类型

交叉类型是将多个类型合并为一个类型。把多种类型叠加到一起成为一种类型。PersonA & PersonB & PersonC。

type LeftType = {
    id: number;
    left: string;
};

type RightType = {
    id: number;
    right: string;
};

type IntersectionType = LeftType & RightType;

function showType(args: IntersectionType) {
    console.log(args);
}

showType({ id: 1, left: 'test', right: 'test' });
// Output: {id: 1, left: "test", right: "test"}

2、联合类型

联合类型表示一个值可以是几种类型之一。 number | string | boolean

type UnionType = string | number;
function showType(arg: UnionType) {
    console.log(arg);
}
showType('test');
// Output: test
showType(7);
// Output: 7

注：如果一个值是联合类型，我们只能访问此联合类型的所有类型里共有的成员

interface Bird {
    fly();
    layEggs();
}
interface Fish {
    swim();
    layEggs();
}
function getSmallPet(): Fish | Bird {
    // ...
}
let pet = getSmallPet();
pet.layEggs(); // okay
pet.swim();    // errors  我们不能确定一个 Bird | Fish类型的变量是否有fly方法。 如果变量在运行时是 Fish类型，那么调用pet.fly()就出错了 

3、泛型<T>

可以使用泛型来创建可重用的组件，一个组件可以支持多种类型的数据。组件不仅能够支持当前的数据类型，同时也能支持未来的数据类型。

如何创建泛型类型:需要使用<> 并将 T(名称可自定义)作为参数传递。

• 泛型接口

interface GenericType<T> {
    id: number;
    name: T;
}

function showType(args: GenericType<string>) {
    console.log(args);
}

showType({ id: 1, name: 'test' });
// Output: {id: 1, name: "test"}

function showTypeTwo(args: GenericType<number>) {
    console.log(args);
}

showTypeTwo({ id: 1, name: 4 });
// Output: {id: 1, name: 4}

• 多参数的泛型

interface GenericType<T, U> {
    id: T;
    name: U;
}

function showType(args: GenericType<number, string>) {
    console.log(args);
}

showType({ id: 1, name: 'test' });
// Output: {id: 1, name: "test"}

function showTypeTwo(args: GenericType<string, string[]>) {
    console.log(args);
}

showTypeTwo({ id: '001', name: ['This', 'is', 'a', 'Test'] });
// Output: {id: "001", name: Array["This", "is", "a", "Test"]}

4、Partial

Partial 允许你将T类型的所有属性设为可选,它将在每一个字段后面添加一个?。

interface PartialType {
    id: number;
    firstName: string;
    lastName: string;
}

function showType(args: Partial<PartialType>) {
    console.log(args);
}
/*
Partial<PartialType> 等效于 
interface PartialType {
  id?: number
  firstName?: string
  lastName?: string
}
*/

showType({ id: 1 });
// Output: {id: 1}

5、Required

将某个类型里的属性全部变为必选项

Required

interface RequiredType {
    id: number;
    firstName?: string;
    lastName?: string;
}

function showType(args: Required<RequiredType>) {
    console.log(args);
}

showType({ id: 1 });
// Error: Type '{ id: number: }' is missing the following properties from type 'Required<RequiredType>': firstName, lastName

6、Readonly

会转换类型的所有属性，以使它们无法被修改

Readonly

interface ReadonlyType {
    id: number;
    name: string;
}

function showType(args: Readonly<ReadonlyType>) {
    args.id = 4;
    console.log(args);
}

showType({ id: 1, name: 'Doe' });
// Error: Cannot assign to 'id' because it is a read-only property.

7、Pick

此方法允许你从一个已存在的类型 T中选择一些属性作为K, 从而创建一个新类型。

Pick<T, K>

interface PickType {
    id: number;
    firstName: string;
    lastName: string;
}

function showType(args: Pick<PickType, 'firstName' | 'lastName'>) {
    console.log(args);
}

showType({ firstName: 'John', lastName: 'Doe' });
// Output: {firstName: "John"}

showType({ id: 3 });
// Error: Object literal may only specify known properties, and 'id' does not exist in type 'Pick<PickType, "firstName" | "lastName">'

8、Omit

Omit的作用与Pick类型正好相反。不是选择元素，而是从类型T中删除K个属性。

Omit<T, K>

interface PickType {
    id: number;
    firstName: string;
    lastName: string;
}

function showType(args: Omit<PickType, 'firstName' | 'lastName'>) {
    console.log(args);
}

showType({ id: 7 });
// Output: {id: 7}

showType({ firstName: 'John' });
// Error: Object literal may only specify known properties, and 'firstName' does not exist in type 'Pick<PickType, "id">'

9、映射类型

映射类型允许你从一个旧的类型，生成一个新的类型。

请注意，前面介绍的某些高级类型也是映射类型。如:

/*
Readonly， Partial和 Pick是同态的，但 Record不是。 因为 Record并不需要输入类型来拷贝属性，所以它不属于同态：
*/
type Readonly<T> = {
    readonly [P in keyof T]: T[P];
};
type Partial<T> = {
    [P in keyof T]?: T[P];
};
type Pick<T, K extends keyof T> = {
    [P in K]: T[P];
};

type StringMap<T> = {
    [P in keyof T]: string;
};

function showType(arg: StringMap<{ id: number; name: string }>) {
    console.log(arg);
}

showType({ id: 1, name: 'Test' });
// Error: Type 'number' is not assignable to type 'string'.

showType({ id: 'testId', name: 'This is a Test' });
// Output: {id: "testId", name: "This is a Test"}