探索 TypeScript 类型注解 - 高级类型

时间 2020-01-09

标签探索 typescript 类型注解高级繁體版

原文原文链接

Exploring TypeScript Type Annotations - Advance Typesgit

本文由 WowBar 团队首发于 GitHubgithub

做者: zhilidali分布式

欢迎来到 《探索 TypeScript 类型注解》 系列教程。上一篇介绍了类型检查机制，本篇深刻探索高级类型。工具

交叉类型

交叉类型将多个类型合为一个类型: T & Uui

interface TypeA { a: number }
interface TypeB { b: number }
let a: TypeA = { a: 1 };
let b: TypeB = { b: 2 };
let c: TypeA & TypeB = { ...a, ...b };
复制代码

联合类型

联合类型表示一个值能够是几种类型之一: T | Uspa

具备联合类型的值只能访问类型的共有成员3d

// Union Type
let tsUnion: number | string = 1;
tsUnion.length; // error: only access common members
复制代码

索引类型

索引类型查询操做符

keyof T：表示为 T 的公有属性名的联合code

interface F { a: string; b: number; }

type foo = keyof F;
// type foo = 'a' | 'b'
复制代码

若是类型 T 带有字符串索引签名，那么 keyof T 为 string | number 类型若是类型 T 带有数字索引签名，那么 keyof T为 number 类型。cdn

interface B { [index: string]: string; }

type bar = keyof B;
// type bar = string | number
复制代码

索引访问操做符

T[K]：表示 T 的属性 K 的类型blog

interface F { a: string; b: number; }

type foo = F['a'];
// type foo = string
复制代码

映射类型

映射类型能够基于旧类型建立新类型

[K in T]: Type：类型变量 K 会把字符串字面量联合类型 T 的每一个字符串都映射为属性

type Foo = 'a' | 'b';
type Bar = {
	[K in Foo]: number;
}
// 等同于：
// type Bar = {
// a: number;
// b: number;
// }
复制代码

在映射类型中，新类型能够相同的形式转换旧类型中的每一个属性，例如，例如，能够将类型的全部属性设置为可选或只读。

interface Foo {
	a: number;
	b: number;
}

type FooPartial = {
	[P in keyof Foo]?: Foo[P];
}
// 等同于：
// type FooPartial = {
// a?: number | undefined;
// b?: number | undefined;
// }

type FooReadonly = {
	readonly [P in keyof Foo]: Foo[P];
}
// 等同于：
// type FooReadonly = {
// readonly a: number;
// readonly b: number;
// }
复制代码

因为转换为只读或可选等功能很是有用，它们被包含在TypeScript的标准库中, 详情见下篇实用工具类型

type Partial<T> = {
	[P in keyof T]?: T[P];
}
type Readonly<T> = {
	readonly [P in keyof T]: T[P];
}
复制代码

条件类型

T extends U ? X : Y: 若是 T 能够赋值给 U，那么类型是 X，不然为 Y

type TypeName<T> = T extends string ? "string" : "number";

type Foo = TypeName<'ts'>;
// type Foo = "string"

type Bar = TypeName<number>;
// type Bar = "number"
复制代码

嵌套条件类型

type TypeName<T> =
	T extends string ? 'string' :
	T extends number ? 'number' :
	T extends boolean ? 'boolean' :
	T extends undefined ? 'undefined' :
	T extends Function ? 'function' :
	'object';

type Foo = TypeName<string>;
// type Foo = "string"

type Bar = TypeName<true>;
// type Bar = "boolean"
复制代码

分布式条件类型：如参数 T 为 A ｜ B，条件类型会自动解析为 (A extends U ? X : Y) | (B extends U ? X : Y)

type Baz = TypeName<1 | false>
// type Baz = "number" | "boolean"
复制代码

条件类型中的类型推断：在 extends 子句中，容许使用 infer 声明一个类型变量，能够在 true 分支中被引用

type A<T> = T extends { a: infer U } ? U : any;

type Foo = A<{ a: number }>
// type Foo = number
type Bar = A<number>
// type Bar = any
复制代码

type A<T> = T extends { a: infer U, b: infer U } ? U : any;

type Foo = A<{ a: number, b: string }>
// type Foo = string | number
复制代码

结语

本篇介绍了类型的高级类型，下篇将探索 TypeScript 提供的实用工具类型。

协议

本做品采用知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议进行许可。