前言
本篇文章讲解一下TS的一些高级语法,可能有的咱们已经常用了,有的还是不太常用。
语法
直接开始咱们的语法介绍环节
keyof
keyof 可以获取对象里的所有 key ,跟 JS 中的 Object.keys() 类似,假如我们想要获取某个 interface 接口里的所有 key,就可以用到 keyof,我们来看下例子
1 2 3 4 5 6 7 8
| interface User { name: string; age: number; sex: string; }
type keysType = keyof User
|
in
用来限制类型
1 2 3 4 5 6 7 8 9 10
| type Foo = { [K in 'a' | 'b' | 'c']: number } const obj: Foo = { a: 100, b: 200, c: 300, d: 400 }
|
extends
用法一:
合并接口类型
1 2 3 4 5 6 7 8 9 10 11 12 13 14
| interface Action { walk: () => void } interface People extends Action{ name: string; age: number; }
interface Peoople { name: string; age: number; walk: () => void }
|
用法二:
泛型约束
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29
| interface U { name: string; age: number; } type Foo<T extends U> = { sex: string; user: T }
interface User { name: string; age: number; }
const firstPerson: Foo<User> = { sex: '男', user: { name: 'Codesigner', age: 24 } }
interface Water { age:108200820 }
const secondPerson: Foo<Water> = {}
|
索引签名
这里有俩种写法
第一种
1 2 3 4 5
| interface User { name: string; age: number; [k: string]: any }
|
第二种
1 2 3 4
| type User = Record<string, { name: string; age: number; }>
|
这时候我们传这个类型的对象只需要age,name必传,其他的随意就行,但是key要求是string
infer
infer 它就是一个提取类型的作用,
而且要使用它的是有前提条件的,它是必须由extends 和 ? 构成组合 ,我们来看下例子
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
| interface Animal { name: string; age: number; action: () => number }
type GetType<T> = T extends { action: () => infer R} ? R : T
type getType = GetType<Animal>
type getType = GetType<boolean>
|
typeof
typeof 可以用来复制某个变量里的类型声明
比如:
1 2 3 4 5 6 7 8 9 10
| const user={ name:"Codesigner", age:24 }
type User=typeof user
|
Omit & Pick & Partial
这几个就相当于升级版本的typeof,比如Omit就是去除typeof中的哪几个,Pick就是挑选其中几个,Partial就是将参数全部变成可选,相当于全部加了个?
1 2 3 4 5 6 7 8 9 10 11
| interface User{ name:string, age:number, sex:string }
type OmitUser=Omit<User,'sex'>
type PickUser=Pick<User,'age'>
type PartialUser=Partial<User>
|
Exclude
排除某些类型,和omit很像
1 2 3
| type User='codesigner'|'liming'
type ExcludeUser=Exclude<User, 'liming'>
|
简单类型定义
这里那种简单的常用类型就不介绍了,比如number,string,boolean,any这种
PromiseLike
这个可以用来定义类似于Promise的类型
PropertyKey
这个给个等式大家就理解了
type PropertyKey = string | number | symbol
结语
本篇文章就到这里了,后续有用到或者新的,我会进行相应的补充。