同名基础类型属性的合并

那么现在问题来了，假设在合并多个类型的过程中，刚好出现某些类型存在相同的成员，但对应的类型又不一致，比如：

typescript

interface X {
	c: string
	d: string
}

interface Y {
	c: number
	e: string
}

type XY = X & Y
type YX = Y & X

let p: XY
let q: YX

interface X {
	c: string
	d: string
}

interface Y {
	c: number
	e: string
}

type XY = X & Y
type YX = Y & X

let p: XY
let q: YX

在上面的代码中，接口 X 和接口 Y 都含有一个相同的成员 c，但它们的类型不一致。对于这种情况，此时 XY 类型或 YX 类型中成员 c 的类型是不是可以是 string 或 number 类型呢？比如下面的例子：

typescript

p = {c: 6, d: 'd', e: 'e'}

p = {c: 6, d: 'd', e: 'e'}

typescript

q = {c: 'c', d: 'd', e: 'e'}

q = {c: 'c', d: 'd', e: 'e'}

为什么接口 X 和接口 Y 混入后，成员 c 的类型会变成 never 呢？这是因为混入后成员 c 的类型为 string & number，即成员 c 的类型既可以是 string 类型又可以是 number 类型。很明显这种类型是不存在的，所以混入后成员 c 的类型为 never。

同名非基础类型属性的合并

在上面示例中，刚好接口 X 和接口 Y 中内部成员 c 的类型都是基本数据类型，那么如果是非基本数据类型的话，又会是什么情形。我们来看个具体的例子：

typescript

interface D {
	d: boolean
}
interface E {
	e: string
}
interface F {
	f: number
}

interface A {
	x: D
}
interface B {
	x: E
}
interface C {
	x: F
}

type ABC = A & B & C

let abc: ABC = {
	x: {
		d: true,
		e: 'semlinker',
		f: 666,
	},
}

console.log('abc:', abc)

interface D {
	d: boolean
}
interface E {
	e: string
}
interface F {
	f: number
}

interface A {
	x: D
}
interface B {
	x: E
}
interface C {
	x: F
}

type ABC = A & B & C

let abc: ABC = {
	x: {
		d: true,
		e: 'semlinker',
		f: 666,
	},
}

console.log('abc:', abc)

以上代码成功运行后，控制台会输出以下结果：

在混入多个类型时，若存在相同的成员，且成员类型为非基本数据类型，那么是可以成功合并。

泛型

软件工程中，我们不仅要创建一致的定义良好的 API，同时也要考虑可重用性。组件不仅能够支持当前的数据类型，同时也能支持未来的数据类型，这在创建大型系统时为你提供了十分灵活的功能。

在像 C# 和 Java 这样的语言中，可以使用泛型来创建可重用的组件，一个组件可以支持多种类型的数据。这样用户就可以以自己的数据类型来使用组件。

设计泛型的关键目的是在成员之间提供有意义的约束，这些成员可以是：类的实例成员、类的方法、函数参数和函数返回值。

泛型（Generics）是允许同一个函数接受不同类型参数的一种模板。相比于使用 any 类型，使用泛型来创建可复用的组件要更好，因为泛型会保留参数类型。

泛型：类型传参的语法（把类型作为参数传递）

泛型函数

对于刚接触 TypeScript 泛型的读者来说，首次看到 <T> 语法会感到陌生。其实它没有什么特别，就像传递参数一样，我们传递了我们想要用于特定函数调用的类型。

截屏2021-12-06 上午8.33.53.png

参考上面的图片，当我们调用 identity<Number>(1) ，Number 类型就像参数 1 一样，它将在出现 T 的任何位置填充该类型。图中 <T> 内部的 T 被称为类型变量，它是我们希望传递给 identity 函数的类型占位符，同时它被分配给 value 参数用来代替它的类型：此时 T 充当的是类型，而不是特定的 Number 类型。

其中 T 代表 Type，在定义泛型时通常用作第一个类型变量名称。但实际上 T 可以用任何有效名称代替。除了 T 之外，以下是常见泛型变量代表的意思：

K（Key）：表示对象中的键类型；
V（Value）：表示对象中的值类型；
E（Element）：表示元素类型。

其实并不是只能定义一个类型变量，我们可以引入希望定义的任何数量的类型变量。比如我们引入一个新的类型变量 U，用于扩展我们定义的 identity 函数：

typescript

function identity<T, U>(value: T, message: U): T {
	console.log(message)
	return value
}

console.log(identity<Number, string>(68, 'Semlinker'))

function identity<T, U>(value: T, message: U): T {
	console.log(message)
	return value
}

console.log(identity<Number, string>(68, 'Semlinker'))

下载.png

除了为类型变量显式设定值之外，一种更常见的做法是使编译器自动选择这些类型，从而使代码更简洁。我们可以完全省略尖括号，比如：

typescript

function identity<T, U>(value: T, message: U): T {
	console.log(message)
	return value
}

console.log(identity(68, 'Semlinker'))

function identity<T, U>(value: T, message: U): T {
	console.log(message)
	return value
}

console.log(identity(68, 'Semlinker'))

对于上述代码，编译器足够聪明，能够知道我们的参数类型，并将它们赋值给 T 和 U，而不需要开发人员显式指定它们。

泛型接口

typescript

interface GenericIdentityFn<T> {
	(arg: T): T
}

interface GenericIdentityFn<T> {
	(arg: T): T
}

泛型类

typescript

class GenericNumber<T> {
	zeroValue: T
	add: (x: T, y: T) => T
}

let myGenericNumber = new GenericNumber<number>()
myGenericNumber.zeroValue = 0
myGenericNumber.add = function (x, y) {
	return x + y
}

class GenericNumber<T> {
	zeroValue: T
	add: (x: T, y: T) => T
}

let myGenericNumber = new GenericNumber<number>()
myGenericNumber.zeroValue = 0
myGenericNumber.add = function (x, y) {
	return x + y
}

类型运算符

typeof

在 TypeScript 中，typeof 操作符可以用来获取一个变量声明或对象的类型。

typescript

interface Person {
	name: string
	age: number
}

const sem: Person = {name: 'semlinker', age: 33}
type Sem = typeof sem // -> Person

function toArray(x: number): Array<number> {
	return [x]
}

type Func = typeof toArray // -> (x: number) => number[]

interface Person {
	name: string
	age: number
}

const sem: Person = {name: 'semlinker', age: 33}
type Sem = typeof sem // -> Person

function toArray(x: number): Array<number> {
	return [x]
}

type Func = typeof toArray // -> (x: number) => number[]

keyof

keyof 操作符是在 TypeScript 2.1 版本引入的，该操作符可以用于获取某种类型的所有键，其返回类型是联合类型。

typescript

interface Person {
	name: string
	age: number
}

type K1 = keyof Person // "name" | "age"
type K2 = keyof Person[] // "length" | "toString" | "pop" | "push" | "concat" | "join"
type K3 = keyof {[x: string]: Person} // string | number

interface Person {
	name: string
	age: number
}

type K1 = keyof Person // "name" | "age"
type K2 = keyof Person[] // "length" | "toString" | "pop" | "push" | "concat" | "join"
type K3 = keyof {[x: string]: Person} // string | number

在 TypeScript 中支持两种索引签名，数字索引和字符串索引：

typescript

interface StringArray {
	// 字符串索引 -> keyof StringArray => string | number
	[index: string]: string
}
interface StringArray1 {
	// 数字索引 -> keyof StringArray1 => number
	[index: number]: string
}

interface StringArray {
	// 字符串索引 -> keyof StringArray => string | number
	[index: string]: string
}
interface StringArray1 {
	// 数字索引 -> keyof StringArray1 => number
	[index: number]: string
}

为了同时支持两种索引类型，就得要求数字索引的返回值必须是字符串索引返回值的子类。其中的原因就是当使用数值索引时，JavaScript 在执行索引操作时，会先把数值索引先转换为字符串索引。所以 keyof { [x: string]: Person } 的结果会返回 string | number。

in

in 用来遍历枚举（联合）类型：

typescript

type Keys = 'a' | 'b' | 'c'

type Obj = {
	[p in Keys]: any
} // -> { a: any, b: any, c: any }

type Keys = 'a' | 'b' | 'c'

type Obj = {
	[p in Keys]: any
} // -> { a: any, b: any, c: any }

extends

有时候我们定义的泛型不想过于灵活或者说想继承某些类等，可以通过 extends 关键字添加泛型约束。

typescript

interface Lengthwise {
	length: number
}

function loggingIdentity<T extends Lengthwise>(arg: T): T {
	console.log(arg.length)
	return arg
}

interface Lengthwise {
	length: number
}

function loggingIdentity<T extends Lengthwise>(arg: T): T {
	console.log(arg.length)
	return arg
}

现在这个泛型函数被定义了约束，因此它不再是适用于任意类型：

typescript

loggingIdentity(3) // Error, number doesn't have a .length property

loggingIdentity(3) // Error, number doesn't have a .length property

这时我们需要传入符合约束类型的值，必须包含必须的属性：

typescript

loggingIdentity({length: 10, value: 3})

loggingIdentity({length: 10, value: 3})

infer

在条件类型语句中，可以用 infer 声明一个类型变量并且对它进行使用。

typescript

type ReturnType<T> = T extends (...args: any[]) => infer R ? R : any

type ReturnType<T> = T extends (...args: any[]) => infer R ? R : any

以上代码中 infer R 就是声明一个变量来承载传入函数签名的返回值类型，简单说就是用它取到函数返回值的类型方便之后使用。

infer关键词作用是让 Ts 自己推导类型，并将推导结果存储在其参数绑定的类型上。
Eg:infer P 就是将结果存在类型P上，供使用。
infer关键词只能在extends条件类型上使用，不能在其他地方使用。

