Ts 工具类型

断言操做符!

! 的做用是断言某个变量不会是 null/undefined，告诉编辑器中止报错

const obj = {
	name: '牧码的星星'
}
const a = obj!.name // 假设 obj是你从后端获取的获取

肯定 obj.name 必定是存在的且不是null/undefined，使用! 只是消除编辑器报错，不会对运行有任何影响。
属性或者参数中使用 !，表示强制解析（告诉 typescript 编译器，这里必定有值）; 变量后使用 !: 表示类型推荐排除 null/undefined。

链判断运算符 ?.

const orderId = response.result.data.orderId

上面这种写法，很容易出现这种问题 orderId is undefined，稍微有些经验的咱们立马就能想到，确定是代码中 response.result.data 为 null 或者 undefined ，这样，你确定获取不到 orderId。因此经验丰富的咱们在遇到获取层级比较多的对象的时候，通常都是像下面这样写。

// 正确的写法
const orderId = (response && response.result && response.result.data && response.result.data.orderId) || ''

咱们可使用 ?.来简化上面的代码

const orderId = response?.result?.data?.orderId || ''

上面代码使用了?.运算符，直接在链式调用的时候判断，左侧的对象是否为null或undefined。若是是的，就再也不往下运算，而是返回undefined。
?. 支持以下语法

obj?.prop // 对象属性
obj?.[expr] // 对象属性
arr?.[index] // 获取数据中 index 下标对应的值
func?.(...args) // 函数或对象方法的调用

typeof

Ts中的 typeof 是根据已有的值来获取值的类型来简化代码的书写

const perSon = {
	name: '张三',
	age: 18
}
const per = (obj: typeof perSon) => {
	console.log(obj)
}

keyof

获取接口、对象（配合 typeof）、类等的所有属性名组成的联合类型。
获取对象的key组成的联合类型

const formDate = {
	name: '张三',
	age: 18
}
const useTimeFormatHook = (key: keyof typeof formDate.value) => {
	//key为formDate类型组成的联合类型  string|number
}

Parameters

获取函数的参数类型关键词
得到的是包含函数所有形参类型的一个数组

Parameters<typeof 函数名称>

function test(a: string, b: number) {
	return {
		a,
		b
	}
}

type testType = Parameters<typeof test>
// type testtype = [a: string, b: number]

// 获取的是 类型值
type testType1 = Parameters<typeof test>[1]
// type testtype1 = number

ReturnType

获取函数的返回值类型关键词

ReturnType<typeof 函数>

示例

interface typeb {
	name: string
	age: number
}

let person: typeb = {
	name: 'xiaoming',
	age: 12
}

function test(person: typeb) {
	return person
}

type testtype2 = ReturnType<typeof test>
// type testtype2 = typeb

'in' 能够遍历枚举类型

type Keys = 'a' | 'b' | 'c'
type Obj = {
	[T in Keys]: string
}
// in 遍历 Keys，并为每一个值赋予 string 类型

// type Obj = {
//     a: string,
//     b: string,
//     c: string
// }

Partial<T>

将类型的属性变成可选

功能是将类型的属性变成可选，注意这是浅Partial

type Partial<T> = {
	[P in keyof T]?: T[P]
}

举例说明

interface UserInfo {
	id: string

	name: string
}

// error：Property 'id' is missing in type '{ name: string; }' but required in type 'UserInfo'

const xiaoming: UserInfo = {
	name: 'xiaoming'
}

使用 Partial<T>

type NewUserInfo = Partial<UserInfo>

const xiaoming: NewUserInfo = {
	name: 'xiaoming'
}

这个 NewUserInfo 就至关于

interface NewUserInfo {
	id?: string

	name?: string
}

可是 Partial<T> 有个局限性，就是只支持处理第一层的属性，若是个人接口定义是这样的

interface UserInfo {
	id: string

	name: string

	fruits: {
		appleNumber: number

		orangeNumber: number
	}
}

type NewUserInfo = Partial<UserInfo>

// Property 'appleNumber' is missing in type '{ orangeNumber: number; }' but required in type '{ appleNumber: number; orangeNumber: number; }'.

const xiaoming: NewUserInfo = {
	name: 'xiaoming',
	fruits: {
		orangeNumber: 1
	}
}

能够看到，第二层之后就不会处理了，若是要处理多层，就能够本身经过Conditional Types[2]

type DeepPartial<T> = {
	// 若是是 object，则递归类型
	[U in keyof T]?: T[U] extends object ? DeepPartial<T[U]> : T[U]
}
type PartialedWindow = DeepPartial<Window> // 如今window 上全部属性都变成了可选啦

Required

将类型的属性变成必选

type Required<T> = {
	[P in keyof T]-?: T[P]
}

其中-? 是表明移除 ? 这个 modifier 的标识。再拓展一下，除了能够应用于 ? 这个 modifiers ，还有应用在 readonly

，好比Readonly<T> 这个类型

type Readonly<T> = {
	readonly [p in keyof T]: T[p]
}

Pick

从某个类型中挑出一些属性出来

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

interface UserInfo {
	id: string

	name: string
}

type NewUserInfo = Pick<UserInfo, 'name'> // {name: string;}

能够看到 NewUserInfo 中就只有个 name 的属性了。

能够得到根据 K 中全部可能值来设置 key 以及 value 的类型

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

举个例子

type CurRecord = Record<'a' | 'b' | 'c', UserInfo> // { a: UserInfo; b: UserInfo; c: UserInfo; }

Mutable<T>

将类型的属性变成可修改

功能是将类型的属性变成可修改，这里的 -指的是去除。-readonly 意思就是去除只读，也就是可修改啦。

type Mutable<T> = {
	-readonly [P in keyof T]: T[P]
}

Readonly<T>

类型的属性变成只读

type Readonly<T> = {
	readonly [P in keyof T]: T[P]
}

Omit

从某个类型中挑出除了某些属性之外的属性

type Omit<T, K extends keyof any> = Pick<T, Exclude<keyof T, K>>