介绍
TypeScript是一门由微软推出的开源的、跨平台的编程语言。它是JavaScript的超集，扩展了 JavaScript 的语法，最终会被编译为JavaScript代码。
TypeScript的主要特性：
- 超集 ：TypeScript 是 JavaScript 的超集；
- 类型系统 ：TypeScript在JavaScript的基础上，包装了类型机制，使其变身为静态类型语言；
- 编辑器功能 ：增强了编辑器和IDE功能，包括代码补全、接口提示、跳转到定义、重构等；
- 错误提示 ：可以在编译阶段就发现大部分错误，帮助调试程序。
TS内置方法的源码实现
/**
* @desc 筛选某个类型中特定类型的属性
* @desc { [k in keyof Source]: Source[k] extends types ? k : never }[keyof Source]叫做索引访问接口属性，他能返回非never的属性值
* @param Source 用于筛选的原始类型
* @param types 要筛选出的类型
* @return Record<string, 你想要的类型>
*/
export type FilterType<Source, types> = Pick<
Source,
{ [k in keyof Source]: Source[k] extends types ? k : never }[keyof Source]
>;
/**
* @desc 返回某个函数的参数值类型
* @param fn (...args: any) => any
* @return Tuple 元祖类型
*/
export type FnParamsType<T extends (...args: any) => any> = T extends (...args: infer P) => any
? P
: never;
/**
* @desc 返回某个函数的返回值类型
* @param fn (...args: any) => any
* @return any类型
*/
export type FnReturnType<T extends (...args: any) => any> = T extends (...args: any) => infer R
? R
: never;
/**
* @desc 返回某个类的实例类型
* @param fn (...args: any) => any
* @return any类型
*/
export type FnInstanceType<T extends abstract new (...args: any) => any> = T extends abstract new (
...args: any
) => infer I
? I
: never;
/**
* @desc 将某个类型的属性全部设置为可选
* @param T 要处理的类型
*/
export type PartialType<T> = {
[K in keyof T]?: T[K];
};
/**
* @desc 将某个类型的属性全部设置为必选
* @param T 要处理的类型
*/
export type RequiredType<T> = {
[K in keyof T]-?: T[K];
};
/**
* @desc 将某个类型的属性全部设置为只读
* @param T 要处理的类型
*/
export type ReadonlyType<T> = {
readonly [K in keyof T]: T[K];
};
/**
* @desc 将某个类型的某些属性拿取出来处理组成一个新的类型
* @param T 要处理的类型
* @param K 要提取的属性
*/
export type PickType<T, K extends keyof T> = {
[P in K]: T[K];
};
/**
* @desc 将某个类型的某些属性剔除并把剩下的属性组成一个新的类型
* @param T 要处理的类型
* @param K 要剔除的属性
*/
export type OmitType<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
/**
* @desc 将特定类型的键值对组成一个新的类型(一般都是对象)
* @param K 新的类型的key的类型
* @param V 新的类型的value的类型
*/
export type RecordType<K extends keyof any, V> = {
[P in K]: V;
};
/**
* @desc 将某个联合类型的某些属性从中剔除并生成一个新的联合类型
* @param T 要处理的联合类型
* @param V 要剔除的联合类型属性
*/
export type ExcludeType<T, V> = T extends V ? never : T;
/**
* @desc 将某个联合类型的某些属性从中挑出来并把挑出来的属性生成一个新的联合类型
* @param T 要处理的联合类型
* @param V 要挑出来的联合类型属性
*/
export type ExtractType<T, V> = T extends V ? T : never;
/**
* @desc 从 T 中剔除 null 和 undefined
* @param T 要处理的联合类型
*/
export type NonNullableType<T> = T & {};
// 也可以这样写 export type NonNullableType<T> = T extends null | undefined ? never : T;
/**
* @desc 从T中剔除某些正常类型(一般是传联合类型)并生成一个新的null | undefined联合类型
* @param T 要处理的联合类型
*/
export type AllNullableType<T> = T extends null | undefined ? T : never;
/**
* @desc 返回某个数组的元素类型
* @param arr Array<any>
* @return 元素类型
*/
export type ArrayType<T extends Array<any>> = T extends (infer U)[] ? U : never
/**
* @desc infer的规则
*/
// 只能出现在有条件类型的 extends 子语句中；
// 出现 infer 声明，会引入一个待推断的类型变量；
// 推断的类型变量可以在有条件类型的 true 分支中被引用；
// 允许出现多个同类型变量的 infer
1. Partial
Partial 作用是将传入的属性变为可选项。适用于对类型结构不明确的情况。它使用了两个关键字：keyof和in，先来看看它们都是什么含义。keyof 可以用来取得接口的所有 key 值：
type Person = {
name: string;
age: number;
height: number;
}
type T = keyof Person
// T 类型为： "name" | "age" | "number"
in关键字可以遍历枚举类型,：
type Person = "name" | "age" | "number"
type Obj = {
[p in Person]: any
}
// Obj 的类型为： { name: any, age: any, number: any }
keyof 可以产生联合类型, in 可以遍历枚举类型。所以可以一起使用, 下面是Partial的定义：
/**
* Make all properties in T optional
* 将T中的所有属性设置为可选
*/
type Partial<T> = {
[P in keyof T]?: T[P];
};
这里，keyof T 用来获取 T 所有属性名, 然后使用 in 进行遍历, 将值赋给 P, 最后 T[P] 取得相应属性的值。中间的?就用来将属性设置为可选。
来看下面的例子：
type Person = {
name: string;
age: number;
height: number;
}
type PartialPerson = Partial<Person>;
// PartialPerson 的类型为 {name?: string; age?: number; height?: number;}
const person: PartialPerson = {
name: "zhangsan";
}
这里就使用Partial将Person类型中的属性都指定为可选属性。
2. Required
Required 的作用是将传入的属性变为必选项，和上面的Partial恰好相反，其声明如下：
/**
* Make all properties in T required
* 将T中的所有属性设置为必选
*/
type Required<T> = {
[P in keyof T]-?: T[P];
};
可以看到，这里使用-?将属性设置为必选，可以理解为减去问号。使用形式和上面的Partial差不多：
type Person = {
name?: string;
age?: number;
height?: number;
}
type RequiredPerson = Required<Person>;
// RequiredPerson 的类型为 {name: string; age: number; height: number;}
const person: RequiredPerson = {
name: "zhangsan";
age: 18;
height: 180;
}
这里就使用Required将Person类型中的属性都指定为必选属性。
3. Readonly
将T类型的所有属性设置为只读（readonly），构造出来类型的属性不能被再次赋值。Readonly的声明形式如下：
/**
* Make all properties in T readonly
*/
type Readonly<T> = {
readonly [P in keyof T]: T[P];
};
来看下面的例子：
type Person = {
name: string;
age: number;
}
type ReadonlyPerson = Readonly<Person>;
const person: ReadonlyPerson = {
name: "zhangsan",
age: 18
}
person.age = 20; // Error: cannot reassign a readonly property
可以看到，通过 Readonly 将Person的属性转化成了只读，不能再进行赋值操作。Readonly 类型对于冻结对象非常有用。
4. Pick<Type, Keys>
从 Type 类型中挑选部分属性 Keys 来构造新的类型。它的声明形式如下：
/**
* From T, pick a set of properties whose keys are in the union K
*/
type Pick<T, K extends keyof T> = {
[P in K]: T[P];
};
来看下面的例子：
type Person = {
name: string;
age: number;
height: number;
}
const person: Pick<Person, "name" | "age"> = {
name: "zhangsan",
age: 18
}
这样就使用Pick从Person类型中挑出来了name和age属性的类型，新的类型中只包含这两个属性。
5. Record<Keys, Type>
Record 用来构造一个类型，其属性名的类型为Keys中的类型，属性值的类型为Type。这个工具类型可用来将某个类型的属性映射到另一个类型上，下面是其声明形式：
/**
* Construct a type with a set of properties K of type T
*/
type Record<K extends keyof any, T> = {
[P in K]: T;
};
来看下面的例子：
type Pageinfo = {
title: string;
}
type Page = 'home' | 'about' | 'contact';
const page: Record<Page, Pageinfo> = {
about: {title: 'about'},
contact: {title: 'contact'},
home: {title: 'home'},
}
6. Exclude<Type, ExcludedUnion>
Exclude 用于从类型Type中去除不在ExcludedUnion类型中的成员，下面是其声明的形式：
/**
* Exclude from T those types that are assignable to U
*/
type Exclude<T, U> = T extends U ? never : T;
来看下面的例子：
type Person = {
name: string;
age: number;
height: number;
}
const person: Exclude<Person, "age" | "sex"> = {
name: "zhangsan";
height: 180;
}
这里就使用Exclude将Person类型中的age属性给剔除了，只会剔除两个参数中都包含的属性。
7. Extract<Type, Union>
Extract 用于从类型Type中取出可分配给Union类型的成员。作用与Exclude相反。下面是它的声明形式：
/**
* Extract from T those types that are assignable to U
*/
type Extract<T, U> = T extends U ? T : never;
来看下面的例子：
type ExtractedType = Extract<"x" | "y" | "z", "x" | "y">;
// "x" | "y"
该工具类型对于找出两种类型的公共部分很有用：
interface Human {
id: string;
name: string;
surname: string;
}
interface Cat {
id: string;
name: string;
sound: string;
}
// "id" | "name"
type CommonKeys = Extract<keyof Human, keyof Cat>;
8. Omit<Type, Keys>
上面的 Pick 和 Exclude 都是最基础的工具类型，很多时候用 Pick 或者 Exclude 可能不如直接写类型更直接。而 Omit 就基于这两个来做的一个更抽象的封装，它允许从一个对象中剔除若干个属性，剩下的就是需要的新类型。下面是它的声明形式：
/**
* Construct a type with the properties of T except for those in type K.
*/
type Omit<T, K extends keyof any> = Pick<T, Exclude<keyof T, K>>;
来看下面的例子：
type Person = {
name: string;
age: number;
height: number;
}
const person: Omit<Person, "age" | "height"> = {
name: "zhangsan";
}
这样就使用Omit从Person类型中剔除了 age 和 height 属性，只剩下 name 属性。
9. ReturnType
ReturnType会返回函数返回值的类型，其声明形式如下：
/**
* Obtain the return type of a function type
*/
type ReturnType<T extends (...args: any) => any> = T extends (...args: any) => infer R ? R : any;
来看下面的例子：
function foo(type): boolean {
return type === 0
}
type FooType = ReturnType<typeof foo>
这里使用 typeof 是为了获取 foo 的函数签名，等价于 (type: any) => boolean。
10. InstanceType
InstanceType 会返回 Type 构造函数类型的实例类型。其声明形式如下：
/**
* Obtain the return type of a constructor function type
*/
type InstanceType<T extends abstract new (...args: any) => any> = T extends abstract new (...args: any) => infer R ? R : any;
来看下面的例子：
class Person {
name: string;
age: number;
constructor(person: { name: string; age: number }) {
this.name = person.name;
this.age = person.age;
}
}
type PersonInstanceType = InstanceType<typeof Person>;
// PersonInstanceType 的类型：{ name: string; age: number }
当然，你可能不会这么写，因为可以直接使用UserManager类型：
class Person {
name: string;
age: number;
constructor(person: { name: string; age: number }) {
this.name = person.name;
this.age = person.age;
}
}
const person: Person = {
name: "zhangsan",
age: 18,
};
这就等价于：
class Person {
name: string;
age: number;
constructor(person: { name: string; age: number }) {
this.name = person.name;
this.age = person.age;
}
}
type PersonInstanceType = InstanceType<typeof Person>;
const person: PersonInstanceType = {
name: "zhangsan",
age: 18,
};
当我们在 TypeScript 中创建动态类时，InstanceType可以用于检索动态实例的类型。
11. Parameters
Parameters 可以从函数类型Type的参数中使用的类型构造一个元组类型。其声明形式如下：
/**
* Obtain the parameters of a function type in a tuple
*/
type Parameters<T extends (...args: any) => any> = T extends (...args: infer P) => any ? P : never;
来看下面的例子：
const add = (x: number, y: number) => {
return x + y;
};
type FunctionParameters = Parameters<typeof add>;
// FunctionParameters 的类型：[x: number, y: number]
除此之外，还可以检测单个参数：
// "number"
type FirstParam = Parameters<typeof add>[0];
// "number"
type SecondParam = Parameters<typeof add>[1];
// "undefined"
type ThirdParam = Parameters<typeof add>[2];
Parameters 对于获取函数参数的类型以确保类型安全很有用，尤其是在使用第三方库时：
const saveUser = (user: { name: string; height: number; age: number }) => {
// ...
};
const user: Parameters<typeof saveUser>[0] = {
name: "zhangsan",
height: 180,
age: 18,
};
12. ConstructorParameters
ConstructorParameters 可以从构造函数的类型来构造元组或数组类型。其声明形式如下：
/**
* Obtain the parameters of a constructor function type in a tuple
*/
type ConstructorParameters<T extends abstract new (...args: any) => any> = T extends abstract new (...args: infer P) => any ? P : never;
它类似于参数，但适用于类构造函数：
class Person {
private name: string;
private age: number;
constructor(person: { name: string; age: number }) {
this.name = person.name;
this.age = person.age;
}
}
type ConstructorParametersType = ConstructorParameters<typeof Person>;
// ConstructorParametersType 的类型：[person: { name: string, age: number}]
与 Parameters 类型一样，当使用外部库时，它有助于确保构造函数接受我们传入的参数：
class Person {
private name: string;
private age: number;
constructor(person: { name: string; age: number }) {
this.name = person.name;
this.age = person.age;
}
}
const params: ConstructorParameters<typeof Person>[0] = {
name: "zhangsan",
age: 18,
};
13. NonNullable
NonNullable 通过从Type中排除null和undefined来创建新类型。它就等价于Exclude<T, null | undefined>。其声明形式如下：
/**
* Exclude null and undefined from T
*/
type NonNullable<T> = T extends null | undefined ? never : T;
来看下面的例子：
type Type = string | null | undefined;
// string
type NonNullableType = NonNullable<Type>;
这里就使用NonNullable将Type中的null和undefined剔除掉了。
函数重载
一句话概括：一个函数，参数可能有不同的类型，根据不同的参数类型，该函数的返回值可能也会有不同的类型，但是TS并不能智能的推断出传入不同类型参数，就给你返回不同的返回值，这个时候我们就需要人为的用as去推断返回值类型。
前置知识，js中一个函数是可以重复定义多次的，以最后一次为准。TS中是不允许这样的。
函数重载的两个组成部分：重载签名和实现签名
重载签名就是只需要实现函数的参数类型和返回值类型，不要实现函数体
实现签名就是定义一个同名的带有函数体的函数，并且这个函数要包含重载签名的所有参数类型和返回类型，而且在函数体内要尽可能将所有类型都进行判断，按需返回。注意实现重载函数只能定义一个
泛型
泛型（Generics）是指在定义函数、接口或类的时候，不预先指定具体的 类型，而在使用的时候再指定类型的一种特性。
泛型指的是类型参数化，即将原来某种具体的类型进行参数化。和定义函数参数一样，我们可以给泛型定义 若干个类型参数，并在调用时给泛型传入明确的类型参数。设计泛型的目的在于有效约束类型成员之间的关系， 比如函数参数和返回值、类或者接口成员和方法之间的关系。
也就是说在使用时候可以规定类型，让其动态起来，来解决某些问题。
泛型约束：泛型现在似乎可以是任何类型，但实际开发可能往往不是任意类型，需要给以一个范围，这种就叫'泛型约束'关键字('extends')泛型是具有当前指定的属性写法上T extends xxx
extends关键字在泛型约束时的意思是 T extends K T是K的子集；在判断语句中代表 T是否可以赋值给K(注意当K是对象形式的类型时，比如interface，我们要反过来理解，K是否是T的子集，只要K中的属性都在T里面就行了，也可以理解为T继承了K，T里面只要有K里面的属性就行了，T里面也可以有K里面没有的属性，这一点一定要注意)
type InferFirst<T extends unknown[]> = T extends [infer P, ...infer _] ? P : never
type InferLast<T extends unknown[]> = T extends [... infer _, infer Last] ? Last : never
type InferArray<T> = T extends (infer U)[] ? U : never
type InferPromise<T> =T extends Promise<infer U> ? U : never;
type InferString<T extends string> = T extends `${infer First}${infer _}` ? First : [];
interface Dictionary<T = any> {
[key: string]: T;
}
type StrDict = Dictionary<string>
type DictMember<T> = T extends Dictionary<infer V> ? V : never
type StrDictMember = DictMember<StrDict> // string
推断函数Promise的返回值
type PromiseType<T> = (args: any[]) => Promise<T>;
type UnPromisify<T> = T extends PromiseType<infer U> ? U : never;
// type UnPromisify<T> = T extends (args: any[]) => Promise<infer U> ? U : never; // 也可以这样写
async function stringPromise() {
return "string promise";
}
async function numberPromise() {
return 1;
}
interface Person {
name: string;
age: number;
}
async function personPromise() {
return { name: "Wayou", age: 999 } as Person;
}
type extractStringPromise = UnPromisify<typeof stringPromise>; // string
type extractNumberPromise = UnPromisify<typeof numberPromise>; // number
type extractPersonPromise = UnPromisify<typeof personPromise>; // Person
类型守护
其实就是先判断类型，缩小范围，再根据类型做应该做的事，
类型守卫包括switch、字面量恒等、typeof、instanceof、in 和自定义类型守卫
类型断言
两种写法：'<类型>值' 或者 '值 as 类型'
它没有运行时的影响，只是在编译阶段起作用。 TypeScript会假设你，程序员，已经进行了必须的检查。
Type和Interface
interface用于定义对象的结构和行为
type只是给类型起一个新名字，不会创建一个新的类型
相同点：
都支持扩展，interface用extends type用&
都支持定义对象和函数
不同点：
同名的interface会合并 同名的type会报错
type支持定义基本类型、联合类型和元祖类型，interface只能用于描述对象的结构和行为
interface可以被类实现 implements
使用接口的一些场景：
- 描述对象的形状和结构：如果需要定义一个具有特定属性和方法的对象结构，接口是更适合的选择。接口可以明确指定每个属性的类型和方法的签名。
- 类的实现。
- 继承其它接口。
使用类型别名的一些场景：
- 为现有类型起别名。
- 定义联合类型、交叉类型或其它复杂类型。
- 表示函数类型
数组元素转为type
// 这行代码执行后就是 '1' | '2' | '3' | '4'的联合类型
const arr = ['1', '2', '3', '4']
type arrType = (typeof arr)[number]
typeof
typeof xxx 是取xxx的类型，返回的都是xxx的原始类型。比如在ReturnType InstanceType ParamsType传入的类型，要先用typeof xxx一下再传入，不然会报错
keyof
keyof any === 'string' | 'number' | 'symbol' 意思是取出对象的键，因为只有这三种才能作为对象的键
重写Omit
type Omit<T, K extends keyof T> = {
[P in keyof T as P extends K ? never : P ]: T[P]
}
type Omit<T, K extends keyof T> = {
[P in keyof T as Exclude<T, K>]: T[P]
}
// as 的意思是重新映射，P循环的就是as后面的
// as 后面只能跟'string' | 'number' | 'symbol'
模板字面量类型
// 把一个对象的key进行转换
type Getters<T> = {
[K in keyof T as `get${Capitalize<K>}`]: () => T[K]
};
interface Person {
name: string;
age: number;
location: string;
}
type LazyPerson = Getters<Person>;
// LazyPerson 打印结果
// {
// getName: () => string;
// getAge: () => number;
// getLocation: () => string;
// }
type EventName<T extends string> = `${T}Changed`;
type Concat<S1 extends string, S2 extends string> = `${S1}-${S2}`;
type ToString<T extends string | number | boolean | bigint> = `${T}`;
type T0 = EventName<"foo">; // 'fooChanged'
type T1 = Concat<"Hello", "World">; // 'Hello-World'
type T2 = ToString<"阿宝哥" | 666 | true | -1234n>; // "阿宝哥" | "true" | "666" | "-1234"
type T3 = EventName<"foo" | "bar" | "baz">;
// "fooChanged" | "barChanged" | "bazChanged"
type T4 = Concat<"top" | "bottom", "left" | "right">;
// "top-left" | "top-right" | "bottom-left" | "bottom-right"
Uppercase（所有字母大写）、Lowercase（所有字母小写）、Capitalize（首字母大写） 和 Uncapitalize（首字母小写）
type GetterNmae<T extends string> = `get${Capitalize<T>}`;
type Cases<T extends string> = `${Uppercase<T>} ${Lowercase<T>} ${Capitalize<T>} ${Uncapitalize<T>}`;
type T5 = GetterNmae<'Foo'>; // "getFoo"
type T6 = Cases<'bar'>; // "BAR bar Bar bar"
结合 infer 关键字实现类型推断
type Direction = "left" | "right" | "top" | "bottom";
type InferRoot<T> = T extends `${infer R}${Capitalize<Direction>}` ? R : T;
type T7 = InferRoot<"marginRight">; // "margin"
type T8 = InferRoot<"paddingLeft">; // "padding"