泛型工具类型

为了方便开发者 TypeScript 内置了一些常用的工具类型，比如 Partial、Required、Readonly、Record 和 ReturnType 等。

Partial

Partial<T> 的作用就是将某个类型里的属性全部变为可选项 ?。

定义：

typescript

/**
 * node_modules/typescript/lib/lib.es5.d.ts
 * Make all properties in T optional
 */
type Partial<T> = {
	[P in keyof T]?: T[P]
}

/**
 * node_modules/typescript/lib/lib.es5.d.ts
 * Make all properties in T optional
 */
type Partial<T> = {
	[P in keyof T]?: T[P]
}

在以上代码中，首先通过 keyof T 拿到 T 的所有属性名，然后使用 in 进行遍历，将值赋给 P，最后通过 T[P] 取得相应的属性值。中间的 ? 号，用于将所有属性变为可选。

示例：

typescript

interface Todo {
	title: string
	description: string
}

function updateTodo(todo: Todo, fieldsToUpdate: Partial<Todo>) {
	return {...todo, ...fieldsToUpdate}
}

const todo1 = {
	title: 'Learn TS',
	description: 'Learn TypeScript',
}

const todo2 = updateTodo(todo1, {
	description: 'Learn TypeScript Enum',
})

interface Todo {
	title: string
	description: string
}

function updateTodo(todo: Todo, fieldsToUpdate: Partial<Todo>) {
	return {...todo, ...fieldsToUpdate}
}

const todo1 = {
	title: 'Learn TS',
	description: 'Learn TypeScript',
}

const todo2 = updateTodo(todo1, {
	description: 'Learn TypeScript Enum',
})

在上面的 updateTodo 方法中，我们利用 Partial<T> 工具类型，定义 fieldsToUpdate 的类型为 Partial<Todo>，即：

typescript

{
   title?: string | undefined;
   description?: string | undefined;
}

{
   title?: string | undefined;
   description?: string | undefined;
}

Partial 实现原理解析

Partial<T>将T的所有属性变成可选的。

typescript

/**
 * 核心实现就是通过映射类型遍历T上所有的属性，
 * 然后将每个属性设置为可选属性
 */
type Partial<T> = {
	[P in keyof T]?: T[P]
}

/**
 * 核心实现就是通过映射类型遍历T上所有的属性，
 * 然后将每个属性设置为可选属性
 */
type Partial<T> = {
	[P in keyof T]?: T[P]
}

[P in keyof T]通过映射类型，遍历T上的所有属性
?:设置为属性为可选的
T[P]设置类型为原来的类型

扩展一下，将制定的key变成可选类型:

typescript

/**
 * 主要通过K extends keyof T约束K必须为keyof T的子类型
 * keyof T得到的是T的所有key组成的联合类型
 */
type PartialOptional<T, K extends keyof T> = {
	[P in K]?: T[P]
}

/**      M
 * @example
 *     type Eg1 = { key1?: string; key2?: number }
 */
type Eg1 = PartialOptional<
	{
		key1: string
		key2: number
		key3: ''
	},
	'key1' | 'key2'
>

/**
 * 主要通过K extends keyof T约束K必须为keyof T的子类型
 * keyof T得到的是T的所有key组成的联合类型
 */
type PartialOptional<T, K extends keyof T> = {
	[P in K]?: T[P]
}

/**      M
 * @example
 *     type Eg1 = { key1?: string; key2?: number }
 */
type Eg1 = PartialOptional<
	{
		key1: string
		key2: number
		key3: ''
	},
	'key1' | 'key2'
>

Readonly 原理解析

typescript

/**
 * 主要实现是通过映射遍历所有key，
 * 然后给每个key增加一个readonly修饰符
 */
type Readonly<T> = {
	readonly [P in keyof T]: T[P]
}

/**
 * @example
 * type Eg = {
 *   readonly key1: string;
 *   readonly key2: number;
 * }
 */
type Eg = Readonly<{
	key1: string
	key2: number
}>

/**
 * 主要实现是通过映射遍历所有key，
 * 然后给每个key增加一个readonly修饰符
 */
type Readonly<T> = {
	readonly [P in keyof T]: T[P]
}

/**
 * @example
 * type Eg = {
 *   readonly key1: string;
 *   readonly key2: number;
 * }
 */
type Eg = Readonly<{
	key1: string
	key2: number
}>

Pick

挑选一组属性并组成一个新的类型。

typescript

type Pick<T, K extends keyof T> = {
	[P in K]: T[P]
}

type Pick<T, K extends keyof T> = {
	[P in K]: T[P]
}

基本和上述同样的知识点，就不再赘述了。

Record

构造一个type，key为联合类型中的每个子类型，类型为T。文字不好理解，先看例子：

typescript

/**
 * @example
 * type Eg1 = {
 *   a: { key1: string; };
 *   b: { key1: string; };
 * }
 * @desc 就是遍历第一个参数'a' | 'b'的每个子类型，然后将值设置为第二参数
 */
type Eg1 = Record<'a' | 'b', {key1: string}>

/**
 * @example
 * type Eg1 = {
 *   a: { key1: string; };
 *   b: { key1: string; };
 * }
 * @desc 就是遍历第一个参数'a' | 'b'的每个子类型，然后将值设置为第二参数
 */
type Eg1 = Record<'a' | 'b', {key1: string}>

Record 具体实现：

typescript

/**
 * 核心实现就是遍历K，将值设置为T
 */
type Record<K extends keyof any, T> = {
	[P in K]: T
}

/**
 * @example
 * type Eg2 = {a: B, b: B}
 */
interface A {
	a: string
	b: number
}
interface B {
	key1: number
	key2: string
}
type Eg2 = Record<keyof A, B>

/**
 * 核心实现就是遍历K，将值设置为T
 */
type Record<K extends keyof any, T> = {
	[P in K]: T
}

/**
 * @example
 * type Eg2 = {a: B, b: B}
 */
interface A {
	a: string
	b: number
}
interface B {
	key1: number
	key2: string
}
type Eg2 = Record<keyof A, B>

值得注意的是keyof any得到的是string | number | symbol
原因在于类型 key 的类型只能为string | number | symbol

扩展: 同态与非同态。划重点！！！划重点！！！划重点！！！

Partial、Readonly和Pick都属于同态的，即其实现需要输入类型 T 来拷贝属性，因此属性修饰符（例如 readonly、?:）都会被拷贝。可从下面例子验证：

typescript

/**
 * @example
 * type Eg = {readonly a?: string}
 */
type Eg = Pick<{readonly a?: string}, 'a'>

/**
 * @example
 * type Eg = {readonly a?: string}
 */
type Eg = Pick<{readonly a?: string}, 'a'>

从Eg的结果可以看到，Pick 在拷贝属性时，连带拷贝了readonly和?:的修饰符。

Record是非同态的，不需要拷贝属性，因此不会拷贝属性修饰符

为什么Pick拷贝了属性，而Record没有拷贝？我们来对比一下其实现：

typescript

type Pick<T, K extends keyof T> = {
	[P in K]: T[P]
}

type Record<K extends keyof any, T> = {
	[P in K]: T
}

type Pick<T, K extends keyof T> = {
	[P in K]: T[P]
}

type Record<K extends keyof any, T> = {
	[P in K]: T
}

可以看到Pick的实现中，注意P in K（本质是P in keyof T），T 为输入的类型，而keyof T则遍历了输入类型；而Record的实现中，并没有遍历所有输入的类型，K 只是约束为keyof any的子类型即可。

最后再类比一下Pick、Partial、readonly这几个类型工具，无一例外，都是使用到了keyof T来辅助拷贝传入类型的属性。

Exclude 原理解析

Exclude<T, U>提取存在于T，但不存在于U的类型组成的联合类型。

typescript

/**
 * 遍历T中的所有子类型，如果该子类型约束于U（存在于U、兼容于U），
 * 则返回never类型，否则返回该子类型
 */
type Exclude<T, U> = T extends U ? never : T

/**
 * @example
 * type Eg = 'key1'
 */
type Eg = Exclude<'key1' | 'key2', 'key2'>

/**
 * 遍历T中的所有子类型，如果该子类型约束于U（存在于U、兼容于U），
 * 则返回never类型，否则返回该子类型
 */
type Exclude<T, U> = T extends U ? never : T

/**
 * @example
 * type Eg = 'key1'
 */
type Eg = Exclude<'key1' | 'key2', 'key2'>

敲重点！！！

never表示一个不存在的类型
never与其他类型的联合后，是没有never的

/**
 * @example
 * type Eg2 = string | number
 */
type Eg2 = string | number | never

/**
 * @example
 * type Eg2 = string | number
 */
type Eg2 = string | number | never

因此上述Eg其实就等于key1 | never,也就是type Eg = key1

Extract

Extract<T, U>提取联合类型 T 和联合类型 U 的所有交集。

typescript

type Extract<T, U> = T extends U ? T : never

/**
 * @example
 *  type Eg = 'key1'
 */
type Eg = Extract<'key1' | 'key2', 'key1'>

type Extract<T, U> = T extends U ? T : never

/**
 * @example
 *  type Eg = 'key1'
 */
type Eg = Extract<'key1' | 'key2', 'key1'>

Omit 原理解析

Omit<T, K>从类型T中剔除K中的所有属性。

typescript

/**
 * 利用Pick实现Omit
 */
type Omit<T, K> = Pick<T, Exclude<keyof T, K>>

/**
 * 利用Pick实现Omit
 */
type Omit<T, K> = Pick<T, Exclude<keyof T, K>>

换种思路想一下，其实现可以是利用Pick提取我们需要的 keys 组成的类型
因此也就是 Omit = Pick<T, 我们需要的属性联合>
而我们需要的属性联合就是，从 T 的属性联合中排出存在于联合类型 K 中的
因此也就是Exclude<keyof T, K>;

