Skip to content

高级类型

高级类型是指 TypeScript 语言的一些高级特性,可以帮助我们更好地使用类型系统。

交叉类型 (&)

typescript
type Person = { name: string; age: number };
type Worker = { salary: number; isEmployed: boolean };
type PersonAndWorker = Person & Worker;

const personAndWorker: PersonAndWorker = {
    name: 'Alice',
    age: 25,
    salary: 50000,
    isEmployed: true
};

联合类型 (|)

typescript
type PersonOrWorker = Person | Worker;

const personOrWorker: PersonOrWorker = {
    name: 'Bob',
    age: 30,
    salary: 60000,
    isEmployed: false
};

类型别名 (type)

typescript
type Name = string;
type Age = number;
type Person = { name: Name; age: Age };

const person: Person = {
    name: 'Charlie',
    age: 35
};

字符串字面量类型

typescript
type Name = 'Alice' | 'Bob' | 'Charlie';
type Age = 25 | 30 | 35;
type Person = { name: Name; age: Age };

const person: Person = {
    name: 'Charlie',
    age: 35
};

数字字面量类型

typescript
type Age = 25 | 30 | 35;
type Person = { name: string; age: Age };

const person: Person = {
    name: 'Charlie',
    age: 35
};

索引类型 (keyof)

typescript
interface Person {
    name: string;
    age: number;

    [key: string]: any;
}

type PersonKeys = keyof Person; // "name" | "age" | string

映射类型 (in)

typescript
type PartialPerson = { [P in keyof Person]?: Person[P] };
const partialPerson: PartialPerson = {
    name: 'Alice'
};

条件类型 (extends)

typescript
type IsString<T> = T extends string ? true : false;
type IsNumber<T> = T extends number ? true : false;

type A = IsString<string>; // true
type B = IsString<number>; // false
type C = IsNumber<string>; // false
type D = IsNumber<number>; // true

类型保护 (typeof)

typescript
function isString(value: any): value is string {
    return typeof value === "string";
}

function isNumber(value: any): value is number {
    return typeof value === "number";
}

function logValue(value: string | number) {
    if (isString(value)) {
        console.log(value.toUpperCase());
    } else if (isNumber(value)) {
        console.log(value.toFixed(2));
    } else {
        console.log(value);
    }
}

logValue("hello"); // HELLO
logValue(123); // 123.00
logValue(true); // true (not covered by any type guard)

类型断言 (as)

typescript
const person: any = {
    name: 'Alice',
    age: 25
};

const name = (person as { name: string }).name;
const age = (person as { age: number }).age;

类型别名、接口、断言的区别

  • 类型别名可以给一个类型起一个新的名字,可以用来表示一个类型,可以与其他类型进行交互;
  • 接口可以用来描述一个对象的形状,可以包含属性、方法、构造函数等,不能用来表示一个类型,只能用来描述一个对象。
  • 类型断言可以用来告诉编译器,一个变量的类型是某种类型,但是编译器并不知道这个变量的具体类型。