类型推断
基于赋值表达式推断类型的能力称之为“类型推断”。
在 TypeScript 中，具有初始化值的变量、有默认值的函数参数、函数返回值的类型都可以根据上下文推断出来。比如能根据 return 语句推断函数返回的类型。
let str = 'hello' // string
let num = 2 // number
const bar = 'bar' // 'bar' 类型
// 推断返回值类型为 number
function add(a: number, b: number) {
return a + b
}
上下文推断
通过变量所在的上下文环境推断变量的类型。
type Add = (a: number, b: number) => number
const add: Add = (a, b) => {
return a + b
}
// 推断出 a, b, 函数返回值都是 number 类型
字面量类型
在 TypeScript 中，字面量不仅可以表示值，还可以表示类型，即所谓的字面量类型。
目前，TypeScript 支持 3 种字面量类型：字符串字面量类型、数字字面量类型、布尔字面量类型，对应的字符串字面量、数字字面量、布尔字面量分别拥有与其值一样的字面量类型，示例如下：
let num: 3 = 3
let bool: true = true
let str: 'xiaomi' = 'xiaomi'
字面量类型是集合类型的子类型，它是集合类型的一种更具体的表达。
let specifiedStr: 'this is string' = 'this is string'
let str: string = 'any string'
specifiedStr = str // ts(2322) 类型 '"string"' 不能赋值给类型 'this is string'
str = specifiedStr // ok
实际上，定义单个的字面量类型并没有太大的用处，真正的应用场景是可以把多个字面量类型组合成一个联合类型，用于描述拥有明确成员的集合。
type Direction = 'up' | 'down'
通过使用字面量类型组合的联合类型，可以限制函数的参数为指定的字面量类型集合，然后编译器会检查参数是否是指定的字面量类型集合里的成员。因此，相较于使用 string 类型，使用字面量类型（组合的联合类型）可以将函数的参数限定为更具体的类型。不仅提升程序的可读性，还保证了函数的参数类型。
类型拓宽
Literal Widening（字面量类型拓宽）
所有通过 let 或 var 定义的变量、函数的形参、对象的非只读属性，如果满足指定了初始值且未显式添加类型注解的条件，那么它们推断出来的类型就是指定的初始值字面量类型拓宽后的类型，就是字面量类型拓宽。
let str = 'this is string' // 类型是 string
let strFun = (str = 'this is string') => str // 类型是 (str?: string) => string;
const specifiedStr = 'this is string' // 类型是 'this is string'
let str2 = specifiedStr // 类型是 'string'
let strFun2 = (str = specifiedStr) => str // 类型是 (str?: string) => string;
基于字面量类型拓宽的条件，可以通过如下所示代码添加显示类型注解控制类型拓宽行为。
const specifiedStr: 'this is string' = 'this is string' // 类型是 '"this is string"'
let str2 = specifiedStr // 即便使用 let 定义，类型是 'this is string'
除了字面量类型拓宽之外，TypeScript 对某些特定类型值也有类似 "Type Widening" （类型拓宽）的设计。
比如对 null 和 undefined 的类型进行拓宽，通过 let、var 定义的变量如果满足未显式声明类型注解且被赋予了 null 或 undefined 值，则推断出这些变量的类型是 any。
let x = null // 类型拓宽成 any
let y = undefined // 类型拓宽成 any
Type Narrowing （类型缩小）
在 TypeScript 中，可以通过某些操作将变量的类型由一个较为宽泛的集合缩小到相对较小、较明确的集合，这就是类型缩小。
比如，使用类型守卫将形参的类型从 any 缩小到明确的类型：
const func = (foo: any) => {
if (typeof foo === 'string') {
return foo // string
} else if (typeof foo === 'number') {
return foo // number
}
return null
}
还可以使用类型守卫将联合类型缩小到明确的子类型：
const func = (foo: string | number) => {
if (typeof foo === 'string') {
return foo // string
} else {
return foo // number
}
}
也可以通过字面量类型等值判断（===）或其他控制流语句（包括但不限于 if、三目运算符、switch 分支）将联合类型收敛为更具体的类型，如下代码所示：
type Color = 'green' | 'red' | 'gray'
const getStatus = (status: Color) => {
if (status === 'green') return status
if (status === 'red') return status
if (status === 'gray') return status
}
大致总结：
let 声明的简单类型字面量会拓宽类型，const 声明的简单类型字面量会收窄，const 声明的对象变量会自动推断对应的类型，可以用 as const 收窄，让每一个 key 都是固定类型（只读【readonly】的值）
类型谓词（is）
TypeScript 中，函数还支持另外一种特殊的类型描述：
function isString(s): s is string {
// 类型谓词
return typeof s === 'string'
}
function isNumber(n: number) {
return typeof n === 'number'
}
function operator(x: unknown) {
if (isString(x)) {
// ok x 类型缩小为 string
}
if (isNumber(x)) {
// ts(2345) unknown 不能赋值给 number
}
}
分布式有条件类型
有条件的类型会以一个条件表达式进行类型关系检测，从而在两种类型中选择其一，使用关键字 extends 配合三目运算符：
T extends U ? X : Y
如果 extends 前面是简单的条件判断，则直接判断前面的类型是否可分配给后面的类型。
若 extends 前面的类型是泛型，且泛型传入的是联合类型时，则会依次判断该联合类型的所有子类型是否可分配给 extends 后面的类型（是一个分发的过程）。
即 T extends U ? X : Y，若 T 的类型为 A | B | C，则会被解析为(A extends U ? X : Y) | (B extends U ? X : Y) | (C extends U ? X : Y)。
// type A1 = 1
type A1 = 'x' extends 'x' ? 1 : 2
// type A2 = 2
type A2 = 'x' | 'y' extends 'x' ? 1 : 2
// type A3 = 1 | 2
type P<T> = T extends 'x' ? 1 : 2
type A3 = P<'x' | 'y'>
type StrOrNum<T> = T extends string ? T : number
type Str = StrOrNum<string>
// null undefined
type Str<T> = T extends null | undefined ? T : never
type Strs = StrNull<string> // never
type StrNull<T> = T extends string | null | undefined ? T : never
type Strs = StrNull<string | number> // string | number
如果用于简单的条件判断，则是直接判断前面的类型是否可分配给后面的类型
const 断言
interface Info {
readonly name: string
readonly age: number
}
const info: Info = {
name: 'hack',
age: 23
}
// info.age = 4 // Error: ts(2540) age 为只读属性
// 等价于
// 使用 const 断言
const obj = {
name: 'jack',
age: 34
} as const
obj.age = 5 // Error: ts(2540) age 为只读属性
还可以将数组转成 readonly 元组
const arr = ['str', 12] as const
arr[1] = 55 // 无法为“1”赋值，因为它是只读属性。ts(2540)
typeof 操作符
typeof 操作符用来获取一个变量或对象的类型。也就是说 TS 对 typeof 操作符做了扩展：
type Person = {
name: string
age: number
}
const person: Person = {
name: 'xiaomi',
age: 18
}
type Human = typeof person
// type Human = {
// name: string
// age: number
// }
keyof
对于任何类型 T，keyof T 的结果为该类型上所有公共属性名的字符串或数字的组成的联合类型。
type Point = { x: number; 1: number }
type Keys = keyof Point
/**
Keys 的类型为
type Keys = 'x' | 1
*/
如果该类型具有 string 或 number 索引签名，keyof 则将返回这些类型：
type Arrayish = { [n: number]: unknown }
type A = keyof Arrayish
// type A = number
type Mapish = { [k: string]: boolean }
type M = keyof Mapish
// type M = string | number
M 类型是 string | number，是因为 JavaScript 对象键始终会强制转换为字符串，因此 obj[0] === obj["0"]
根据 TS 中对象的值或键创建联合类型
从对象的值或键创建联合类型：
- 用
as const将对象的属性设置为readonly - 用 `keyof typeof1 获取对象中键的类型
- 使用键来获取值的并集
// 👇️ const obj: {readonly name: "Bobby Hadz"; readonly country: "Chile";}
const obj = {
name: 'Bobby Hadz',
country: 'Chile',
} as const;
// 👇️ type UValues = "Bobby Hadz" | "Chile"
type UValues = (typeof obj)[keyof typeof obj];
// 👇️ type UKeys = "name" | "country"
type UKeys = keyof typeof obj;
- 使用as const声明对象是一个只读的
- 使用typeof 获取对象的类型
- 使用keyof typeof 获取对象key的联合
T[K] 索引访问操作符
T[keyof K]的方式，获取到的是 T 中的 key 且同时存在于 K 时的类型组成的联合类型。
如果[]中的 key 有不存在 T 中，则是 any；因为 TS 也不知道该 key 最终是什么类型，所以是 any；且也会报错。
interface Eg {
name: string
readonly age: number
}
// string
type V1 = Eg['name']
// string | number
type V2 = Eg['name' | 'age']
// any
type V3 = Eg['name' | 'age2222'] // Error
// string | number
type V4 = Eg[keyof Eg1]
映射类型
typeScript 提供了从旧类型中创建新类型的一种方式 — 映射类型。 在映射类型里，新类型以相同的形式去转换旧类型里每个属性。
需要使用关键字in：
interface Ra {
name: string
age: number
}
type ReadonlyRa<T> = {
readonly [K in keyof T]: T[K]
}
const ra: ReadonlyRa<Rabbit> = {
name: 'jack',
age: 3
}
! 非空断言操作符
x! 将从 x 值域中排除 null 和 undefined。比如给某一个元素绑定点击事件
// const ele: HTMLElement = document.getElementById('#app')
// 因为ele 可能的值为 null 或 DOM节点。但是我们确定 ele 一定不为null，则通过添加 `!`非空断言运算符
const ele: HTMLElement = document.getElementById('#app')!
ele.addEventListener('click', (e: Event) => {
//...
})
?? 空值合并运算符
|| 或 运算符是左侧为 falsy 时，返回右侧值。
null || 3 // 3
undefined || 3 // 3
false || 3 // 3
'' || 3 // 3
;-0 || 3 // 3
0 || 3 // 3
0n || 3 // 3
NaN || 3 // 3
而 ?? 运算符是只有左侧的值为 null 或 undefined 时，才返回右侧的操作数，否则返回左侧的值。
null ?? 3 // 3
undefined ?? 3 // 3
false ?? 3 // false
注意：不能与 && 或 || 操作符共用
空值合并运算符 ?? 不能直接与 && 和 || 操作符组合使用。这种情况下会抛出 SyntaxError。
// '||' and '??' operations cannot be mixed without parentheses.(5076)
null || undefined ?? 'foo' // raises a SyntaxError
// '&&' and '??' operations cannot be mixed without parentheses.(5076)
true && undefined ?? 'foo' // raises a SyntaxError
但当使用括号来显式表明优先级时是可行的，比如：
;(null || undefined) ?? 'foo' // 'foo'
内置工具类型
联合类型
Exclude<T, U>
Exclude<T, U> 提取存在于 T，但不存在于 U 的类型组成的联合类型，通俗的说：从联合类型中去除指定的类型。
type Keys = Exclude<'key1' | 'key2', 'key2'>
// type Keys = 'key1'
实现：
type Exclude<T, U> = T extends U ? never : T
never 表示一个不存在的类型，而且与其他类型联合后是没有 never 的
Extract<T, U>
Extract<T, U> 提取联合类型 T 和联合类型 U 的所有交集。通俗地说：从联合类型中提取指定的类型。
type Keys = Extract<'key1' | 'key2', 'key1'>
// type Keys = 'key1'
实现：
type Extract<T, U> = T extends U ? T : never
NonNullable
NonNullable 的作用是从联合类型中去除 null 或者 undefined 的类型。
type T = NonNullable<string | number | undefined | null> // => string | number
实现：
type NonNullable<T> = Exclude<T, null | undefined>
// 或者
type NonNullable<T> = T extends null | undefined ? never : T
Record
Record<K, T> 用来构造一个类型，属性为联合类型中的每个子类型，属性类型为 T。
type Eg = Record<'a' | 'b', string>
/**
type Eg = {
a: string
b: string
}
/*
实现：
type Record<K extends keyof any, T> = {
[P in K]: T
}
注意：keyof any 得到的是 string | number | symbol，原因在于 key 的类型只能为 string | number | symbol
操作接口类型
interface Person {
name: string
age?: number
weight?: number
}
Partial<T>
将类型 T 所有属性设置成可选的
type PartialPerson = Partial<Person>
// 相当于
interface PartialPerson {
name?: string
age?: number
weight?: number
}
实现：
type Partial<T> = {
[P in keyof T]?: T[P]
}
将指定的 key 设置成可选的
type PratialOptionalPerson = PratialOptional<Person, 'name'>
//相当于
interface PratialOptionalPerson {
name?: string
}
实现：
type PratialOptional<T, K extends keyof T> = {
[P in K]?: T[K]
}
Required
将给定类型的所有属性变为必选项
interface Person {
name: string
age?: number
weight?: number
}
type RequiredPerson = Required<Person>
// 相当于
interface RequiredPerson {
name: string
age: number
weight: number
}
Readonly
将类型 T 的所有属性设置成只读的
type ReadonlyPerson = Readonly<Person>
// 相当于
interface ReadonlyPerson {
readonly name: string
readonly age?: number
readonly weight?: number
}
实现：
type Readonly<T> = {
readonly [P in keyof T]: T[P]
}
将指定的 key 设置成只读的：
type ReadonlyOptional<T, K extends keyof T> = {
readonly [P in K]: T[P]
}
Pick
选取一组属性，组成新的类型
type NewPerson = Pick<Person, 'name' | 'age'>
// 相当于
interface NewPerson {
name: string
age?: number
}
实现：
type Pick<T, K extends keyof T> = {
[P in K]: T[P]
}
Omit<T, K>
与 Pick 相反，Omit 是去除指定的属性之后返回的新类型
type NewPerson = Omit<Person, 'weight'>
// 相当于
interface NewPerson {
name: string
age?: number
}
实现：
- 方式 1
type Omit = Pick<T, Exclude<keyof T, K>>
- 方式 2
type Omit<T, K extends keyof any> = {
[P in Exclude<keyof T, K>]: T[P]
}
以上操作接口的工具类型都使用了映射类型。通过映射类型，可以对原类型的属性进行重新映射组成新的的类型。
同态和非同态
- Partial、Readonly 和 Pick 都属于同态的，也就是其实现需要输入类型 T 来拷贝属性，因此属性修饰符（readonly、?）都会被拷贝
type AP = Pick<{ readonly a?: string; b: number }, 'a'>
/**
type AP = {
readonly a?: string | undefined
}
*/
以上可以看出属性修饰符 readonly 和 ? 都被拷贝了。
- Record 是非同态的，不需要拷贝属性，因此不会拷贝属性修饰符
为什么 Pick 拷贝了属性，而 Record 没有拷贝？
因为 Pick 的实现中，P in K（本质是 P in keyof T），T 为输入的类型，而 keyof T 则遍历了输入类型；而 Record 的实现中，并没有遍历所有输入的类型，K 只是约束为 keyof any 的子类型即可。
Pick、Partial、readonly 这几个类型工具，无一例外，都是使用到了 keyof T 来辅助拷贝传入类型的属性。
函数类型
Parameters
获取函数的参数类型，将每个参数类型放在一个元组中
type T0 = Parameters<() => void> // []
type T1 = Parameters<(x: number, y?: string) => void> // [x: number, y?: string]
实现：
type Parameters<T extends (...args: any) => any> = T extends (
...args: infer P
) => any
? P
: never
ReturnType
用来获取函数的返回类型
type T0 = ReturnType<() => void> // => void
type T1 = ReturnType<() => string> // => string
实现：
type ReturnType<T extends (...args: any) => any> = T extends (
...args: any
) => infer R
? R
: any
ThisParameterType
用来获取函数的 this 参数类型
type T = ThisParameterType<(this: Number, x: number) => void> // Number
实现：
type ThisParameterType<T> = T extends (this: infer U, ...args: any[]) => any
? U
: unknown
OmitThisParameter
用来去除函数类型中的 this 类型。如果传入的函数类型没有显式声明 this 类型，那么返回的仍是原来的函数类型
type T = OmitThisParameter<(this: Number, x: number) => string> // (x: number) => string
实现：
type OmitThisParameter<T> = unknown extends ThisParameterType<T>
? T
: T extends (...args: infer A) => infer R
? (...args: A) => R
: T
字符串类型
Uppercase
字符串字面量转换成大写字母
type T = Uppercase<'Hello'> // => 'HELLO'
Lowercase
字符串字面量转换成小写字母
type T = Lowercase<'HElO'> // => 'hello'
Capitalize
字符串的第一个字母转为大写字母
type T = Capitalize<'hello'> // => 'Hello'
Uncapitalize
字符串第一个字母转成小写
type T = Uncapitalize<'Hello'> // => 'hello'