如果不利用 Pick 实现呢?

typescript

/**
 * 利用映射类型Omit
 */
type Omit2<T, K extends keyof any> = {
	[P in Exclude<keyof T, K>]: T[P]
}

/**
 * 利用映射类型Omit
 */
type Omit2<T, K extends keyof any> = {
	[P in Exclude<keyof T, K>]: T[P]
}

其实现类似于 Pick 的原理实现
区别在于是遍历的我们需要的属性不一样
我们需要的属性和上面的例子一样，就是Exclude<keyof T, K>
因此，遍历就是[P in Exclude<keyof T, K>]

Parameters 和 ReturnType

Parameters 获取函数的参数类型，将每个参数类型放在一个元组中。

typescript

/**
 * @desc 具体实现
 */
type Parameters<T extends (...args: any) => any> = T extends (
	...args: infer P
) => any
	? P
	: never

/**
 * @example
 * type Eg = [arg1: string, arg2: number];
 */
type Eg = Parameters<(arg1: string, arg2: number) => void>

/**
 * @desc 具体实现
 */
type Parameters<T extends (...args: any) => any> = T extends (
	...args: infer P
) => any
	? P
	: never

/**
 * @example
 * type Eg = [arg1: string, arg2: number];
 */
type Eg = Parameters<(arg1: string, arg2: number) => void>

Parameters首先约束参数T必须是个函数类型，所以(...args: any) => any>替换成Function也是可以的
具体实现就是，判断T是否是函数类型，如果是则使用inter P让 ts 自己推导出函数的参数类型，并将推导的结果存到类型P上，否则返回never；

敲重点！！！敲重点！！！敲重点！！！

infer关键词作用是让 Ts 自己推导类型，并将推导结果存储在其参数绑定的类型上。
Eg:infer P 就是将结果存在类型P上，供使用。
infer关键词只能在extends条件类型上使用，不能在其他地方使用。

再敲重点！！！再敲重点！！！再敲重点！！！

type Eg = [arg1: string, arg2: number]这是一个元组，但是和我们常见的元组type tuple = [string, number]。官网未提到该部分文档说明，其实可以把这个作为类似命名元组，或者具名元组的意思去理解。实质上没有什么特殊的作用，比如无法通过这个具名去取值不行的。但是从语义化的角度，个人觉得多了语义化的表达罢了。
定义元祖的可选项，只能是最后的选项

typescript

/**
 * 普通方式
 */
type Tuple1 = [string, number?]
const a: Tuple1 = ['aa', 11]
const a2: Tuple1 = ['aa']

/**
 * 具名方式
 */
type Tuple2 = [name: string, age?: number]
const b: Tuple2 = ['aa', 11]
const b2: Tuple2 = ['aa']

/**
 * 普通方式
 */
type Tuple1 = [string, number?]
const a: Tuple1 = ['aa', 11]
const a2: Tuple1 = ['aa']

/**
 * 具名方式
 */
type Tuple2 = [name: string, age?: number]
const b: Tuple2 = ['aa', 11]
const b2: Tuple2 = ['aa']

扩展：infer实现一个推导数组所有元素的类型：

typescript

/**
 * 约束参数T为数组类型，
 * 判断T是否为数组，如果是数组类型则推导数组元素的类型
 */
type FalttenArray<T extends Array<any>> = T extends Array<infer P> ? P : never

/**
 * type Eg1 = number | string;
 */
type Eg1 = FalttenArray<[number, string]>
/**
 * type Eg2 = 1 | 'asd';
 */
type Eg2 = FalttenArray<[1, 'asd']>

/**
 * 约束参数T为数组类型，
 * 判断T是否为数组，如果是数组类型则推导数组元素的类型
 */
type FalttenArray<T extends Array<any>> = T extends Array<infer P> ? P : never

/**
 * type Eg1 = number | string;
 */
type Eg1 = FalttenArray<[number, string]>
/**
 * type Eg2 = 1 | 'asd';
 */
type Eg2 = FalttenArray<[1, 'asd']>

ReturnType 获取函数的返回值类型。

typescript

/**
 * @desc ReturnType的实现其实和Parameters的基本一样
 * 无非是使用infer R的位置不一样。
 */
type ReturnType<T extends (...args: any) => any> = T extends (
	...args: any
) => infer R
	? R
	: any

/**
 * @desc ReturnType的实现其实和Parameters的基本一样
 * 无非是使用infer R的位置不一样。
 */
type ReturnType<T extends (...args: any) => any> = T extends (
	...args: any
) => infer R
	? R
	: any

ConstructorParameters

ConstructorParameters可以获取类的构造函数的参数类型，存在一个元组中。

typescript

/**
 * 核心实现还是利用infer进行推导构造函数的参数类型
 */
type ConstructorParameters<T extends abstract new (...args: any) => any> =
	T extends abstract new (...args: infer P) => any ? P : never

/**
 * @example
 * type Eg = string;
 */
interface ErrorConstructor {
	new (message?: string): Error
	(message?: string): Error
	readonly prototype: Error
}
type Eg = ConstructorParameters<ErrorConstructor>

/**
 * @example
 * type Eg2 = [name: string, sex?: number];
 */
class People {
	constructor(public name: string, sex?: number) {}
}
type Eg2 = ConstructorParameters<typeof People>

/**
 * 核心实现还是利用infer进行推导构造函数的参数类型
 */
type ConstructorParameters<T extends abstract new (...args: any) => any> =
	T extends abstract new (...args: infer P) => any ? P : never

/**
 * @example
 * type Eg = string;
 */
interface ErrorConstructor {
	new (message?: string): Error
	(message?: string): Error
	readonly prototype: Error
}
type Eg = ConstructorParameters<ErrorConstructor>

/**
 * @example
 * type Eg2 = [name: string, sex?: number];
 */
class People {
	constructor(public name: string, sex?: number) {}
}
type Eg2 = ConstructorParameters<typeof People>

首先约束参数T为拥有构造函数的类。注意这里有个abstract修饰符，等下会说明。
实现时，判断T是满足约束的类时，利用infer P自动推导构造函数的参数类型，并最终返回该类型。

敲重点！！！敲重点！！！敲重点！！！

那么疑问来了，为什么要对 T 要约束为abstract抽象类呢？看下面例子：

typescript

/**
 * 定义一个普通类
 */
class MyClass {}
/**
 * 定义一个抽象类
 */
abstract class MyAbstractClass {}

// 可以赋值
const c1: typeof MyClass = MyClass
// 报错，无法将抽象构造函数类型分配给非抽象构造函数类型
const c2: typeof MyClass = MyAbstractClass

// 可以赋值
const c3: typeof MyAbstractClass = MyClass
// 可以赋值
const c4: typeof MyAbstractClass = MyAbstractClass

/**
 * 定义一个普通类
 */
class MyClass {}
/**
 * 定义一个抽象类
 */
abstract class MyAbstractClass {}

// 可以赋值
const c1: typeof MyClass = MyClass
// 报错，无法将抽象构造函数类型分配给非抽象构造函数类型
const c2: typeof MyClass = MyAbstractClass

// 可以赋值
const c3: typeof MyAbstractClass = MyClass
// 可以赋值
const c4: typeof MyAbstractClass = MyAbstractClass

由此看出，如果将类型定义为抽象类（抽象构造函数），则既可以赋值为抽象类，也可以赋值为普通类；而反之则不行。

再敲重点！！！再敲重点！！！再敲重点！！！

这里继续提问，直接使用类作为类型，和使用typeof 类作为类型，有什么区别呢？

typescript

/**
 * 定义一个类
 */
class People {
	name: number
	age: number
	constructor() {}
}

// p1可以正常赋值
const p1: People = new People()
// 等号后面的People报错，类型“typeof People”缺少类型“People”中的以下属性: name, age
const p2: People = People

// p3报错，类型 "People" 中缺少属性 "prototype"，但类型 "typeof People" 中需要该属性
const p3: typeof People = new People()
// p4可以正常赋值
const p4: typeof People = People

/**
 * 定义一个类
 */
class People {
	name: number
	age: number
	constructor() {}
}

// p1可以正常赋值
const p1: People = new People()
// 等号后面的People报错，类型“typeof People”缺少类型“People”中的以下属性: name, age
const p2: People = People

// p3报错，类型 "People" 中缺少属性 "prototype"，但类型 "typeof People" 中需要该属性
const p3: typeof People = new People()
// p4可以正常赋值
const p4: typeof People = People

结论是这样的：

当把类直接作为类型时，该类型约束的是该类型必须是类的实例；即该类型获取的是该类上的实例属性和实例方法（也叫原型方法）；
当把typeof 类作为类型时，约束的满足该类的类型；即该类型获取的是该类上的静态属性和方法。

最后，只需要对infer的使用换个位置，便可以获取构造函数返回值的类型：

typescript

type InstanceType<T extends abstract new (...args: any) => any> =
	T extends abstract new (...args: any) => infer R ? R : any

type InstanceType<T extends abstract new (...args: any) => any> =
	T extends abstract new (...args: any) => infer R ? R : any

Ts compiler 内部实现的类型

Uppercase

typescript

/**
 * @desc 构造一个将字符串转大写的类型
 * @example
 * type Eg1 = 'ABCD';
 */
type Eg1 = Uppercase<'abcd'>

/**
 * @desc 构造一个将字符串转大写的类型
 * @example
 * type Eg1 = 'ABCD';
 */
type Eg1 = Uppercase<'abcd'>

Lowercase

typescript

/**
 * @desc 构造一个将字符串转小大写的类型
 * @example
 * type Eg2 = 'abcd';
 */
