探索 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 國際許可協議進行許可。