type Eg2 = Lowercase<'ABCD'>

/**
 * @desc 构造一个将字符串转小大写的类型
 * @example
 * type Eg2 = 'abcd';
 */
type Eg2 = Lowercase<'ABCD'>

Capitalize

typescript

/**
 * @desc 构造一个将字符串首字符转大写的类型
 * @example
 * type Eg3 = 'abcd';
 */
type Eg3 = Capitalize<'Abcd'>

/**
 * @desc 构造一个将字符串首字符转大写的类型
 * @example
 * type Eg3 = 'abcd';
 */
type Eg3 = Capitalize<'Abcd'>

Uncapitalize

typescript

/**
 * @desc 构造一个将字符串首字符转小写的类型
 * @example
 * type Eg3 = 'ABCD';
 */
type Eg3 = Uncapitalize<'aBCD'>

/**
 * @desc 构造一个将字符串首字符转小写的类型
 * @example
 * type Eg3 = 'ABCD';
 */
type Eg3 = Uncapitalize<'aBCD'>

这些类型工具，在lib.es5.d.ts文件中是看不到具体定义的：

typescript

type Uppercase<S extends string> = intrinsic
type Lowercase<S extends string> = intrinsic
type Capitalize<S extends string> = intrinsic
type Uncapitalize<S extends string> = intrinsic

type Uppercase<S extends string> = intrinsic
type Lowercase<S extends string> = intrinsic
type Capitalize<S extends string> = intrinsic
type Uncapitalize<S extends string> = intrinsic

声明文件

当使用第三方库时，我们需要引用它的声明文件，才能获得对应的代码补全、接口提示等功能。

语法

[declare var](http://ts.xcatliu.com/basics/declaration-files.html#declare-var) 声明全局变量
[declare function](http://ts.xcatliu.com/basics/declaration-files.html#declare-function) 声明全局方法
[declare class](http://ts.xcatliu.com/basics/declaration-files.html#declare-class) 声明全局类
[declare enum](http://ts.xcatliu.com/basics/declaration-files.html#declare-enum) 声明全局枚举类型
[declare namespace](http://ts.xcatliu.com/basics/declaration-files.html#declare-namespace) 声明（含有子属性的）全局对象
[interface](http://ts.xcatliu.com/basics/declaration-files.html#interface-%E5%92%8C-type) 和 [type](http://ts.xcatliu.com/basics/declaration-files.html#interface-%E5%92%8C-type) 声明全局类型
[export](http://ts.xcatliu.com/basics/declaration-files.html#export) 导出变量
[export namespace](http://ts.xcatliu.com/basics/declaration-files.html#export-namespace) 导出（含有子属性的）对象
[export default](http://ts.xcatliu.com/basics/declaration-files.html#export-default) ES6 默认导出
[export =](http://ts.xcatliu.com/basics/declaration-files.html#export-1) commonjs 导出模块
[export as namespace](http://ts.xcatliu.com/basics/declaration-files.html#export-as-namespace) UMD 库声明全局变量
[declare global](http://ts.xcatliu.com/basics/declaration-files.html#declare-global) 扩展全局变量
[declare module](http://ts.xcatliu.com/basics/declaration-files.html#declare-module) 扩展模块
[///](http://ts.xcatliu.com/basics/declaration-files.html#san-xie-xian-zhi-ling) 三斜线指令

什么是声明语句

假如我们想使用第三方库 jQuery，一种常见的方式是在 html 中通过 <script> 标签引入 jQuery，然后就可以使用全局变量 $ 或 jQuery 了。

我们通常这样获取一个 id 是 foo 的元素：

javascript

$('#foo')
// or
jQuery('#foo')

$('#foo')
// or
jQuery('#foo')

但是在 ts 中，编译器并不知道 $ 或 jQuery 是什么东西：

typescript

jQuery('#foo')
// ERROR: Cannot find name 'jQuery'.

jQuery('#foo')
// ERROR: Cannot find name 'jQuery'.

这时，我们需要使用 declare var 来定义它的类型：

typescript

declare var jQuery: (selector: string) => any

jQuery('#foo')

declare var jQuery: (selector: string) => any

jQuery('#foo')

上例中，declare var 并没有真的定义一个变量，只是定义了全局变量 jQuery 的类型，仅仅会用于编译时的检查，在编译结果中会被删除。它编译结果是：

javascript

jQuery('#foo')

jQuery('#foo')

除了 declare var 之外，还有其他很多种声明语句，将会在后面详细介绍。

什么是声明文件

通常我们会把声明语句放到一个单独的文件（jQuery.d.ts）中，这就是声明文件：

typescript

// src/jQuery.d.ts

declare var jQuery: (selector: string) => any
// src/index.ts

jQuery('#foo')

// src/jQuery.d.ts

declare var jQuery: (selector: string) => any
// src/index.ts

jQuery('#foo')

声明文件必需以 .d.ts 为后缀。

一般来说，ts 会解析项目中所有的 *.ts 文件，当然也包含以 .d.ts 结尾的文件。所以当我们将 jQuery.d.ts 放到项目中时，其他所有 *.ts 文件就都可以获得 jQuery 的类型定义了。

/path/to/project
├── src
|  ├── index.ts
|  └── jQuery.d.ts
└── tsconfig.json

/path/to/project
├── src
|  ├── index.ts
|  └── jQuery.d.ts
└── tsconfig.json

假如仍然无法解析，那么可以检查下 tsconfig.json 中的 files、include 和 exclude 配置，确保其包含了 jQuery.d.ts 文件。

这里只演示了全局变量这种模式的声明文件，假如是通过模块导入的方式使用第三方库的话，那么引入声明文件又是另一种方式了，将会在后面详细介绍。

第三方声明文件

当然，jQuery 的声明文件不需要我们定义了，社区已经帮我们定义好了：jQuery in DefinitelyTyped。

我们可以直接下载下来使用，但是更推荐的是使用 @types 统一管理第三方库的声明文件。

@types 的使用方式很简单，直接用 npm 安装对应的声明模块即可，以 jQuery 举例：

bash

npm install @types/jquery --save-dev

npm install @types/jquery --save-dev

可以在这个页面搜索你需要的声明文件。

书写声明文件

当一个第三方库没有提供声明文件时，我们就需要自己书写声明文件了。前面只介绍了最简单的声明文件内容，而真正书写一个声明文件并不是一件简单的事，以下会详细介绍如何书写声明文件。

在不同的场景下，声明文件的内容和使用方式会有所区别。

库的使用场景主要有以下几种：

全局变量：通过 <script> 标签引入第三方库，注入全局变量
npm 包：通过 import foo from 'foo' 导入，符合 ES6 模块规范
UMD 库：既可以通过 <script> 标签引入，又可以通过 import 导入
直接扩展全局变量：通过 <script> 标签引入后，改变一个全局变量的结构
在 npm 包或 UMD 库中扩展全局变量：引用 npm 包或 UMD 库后，改变一个全局变量的结构
模块插件：通过 <script> 或 import 导入后，改变另一个模块的结构

全局变量

全局变量是最简单的一种场景，之前举的例子就是通过 <script> 标签引入 jQuery，注入全局变量 $ 和 jQuery。

使用全局变量的声明文件时，如果是以 npm install @types/xxx --save-dev 安装的，则不需要任何配置。如果是将声明文件直接存放于当前项目中，则建议和其他源码一起放到 src 目录下（或者对应的源码目录下）：

/path/to/project
├── src
|  ├── index.ts
|  └── jQuery.d.ts
└── tsconfig.json

/path/to/project
├── src
|  ├── index.ts
|  └── jQuery.d.ts
└── tsconfig.json

如果没有生效，可以检查下 tsconfig.json 中的 files、include 和 exclude 配置，确保其包含了 jQuery.d.ts 文件。

全局变量的声明文件主要有以下几种语法：

[declare var](http://ts.xcatliu.com/basics/declaration-files.html#declare-var) 声明全局变量
[declare function](http://ts.xcatliu.com/basics/declaration-files.html#declare-function) 声明全局方法
[declare class](http://ts.xcatliu.com/basics/declaration-files.html#declare-class) 声明全局类
[declare enum](http://ts.xcatliu.com/basics/declaration-files.html#declare-enum) 声明全局枚举类型
[declare namespace](http://ts.xcatliu.com/basics/declaration-files.html#declare-namespace) 声明（含有子属性的）全局对象
[interface](http://ts.xcatliu.com/basics/declaration-files.html#interface-he-type) 和 [type](http://ts.xcatliu.com/basics/declaration-files.html#interface-he-type) 声明全局类型

`declare var`

在所有的声明语句中，declare var 是最简单的，如之前所学，它能够用来定义一个全局变量的类型。与其类似的，还有 declare let 和 declare const，使用 let 与使用 var 没有什么区别：

typescript

// src/jQuery.d.ts

declare let jQuery: (selector: string) => any
// src/index.ts

jQuery('#foo')
// 使用 declare let 定义的 jQuery 类型，允许修改这个全局变量
jQuery = function (selector) {
	return document.querySelector(selector)
}

// src/jQuery.d.ts

declare let jQuery: (selector: string) => any
// src/index.ts

jQuery('#foo')
// 使用 declare let 定义的 jQuery 类型，允许修改这个全局变量
jQuery = function (selector) {
	return document.querySelector(selector)
}

而当我们使用 const 定义时，表示此时的全局变量是一个常量，不允许再去修改它的值了4：

typescript

// src/jQuery.d.ts

declare const jQuery: (selector: string) => any

jQuery('#foo')
// 使用 declare const 定义的 jQuery 类型，禁止修改这个全局变量
jQuery = function (selector) {
	return document.querySelector(selector)
}
// ERROR: Cannot assign to 'jQuery' because it is a constant or a read-only property.

// src/jQuery.d.ts

declare const jQuery: (selector: string) => any

jQuery('#foo')
// 使用 declare const 定义的 jQuery 类型，禁止修改这个全局变量
jQuery = function (selector) {
	return document.querySelector(selector)
}
// ERROR: Cannot assign to 'jQuery' because it is a constant or a read-only property.

一般来说，全局变量都是禁止修改的常量，所以大部分情况都应该使用 const 而不是 var 或 let。

需要注意的是，声明语句中只能定义类型，切勿在声明语句中定义具体的实现5：

typescript

declare const jQuery = function (selector) {
	return document.querySelector(selector)
}
// ERROR: An implementation cannot be declared in ambient contexts.

declare const jQuery = function (selector) {
	return document.querySelector(selector)
}
// ERROR: An implementation cannot be declared in ambient contexts.

`declare function`

declare function 用来定义全局函数的类型。jQuery 其实就是一个函数，所以也可以用 function 来定义：

typescript

// src/jQuery.d.ts

declare function jQuery(selector: string): any
// src/index.ts

jQuery('#foo')

// src/jQuery.d.ts

declare function jQuery(selector: string): any
// src/index.ts

jQuery('#foo')

在函数类型的声明语句中，函数重载也是支持的6：

typescript

// src/jQuery.d.ts

declare function jQuery(selector: string): any
declare function jQuery(domReadyCallback: () => any): any
// src/index.ts

jQuery('#foo')
jQuery(function () {
	alert('Dom Ready!')
})

// src/jQuery.d.ts

declare function jQuery(selector: string): any
declare function jQuery(domReadyCallback: () => any): any
// src/index.ts

jQuery('#foo')
jQuery(function () {
	alert('Dom Ready!')
})

`declare class`

当全局变量是一个类的时候，我们用 declare class 来定义它的类型7：

typescript

// src/Animal.d.ts

declare class Animal {
	name: string
	constructor(name: string)
	sayHi(): string
}
// src/index.ts

let cat = new Animal('Tom')

// src/Animal.d.ts

declare class Animal {
	name: string
	constructor(name: string)
	sayHi(): string
}
// src/index.ts

let cat = new Animal('Tom')

同样的，declare class 语句也只能用来定义类型，不能用来定义具体的实现，比如定义 sayHi 方法的具体实现则会报错：

typescript

// src/Animal.d.ts

declare class Animal {
	name: string
	constructor(name: string)
	sayHi() {
		return `My name is ${this.name}`
	}
	// ERROR: An implementation cannot be declared in ambient contexts.
}

// src/Animal.d.ts

declare class Animal {
	name: string
	constructor(name: string)
	sayHi() {
		return `My name is ${this.name}`
	}
	// ERROR: An implementation cannot be declared in ambient contexts.
}

`declare enum`

使用 declare enum 定义的枚举类型也称作外部枚举（Ambient Enums），举例如下8：

typescript

// src/Directions.d.ts

declare enum Directions {
	Up,
	Down,
	Left,
	Right,
}
// src/index.ts

let directions = [
	Directions.Up,
	Directions.Down,
	Directions.Left,
	Directions.Right,
]

// src/Directions.d.ts

declare enum Directions {
	Up,
	Down,
	Left,
	Right,
}
// src/index.ts

let directions = [
	Directions.Up,
	Directions.Down,
	Directions.Left,
	Directions.Right,
]

与其他全局变量的类型声明一致，declare enum 仅用来定义类型，而不是具体的值。

Directions.d.ts 仅仅会用于编译时的检查，声明文件里的内容在编译结果中会被删除。它编译结果是：

javascript

var directions = [
	Directions.Up,
	Directions.Down,
	Directions.Left,
	Directions.Right,
]

var directions = [
	Directions.Up,
	Directions.Down,
	Directions.Left,
	Directions.Right,
]

其中 Directions 是由第三方库定义好的全局变量。

`declare namespace`

namespace 是 ts 早期时为了解决模块化而创造的关键字，中文称为命名空间。

由于历史遗留原因，在早期还没有 ES6 的时候，ts 提供了一种模块化方案，使用 module 关键字表示内部模块。但由于后来 ES6 也使用了 module 关键字，ts 为了兼容 ES6，使用 namespace 替代了自己的 module，更名为命名空间。

随着 ES6 的广泛应用，现在已经不建议再使用 ts 中的 namespace，而推荐使用 ES6 的模块化方案了，故我们不再需要学习 namespace 的使用了。

namespace 被淘汰了，但是在声明文件中，declare namespace 还是比较常用的，它用来表示全局变量是一个对象，包含很多子属性。

比如 jQuery 是一个全局变量，它是一个对象，提供了一个 jQuery.ajax 方法可以调用，那么我们就应该使用 declare namespace jQuery 来声明这个拥有多个子属性的全局变量。

typescript

// src/jQuery.d.ts

declare namespace jQuery {
	function ajax(url: string, settings?: any): void
}
// src/index.ts

jQuery.ajax('/api/get_something')

// src/jQuery.d.ts

declare namespace jQuery {
	function ajax(url: string, settings?: any): void
}
// src/index.ts

jQuery.ajax('/api/get_something')

注意，在 declare namespace 内部，我们直接使用 function ajax 来声明函数，而不是使用 declare function ajax。类似的，也可以使用 const, class, enum 等语句9：

typescript

// src/jQuery.d.ts

declare namespace jQuery {
	function ajax(url: string, settings?: any): void
	const version: number
	class Event {
		blur(eventType: EventType): void
	}
	enum EventType {
		CustomClick,
	}
}
// src/index.ts

jQuery.ajax('/api/get_something')
console.log(jQuery.version)
const e = new jQuery.Event()
e.blur(jQuery.EventType.CustomClick)

// src/jQuery.d.ts

declare namespace jQuery {
	function ajax(url: string, settings?: any): void
	const version: number
	class Event {
		blur(eventType: EventType): void
	}
	enum EventType {
		CustomClick,
	}
}
// src/index.ts

jQuery.ajax('/api/get_something')
console.log(jQuery.version)
const e = new jQuery.Event()
e.blur(jQuery.EventType.CustomClick)

####### 嵌套的命名空间

如果对象拥有深层的层级，则需要用嵌套的 namespace 来声明深层的属性的类型10：

typescript

// src/jQuery.d.ts

declare namespace jQuery {
	function ajax(url: string, settings?: any): void
	namespace fn {
		function extend(object: any): void
	}
}
// src/index.ts

jQuery.ajax('/api/get_something')
jQuery.fn.extend({
	check: function () {
		return this.each(function () {
			this.checked = true
		})
	},
})

// src/jQuery.d.ts

declare namespace jQuery {
	function ajax(url: string, settings?: any): void
	namespace fn {
		function extend(object: any): void
	}
}
// src/index.ts

jQuery.ajax('/api/get_something')
jQuery.fn.extend({
	check: function () {
		return this.each(function () {
			this.checked = true
		})
	},
})

假如 jQuery 下仅有 fn 这一个属性（没有 ajax 等其他属性或方法），则可以不需要嵌套 namespace11：

typescript

// src/jQuery.d.ts

declare namespace jQuery.fn {
	function extend(object: any): void
}
// src/index.ts

jQuery.fn.extend({
	check: function () {
		return this.each(function () {
			this.checked = true
		})
	},
})

// src/jQuery.d.ts

declare namespace jQuery.fn {
	function extend(object: any): void
}
// src/index.ts

jQuery.fn.extend({
	check: function () {
		return this.each(function () {
			this.checked = true
		})
	},
})

`interface` 和 `type`

除了全局变量之外，可能有一些类型我们也希望能暴露出来。在类型声明文件中，我们可以直接使用 interface 或 type 来声明一个全局的接口或类型12：

typescript

// src/jQuery.d.ts

interface AjaxSettings {
	method?: 'GET' | 'POST'
	data?: any
}
declare namespace jQuery {
	function ajax(url: string, settings?: AjaxSettings): void
}

// src/jQuery.d.ts

interface AjaxSettings {
	method?: 'GET' | 'POST'
	data?: any
}
declare namespace jQuery {
	function ajax(url: string, settings?: AjaxSettings): void
}

这样的话，在其他文件中也可以使用这个接口或类型了：

typescript

// src/index.ts

let settings: AjaxSettings = {
	method: 'POST',
	data: {
		name: 'foo',
	},
}
jQuery.ajax('/api/post_something', settings)

// src/index.ts

let settings: AjaxSettings = {
	method: 'POST',
	data: {
		name: 'foo',
	},
}
jQuery.ajax('/api/post_something', settings)

type 与 interface 类似，不再赘述。

####### 防止命名冲突

暴露在最外层的 interface 或 type 会作为全局类型作用于整个项目中，我们应该尽可能的减少全局变量或全局类型的数量。故最好将他们放到 namespace 下13：

typescript

// src/jQuery.d.ts

declare namespace jQuery {
	interface AjaxSettings {
		method?: 'GET' | 'POST'
		data?: any
	}
	function ajax(url: string, settings?: AjaxSettings): void
}

// src/jQuery.d.ts

declare namespace jQuery {
	interface AjaxSettings {
		method?: 'GET' | 'POST'
		data?: any
	}
	function ajax(url: string, settings?: AjaxSettings): void
}

注意，在使用这个 interface 的时候，也应该加上 jQuery 前缀：

typescript

// src/index.ts

let settings: jQuery.AjaxSettings = {
	method: 'POST',
	data: {
		name: 'foo',
	},
}
jQuery.ajax('/api/post_something', settings)

// src/index.ts

let settings: jQuery.AjaxSettings = {
	method: 'POST',
	data: {
		name: 'foo',
	},
}
jQuery.ajax('/api/post_something', settings)

声明合并

假如 jQuery 既是一个函数，可以直接被调用 jQuery('#foo')，又是一个对象，拥有子属性 jQuery.ajax()（事实确实如此），那么我们可以组合多个声明语句，它们会不冲突的合并起来14：

typescript

// src/jQuery.d.ts

declare function jQuery(selector: string): any
declare namespace jQuery {
	function ajax(url: string, settings?: any): void
}
// src/index.ts

jQuery('#foo')
jQuery.ajax('/api/get_something')

// src/jQuery.d.ts

declare function jQuery(selector: string): any
declare namespace jQuery {
	function ajax(url: string, settings?: any): void
}
// src/index.ts

jQuery('#foo')
jQuery.ajax('/api/get_something')

npm 包

一般我们通过 import foo from 'foo' 导入一个 npm 包，这是符合 ES6 模块规范的。

在我们尝试给一个 npm 包创建声明文件之前，需要先看看它的声明文件是否已经存在。一般来说，npm 包的声明文件可能存在于两个地方：

与该 npm 包绑定在一起。判断依据是 package.json 中有 types 字段，或者有一个 index.d.ts 声明文件。这种模式不需要额外安装其他包，是最为推荐的，所以以后我们自己创建 npm 包的时候，最好也将声明文件与 npm 包绑定在一起。
发布到 @types 里。我们只需要尝试安装一下对应的 @types 包就知道是否存在该声明文件，安装命令是 npm install @types/foo --save-dev。这种模式一般是由于 npm 包的维护者没有提供声明文件，所以只能由其他人将声明文件发布到 @types 里了。

假如以上两种方式都没有找到对应的声明文件，那么我们就需要自己为它写声明文件了。由于是通过 import 语句导入的模块，所以声明文件存放的位置也有所约束，一般有两种方案：

创建一个 node_modules/@types/foo/index.d.ts 文件，存放 foo 模块的声明文件。这种方式不需要额外的配置，但是 node_modules 目录不稳定，代码也没有被保存到仓库中，无法回溯版本，有不小心被删除的风险，故不太建议用这种方案，一般只用作临时测试。
创建一个 types 目录，专门用来管理自己写的声明文件，将 foo 的声明文件放到 types/foo/index.d.ts 中。这种方式需要配置下 tsconfig.json 中的 paths 和 baseUrl 字段。

目录结构：

/path/to/project
├── src
|  └── index.ts
├── types
|  └── foo
|     └── index.d.ts
└── tsconfig.json

/path/to/project
├── src
|  └── index.ts
├── types
|  └── foo
|     └── index.d.ts
└── tsconfig.json

tsconfig.json 内容：

json

{
	"compilerOptions": {
		"module": "commonjs",
		"baseUrl": "./",
		"paths": {
			"*": ["types/*"]
		}
	}
}

{
	"compilerOptions": {
		"module": "commonjs",
		"baseUrl": "./",
		"paths": {
			"*": ["types/*"]
		}
	}
}

如此配置之后，通过 import 导入 foo 的时候，也会去 types 目录下寻找对应的模块的声明文件了。

注意 module 配置可以有很多种选项，不同的选项会影响模块的导入导出模式。这里我们使用了 commonjs 这个最常用的选项，后面的教程也都默认使用的这个选项。

不管采用了以上两种方式中的哪一种，我都强烈建议大家将书写好的声明文件（通过给第三方库发 pull request，或者直接提交到 @types 里）发布到开源社区中，享受了这么多社区的优秀的资源，就应该在力所能及的时候给出一些回馈。只有所有人都参与进来，才能让 ts 社区更加繁荣。

npm 包的声明文件主要有以下几种语法：

[export](http://ts.xcatliu.com/basics/declaration-files.html#export) 导出变量
[export namespace](http://ts.xcatliu.com/basics/declaration-files.html#export-namespace) 导出（含有子属性的）对象
[export default](http://ts.xcatliu.com/basics/declaration-files.html#export-default) ES6 默认导出
[export =](http://ts.xcatliu.com/basics/declaration-files.html#export-1) commonjs 导出模块

`export`

npm 包的声明文件与全局变量的声明文件有很大区别。在 npm 包的声明文件中，使用 declare 不再会声明一个全局变量，而只会在当前文件中声明一个局部变量。只有在声明文件中使用 export 导出，然后在使用方 import 导入后，才会应用到这些类型声明。

export 的语法与普通的 ts 中的语法类似，区别仅在于声明文件中禁止定义具体的实现15：

typescript

// types/foo/index.d.ts

export const name: string
export function getName(): string
export class Animal {
	constructor(name: string)
	sayHi(): string
}
export enum Directions {
	Up,
	Down,
	Left,
	Right,
}
export interface Options {
	data: any
}

// types/foo/index.d.ts

export const name: string
export function getName(): string
export class Animal {
	constructor(name: string)
	sayHi(): string
}
export enum Directions {
	Up,
	Down,
	Left,
	Right,
}
export interface Options {
	data: any
}

对应的导入和使用模块应该是这样：

typescript

// src/index.ts

import {name, getName, Animal, Directions, Options} from 'foo'

console.log(name)
let myName = getName()
let cat = new Animal('Tom')
let directions = [
	Directions.Up,
	Directions.Down,
	Directions.Left,
	Directions.Right,
]
let options: Options = {
	data: {
		name: 'foo',
	},
}

// src/index.ts

import {name, getName, Animal, Directions, Options} from 'foo'

console.log(name)
let myName = getName()
let cat = new Animal('Tom')
let directions = [
	Directions.Up,
	Directions.Down,
	Directions.Left,
	Directions.Right,
]
let options: Options = {
	data: {
		name: 'foo',
	},
}

####### 混用 declare 和 export

我们也可以使用 declare 先声明多个变量，最后再用 export 一次性导出。上例的声明文件可以等价的改写为16：

typescript

// types/foo/index.d.ts

declare const name: string
declare function getName(): string
declare class Animal {
	constructor(name: string)
	sayHi(): string
}
declare enum Directions {
	Up,
	Down,
	Left,
	Right,
}
interface Options {
	data: any
}

export {name, getName, Animal, Directions, Options}

// types/foo/index.d.ts

declare const name: string
declare function getName(): string
declare class Animal {
	constructor(name: string)
	sayHi(): string
}
declare enum Directions {
	Up,
	Down,
	Left,
	Right,
}
interface Options {
	data: any
}

export {name, getName, Animal, Directions, Options}

注意，与全局变量的声明文件类似，interface 前是不需要 declare 的。

`export namespace`

与 declare namespace 类似，export namespace 用来导出一个拥有子属性的对象17：

typescript

// types/foo/index.d.ts

export namespace foo {
	const name: string
	namespace bar {
		function baz(): string
	}
}
// src/index.ts

import {foo} from 'foo'

console.log(foo.name)
foo.bar.baz()

// types/foo/index.d.ts

export namespace foo {
	const name: string
	namespace bar {
		function baz(): string
	}
}
// src/index.ts

import {foo} from 'foo'

console.log(foo.name)
foo.bar.baz()

`export default`

在 ES6 模块系统中，使用 export default 可以导出一个默认值，使用方可以用 import foo from 'foo' 而不是 import { foo } from 'foo' 来导入这个默认值。

在类型声明文件中，export default 用来导出默认值的类型18：

typescript

// types/foo/index.d.ts

export default function foo(): string
// src/index.ts

import foo from 'foo'

foo()

// types/foo/index.d.ts

export default function foo(): string
// src/index.ts

import foo from 'foo'

foo()

注意，只有 function、class 和 interface 可以直接默认导出，其他的变量需要先定义出来，再默认导出19：

typescript

// types/foo/index.d.ts

export default enum Directions {
// ERROR: Expression expected.
    Up,
    Down,
    Left,
    Right
}

// types/foo/index.d.ts

export default enum Directions {
// ERROR: Expression expected.
    Up,
    Down,
    Left,
    Right
}

上例中 export default enum 是错误的语法，需要使用 declare enum 定义出来，然后使用 export default 导出：

typescript

// types/foo/index.d.ts

declare enum Directions {
	Up,
	Down,
	Left,
	Right,
}

export default Directions

// types/foo/index.d.ts

declare enum Directions {
	Up,
	Down,
	Left,
	Right,
}

export default Directions

针对这种默认导出，我们一般会将导出语句放在整个声明文件的最前面20：

typescript

// types/foo/index.d.ts

export default Directions

declare enum Directions {
	Up,
	Down,
	Left,
	Right,
}

// types/foo/index.d.ts

export default Directions

declare enum Directions {
	Up,
	Down,
	Left,
	Right,
}

`export =`

在 commonjs 规范中，我们用以下方式来导出一个模块：

javascript

// 整体导出
module.exports = foo
// 单个导出
exports.bar = bar

// 整体导出
module.exports = foo
// 单个导出
exports.bar = bar

在 ts 中，针对这种模块导出，有多种方式可以导入，第一种方式是 const ... = require：

javascript

// 整体导入
const foo = require('foo')
// 单个导入
const bar = require('foo').bar

// 整体导入
const foo = require('foo')
// 单个导入
const bar = require('foo').bar

第二种方式是 import ... from，注意针对整体导出，需要使用 import * as 来导入：

typescript

// 整体导入
import * as foo from 'foo'
// 单个导入
import {bar} from 'foo'

// 整体导入
import * as foo from 'foo'
// 单个导入
import {bar} from 'foo'

第三种方式是 import ... require，这也是 ts 官方推荐的方式：

typescript

// 整体导入
import foo = require('foo')
// 单个导入
import bar = foo.bar

// 整体导入
import foo = require('foo')
// 单个导入
import bar = foo.bar

对于这种使用 commonjs 规范的库，假如要为它写类型声明文件的话，就需要使用到 export = 这种语法了21：

typescript

// types/foo/index.d.ts

export = foo

declare function foo(): string
declare namespace foo {
	const bar: number
}

// types/foo/index.d.ts

export = foo

declare function foo(): string
declare namespace foo {
	const bar: number
}

需要注意的是，上例中使用了 export = 之后，就不能再单个导出 export { bar } 了。所以我们通过声明合并，使用 declare namespace foo 来将 bar 合并到 foo 里。

准确地讲，export = 不仅可以用在声明文件中，也可以用在普通的 ts 文件中。实际上，import ... require 和 export = 都是 ts 为了兼容 AMD 规范和 commonjs 规范而创立的新语法，由于并不常用也不推荐使用，所以这里就不详细介绍了，感兴趣的可以看官方文档。

由于很多第三方库是 commonjs 规范的，所以声明文件也就不得不用到 export = 这种语法了。但是还是需要再强调下，相比与 export =，我们更推荐使用 ES6 标准的 export default 和 export。

UMD 库

既可以通过 <script> 标签引入，又可以通过 import 导入的库，称为 UMD 库。相比于 npm 包的类型声明文件，我们需要额外声明一个全局变量，为了实现这种方式，ts 提供了一个新语法 export as namespace。

`export as namespace`

一般使用 export as namespace 时，都是先有了 npm 包的声明文件，再基于它添加一条 export as namespace 语句，即可将声明好的一个变量声明为全局变量，举例如下22：

typescript

// types/foo/index.d.ts

export as namespace foo
export = foo

declare function foo(): string
declare namespace foo {
	const bar: number
}

// types/foo/index.d.ts

export as namespace foo
export = foo

declare function foo(): string
declare namespace foo {
	const bar: number
}

当然它也可以与 export default 一起使用：

typescript

// types/foo/index.d.ts

export as namespace foo
export default foo

declare function foo(): string
declare namespace foo {
	const bar: number
}

// types/foo/index.d.ts

export as namespace foo
export default foo

declare function foo(): string
declare namespace foo {
	const bar: number
}

直接扩展全局变量

有的第三方库扩展了一个全局变量，可是此全局变量的类型却没有相应的更新过来，就会导致 ts 编译错误，此时就需要扩展全局变量的类型。比如扩展 String 类型23：

typescript

interface String {
	prependHello(): string
}

'foo'.prependHello()

interface String {
	prependHello(): string
}

'foo'.prependHello()

通过声明合并，使用 interface String 即可给 String 添加属性或方法。

也可以使用 declare namespace 给已有的命名空间添加类型声明24：

typescript

// types/jquery-plugin/index.d.ts

declare namespace JQuery {
	interface CustomOptions {
		bar: string
	}
}

interface JQueryStatic {
	foo(options: JQuery.CustomOptions): string
}
// src/index.ts

jQuery.foo({
	bar: '',
})

// types/jquery-plugin/index.d.ts

declare namespace JQuery {
	interface CustomOptions {
		bar: string
	}
}

interface JQueryStatic {
	foo(options: JQuery.CustomOptions): string
}
// src/index.ts

jQuery.foo({
	bar: '',
})

在 npm 包或 UMD 库中扩展全局变量

如之前所说，对于一个 npm 包或者 UMD 库的声明文件，只有 export 导出的类型声明才能被导入。所以对于 npm 包或 UMD 库，如果导入此库之后会扩展全局变量，则需要使用另一种语法在声明文件中扩展全局变量的类型，那就是 declare global。

`declare global`

使用 declare global 可以在 npm 包或者 UMD 库的声明文件中扩展全局变量的类型25：

typescript

// types/foo/index.d.ts

declare global {
	interface String {
		prependHello(): string
	}
}

export {}
// src/index.ts

'bar'.prependHello()

// types/foo/index.d.ts

declare global {
	interface String {
		prependHello(): string
	}
}

export {}
// src/index.ts

'bar'.prependHello()

注意即使此声明文件不需要导出任何东西，仍然需要导出一个空对象，用来告诉编译器这是一个模块的声明文件，而不是一个全局变量的声明文件。

模块插件

有时通过 import 导入一个模块插件，可以改变另一个原有模块的结构。此时如果原有模块已经有了类型声明文件，而插件模块没有类型声明文件，就会导致类型不完整，缺少插件部分的类型。ts 提供了一个语法 declare module，它可以用来扩展原有模块的类型。

`declare module`

如果是需要扩展原有模块的话，需要在类型声明文件中先引用原有模块，再使用 declare module 扩展原有模块26：

typescript

// types/moment-plugin/index.d.ts

import * as moment from 'moment'

declare module 'moment' {
	export function foo(): moment.CalendarKey
}
// src/index.ts

import * as moment from 'moment'
import 'moment-plugin'

moment.foo()

// types/moment-plugin/index.d.ts

import * as moment from 'moment'

declare module 'moment' {
	export function foo(): moment.CalendarKey
}
// src/index.ts

import * as moment from 'moment'
import 'moment-plugin'

moment.foo()

declare module 也可用于在一个文件中一次性声明多个模块的类型27：

typescript

// types/foo-bar.d.ts

declare module 'foo' {
	export interface Foo {
		foo: string
	}
}

declare module 'bar' {
	export function bar(): string
}
// src/index.ts

import {Foo} from 'foo'
import * as bar from 'bar'

let f: Foo
bar.bar()

// types/foo-bar.d.ts

declare module 'foo' {
	export interface Foo {
		foo: string
	}
}

declare module 'bar' {
	export function bar(): string
}
// src/index.ts

import {Foo} from 'foo'
import * as bar from 'bar'

let f: Foo
bar.bar()

声明文件中的依赖

一个声明文件有时会依赖另一个声明文件中的类型，比如在前面的 declare module 的例子中，我们就在声明文件中导入了 moment，并且使用了 moment.CalendarKey 这个类型：

typescript

// types/moment-plugin/index.d.ts

import * as moment from 'moment'

declare module 'moment' {
	export function foo(): moment.CalendarKey
}

// types/moment-plugin/index.d.ts

import * as moment from 'moment'

declare module 'moment' {
	export function foo(): moment.CalendarKey
}

除了可以在声明文件中通过 import 导入另一个声明文件中的类型之外，还有一个语法也可以用来导入另一个声明文件，那就是三斜线指令。

三斜线指令

与 namespace 类似，三斜线指令也是 ts 在早期版本中为了描述模块之间的依赖关系而创造的语法。随着 ES6 的广泛应用，现在已经不建议再使用 ts 中的三斜线指令来声明模块之间的依赖关系了。

但是在声明文件中，它还是有一定的用武之地。

类似于声明文件中的 import，它可以用来导入另一个声明文件。与 import 的区别是，当且仅当在以下几个场景下，我们才需要使用三斜线指令替代 import：

当我们在书写一个全局变量的声明文件时
当我们需要依赖一个全局变量的声明文件时

####### 书写一个全局变量的声明文件

这些场景听上去很拗口，但实际上很好理解——在全局变量的声明文件中，是不允许出现 import, export 关键字的。一旦出现了，那么他就会被视为一个 npm 包或 UMD 库，就不再是全局变量的声明文件了。故当我们在书写一个全局变量的声明文件时，如果需要引用另一个库的类型，那么就必须用三斜线指令了28：

typescript

// types/jquery-plugin/index.d.ts

/// <reference types="jquery" />

declare function foo(options: JQuery.AjaxSettings): string
// src/index.ts

foo({})

// types/jquery-plugin/index.d.ts

/// <reference types="jquery" />

declare function foo(options: JQuery.AjaxSettings): string
// src/index.ts

foo({})

三斜线指令的语法如上，/// 后面使用 xml 的格式添加了对 jquery 类型的依赖，这样就可以在声明文件中使用 JQuery.AjaxSettings 类型了。

注意，三斜线指令必须放在文件的最顶端，三斜线指令的前面只允许出现单行或多行注释。

####### 依赖一个全局变量的声明文件

在另一个场景下，当我们需要依赖一个全局变量的声明文件时，由于全局变量不支持通过 import 导入，当然也就必须使用三斜线指令来引入了：

typescript

// types/node-plugin/index.d.ts

/// <reference types="node" />

export function foo(p: NodeJS.Process): string
// src/index.ts

import {foo} from 'node-plugin'

foo(global.process)

// types/node-plugin/index.d.ts

/// <reference types="node" />

export function foo(p: NodeJS.Process): string
// src/index.ts

import {foo} from 'node-plugin'

foo(global.process)

在上面的例子中，我们通过三斜线指引入了 node 的类型，然后在声明文件中使用了 NodeJS.Process 这个类型。最后在使用到 foo 的时候，传入了 node 中的全局变量 process。

由于引入的 node 中的类型都是全局变量的类型，它们是没有办法通过 import 来导入的，所以这种场景下也只能通过三斜线指令来引入了。

以上两种使用场景下，都是由于需要书写或需要依赖全局变量的声明文件，所以必须使用三斜线指令。在其他的一些不是必要使用三斜线指令的情况下，就都需要使用 import 来导入。

####### 拆分声明文件

当我们的全局变量的声明文件太大时，可以通过拆分为多个文件，然后在一个入口文件中将它们一一引入，来提高代码的可维护性。比如 jQuery 的声明文件就是这样的：

typescript

// node_modules/@types/jquery/index.d.ts

/// <reference types="sizzle" />
/// <reference path="JQueryStatic.d.ts" />
/// <reference path="JQuery.d.ts" />
/// <reference path="misc.d.ts" />
/// <reference path="legacy.d.ts" />

export = jQuery

// node_modules/@types/jquery/index.d.ts

/// <reference types="sizzle" />
/// <reference path="JQueryStatic.d.ts" />
/// <reference path="JQuery.d.ts" />
/// <reference path="misc.d.ts" />
/// <reference path="legacy.d.ts" />

export = jQuery

其中用到了 types 和 path 两种不同的指令。它们的区别是：types 用于声明对另一个库的依赖，而 path 用于声明对另一个文件的依赖。

上例中，sizzle 是与 jquery 平行的另一个库，所以需要使用 types="sizzle" 来声明对它的依赖。而其他的三斜线指令就是将 jquery 的声明拆分到不同的文件中了，然后在这个入口文件中使用 path="foo" 将它们一一引入。

####### 其他三斜线指令

除了这两种三斜线指令之外，还有其他的三斜线指令，比如 /// <reference no-default-lib="true"/>, /// <amd-module /> 等，但它们都是废弃的语法，故这里就不介绍了，详情可见官网。

自动生成声明文件

如果库的源码本身就是由 ts 写的，那么在使用 tsc 脚本将 ts 编译为 js 的时候，添加 declaration 选项，就可以同时也生成 .d.ts 声明文件了。

我们可以在命令行中添加 --declaration（简写 -d），或者在 tsconfig.json 中添加 declaration 选项。这里以 tsconfig.json 为例：

json

{
	"compilerOptions": {
		"module": "commonjs",
		"outDir": "lib",
		"declaration": true
	}
}

{
	"compilerOptions": {
		"module": "commonjs",
		"outDir": "lib",
		"declaration": true
	}
}

上例中我们添加了 outDir 选项，将 ts 文件的编译结果输出到 lib 目录下，然后添加了 declaration 选项，设置为 true，表示将会由 ts 文件自动生成 .d.ts 声明文件，也会输出到 lib 目录下。

运行 tsc 之后，目录结构如下：

/path/to/project
├── lib
|  ├── bar
|  |  ├── index.d.ts
|  |  └── index.js
|  ├── index.d.ts
|  └── index.js
├── src
|  ├── bar
|  |  └── index.ts
|  └── index.ts
├── package.json
└── tsconfig.json

/path/to/project
├── lib
|  ├── bar
|  |  ├── index.d.ts
|  |  └── index.js
|  ├── index.d.ts
|  └── index.js
├── src
|  ├── bar
|  |  └── index.ts
|  └── index.ts
├── package.json
└── tsconfig.json

在这个例子中，src 目录下有两个 ts 文件，分别是 src/index.ts 和 src/bar/index.ts，它们被编译到 lib 目录下的同时，也会生成对应的两个声明文件 lib/index.d.ts 和 lib/bar/index.d.ts。它们的内容分别是：

typescript

// src/index.ts

export * from './bar'

export default function foo() {
	return 'foo'
}
// src/bar/index.ts

export function bar() {
	return 'bar'
}
// lib/index.d.ts

export * from './bar'
export default function foo(): string
// lib/bar/index.d.ts

export declare function bar(): string

// src/index.ts

export * from './bar'

export default function foo() {
	return 'foo'
}
// src/bar/index.ts

export function bar() {
	return 'bar'
}
// lib/index.d.ts

export * from './bar'
export default function foo(): string
// lib/bar/index.d.ts

export declare function bar(): string

可见，自动生成的声明文件基本保持了源码的结构，而将具体实现去掉了，生成了对应的类型声明。

使用 tsc 自动生成声明文件时，每个 ts 文件都会对应一个 .d.ts 声明文件。这样的好处是，使用方不仅可以在使用 import foo from 'foo' 导入默认的模块时获得类型提示，还可以在使用 import bar from 'foo/lib/bar' 导入一个子模块时，也获得对应的类型提示。

除了 declaration 选项之外，还有几个选项也与自动生成声明文件有关，这里只简单列举出来，不做详细演示了：

declarationDir 设置生成 .d.ts 文件的目录
declarationMap 对每个 .d.ts 文件，都生成对应的 .d.ts.map（sourcemap）文件
emitDeclarationOnly 仅生成 .d.ts 文件，不生成 .js 文件

发布声明文件

当我们为一个库写好了声明文件之后，下一步就是将它发布出去了。

此时有两种方案：

将声明文件和源码放在一起
将声明文件发布到 @types 下

这两种方案中优先选择第一种方案。保持声明文件与源码在一起，使用时就不需要额外增加单独的声明文件库的依赖了，而且也能保证声明文件的版本与源码的版本保持一致。

仅当我们在给别人的仓库添加类型声明文件，但原作者不愿意合并 pull request 时，才需要使用第二种方案，将声明文件发布到 @types 下。

将声明文件和源码放在一起

如果声明文件是通过 tsc 自动生成的，那么无需做任何其他配置，只需要把编译好的文件也发布到 npm 上，使用方就可以获取到类型提示了。

如果是手动写的声明文件，那么需要满足以下条件之一，才能被正确的识别：

给 package.json 中的 types 或 typings 字段指定一个类型声明文件地址
在项目根目录下，编写一个 index.d.ts 文件
针对入口文件（package.json 中的 main 字段指定的入口文件），编写一个同名不同后缀的 .d.ts 文件

第一种方式是给 package.json 中的 types 或 typings 字段指定一个类型声明文件地址。比如：

json

{
	"name": "foo",
	"version": "1.0.0",
	"main": "lib/index.js",
	"types": "foo.d.ts"
}

{
	"name": "foo",
	"version": "1.0.0",
	"main": "lib/index.js",
	"types": "foo.d.ts"
}

指定了 types 为 foo.d.ts 之后，导入此库的时候，就会去找 foo.d.ts 作为此库的类型声明文件了。

typings 与 types 一样，只是另一种写法。

如果没有指定 types 或 typings，那么就会在根目录下寻找 index.d.ts 文件，将它视为此库的类型声明文件。

如果没有找到 index.d.ts 文件，那么就会寻找入口文件（package.json 中的 main 字段指定的入口文件）是否存在对应同名不同后缀的 .d.ts 文件。

比如 package.json 是这样时：

json

{
	"name": "foo",
	"version": "1.0.0",
	"main": "lib/index.js"
}

{
	"name": "foo",
	"version": "1.0.0",
	"main": "lib/index.js"
}

就会先识别 package.js 中是否存在 types 或 typings 字段。发现不存在，那么就会寻找是否存在 index.d.ts 文件。如果还是不存在，那么就会寻找是否存在 lib/index.d.ts 文件。假如说连 lib/index.d.ts 都不存在的话，就会被认为是一个没有提供类型声明文件的库了。

有的库为了支持导入子模块，比如 import bar from 'foo/lib/bar'，就需要额外再编写一个类型声明文件 lib/bar.d.ts 或者 lib/bar/index.d.ts，这与自动生成声明文件类似，一个库中同时包含了多个类型声明文件。

将声明文件发布到 `@types` 下

如果我们是在给别人的仓库添加类型声明文件，但原作者不愿意合并 pull request，那么就需要将声明文件发布到 @types 下。

与普通的 npm 模块不同，@types 是统一由 DefinitelyTyped 管理的。要将声明文件发布到 @types 下，就需要给 DefinitelyTyped 创建一个 pull-request，其中包含了类型声明文件，测试代码，以及 tsconfig.json 等。

pull-request 需要符合它们的规范，并且通过测试，才能被合并，稍后就会被自动发布到 @types 下。

在 DefinitelyTyped 中创建一个新的类型声明，需要用到一些工具，DefinitelyTyped 的文档中已经有了详细的介绍，这里就不赘述了，以官方文档为准。

同名基础类型属性的合并 ​

同名非基础类型属性的合并 ​

泛型 ​

泛型函数 ​

泛型接口 ​

泛型类 ​

类型运算符 ​

typeof ​

keyof ​

in ​

extends ​

​

infer ​

泛型工具类型 ​

Partial ​

Partial 实现原理解析 ​

Readonly 原理解析 ​

Pick ​

Record ​

Exclude 原理解析 ​

Extract ​

Omit 原理解析 ​

Parameters 和 ReturnType ​

ConstructorParameters ​

Ts compiler 内部实现的类型 ​

声明文件 ​

语法 ​

什么是声明语句 ​

什么是声明文件 ​

第三方声明文件 ​

书写声明文件 ​

全局变量 ​

declare var ​

declare function ​

declare class ​

declare enum ​

declare namespace ​

interface 和 type ​

声明合并 ​

npm 包 ​

export ​

export namespace ​

export default ​

export = ​

UMD 库 ​

export as namespace ​

直接扩展全局变量 ​

在 npm 包或 UMD 库中扩展全局变量 ​

declare global ​

模块插件 ​

declare module ​

声明文件中的依赖 ​

三斜线指令 ​

自动生成声明文件 ​

发布声明文件 ​

将声明文件和源码放在一起 ​

将声明文件发布到 @types 下 ​

​

同名基础类型属性的合并

同名非基础类型属性的合并

泛型

泛型函数

泛型接口

泛型类

类型运算符

typeof

keyof

in

extends

infer

泛型工具类型

Partial

Partial 实现原理解析

Readonly 原理解析

Pick

Record

Exclude 原理解析

Extract

Omit 原理解析

Parameters 和 ReturnType

ConstructorParameters

Ts compiler 内部实现的类型

声明文件

语法

什么是声明语句

什么是声明文件

第三方声明文件

书写声明文件

全局变量

`declare var`

`declare function`

`declare class`

`declare enum`

`declare namespace`

`interface` 和 `type`

声明合并

npm 包

`export`

`export namespace`

`export default`

`export =`

UMD 库

`export as namespace`

直接扩展全局变量

在 npm 包或 UMD 库中扩展全局变量

`declare global`

模块插件

`declare module`

声明文件中的依赖

三斜线指令

自动生成声明文件

发布声明文件

将声明文件和源码放在一起

将声明文件发布到 `@types` 下