ts一些高级语法-关键字
发表于:2024-04-10 |

前言

本篇文章讲解一下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 = 'name' | 'age' | 'sex'
type keysType = keyof User

in

用来限制类型

1
2
3
4
5
6
7
8
9
10
// 表示 foo 定义的 key 必须包含 a 或 b 或 c
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;
}

// 上面的 People 等同于下面
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;
}

// User 满足 U,所以 TS 不会报错
const firstPerson: Foo<User> = {
sex: '男',
user: {
name: 'Codesigner',
age: 24
}
}

interface Water {
age:108200820
}

// Water 这个类型不满足 U,所以 TS 会报错
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

/**
因为 Animal 里的 action 存在,所以提取 action => 里的返回值,并用 R 表示。
以下等同于 type getType = number
*/
type getType = GetType<Animal>

/**
因为不存在 action 所以返回 T
以下等同于 type getType = boolean
*/
type getType = GetType<boolean>

typeof

typeof 可以用来复制某个变量里的类型声明
比如:

1
2
3
4
5
6
7
8
9
10
const user={
name:"Codesigner",
age:24
}
// 这里的User就是
//{
// name:string,
// age:number
//}
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
}
// 这里就相当于{name:string,age:number}
type OmitUser=Omit<User,'sex'>
// 这里就相当于{age:number}
type PickUser=Pick<User,'age'>
// 这里就相当于{name?:string,age?:string,sex?:string}
type PartialUser=Partial<User>

Exclude

排除某些类型,和omit很像

1
2
3
type User='codesigner'|'liming'
// 这里就相当于'codesigner'
type ExcludeUser=Exclude<User, 'liming'>

简单类型定义

这里那种简单的常用类型就不介绍了,比如number,string,boolean,any这种

PromiseLike

这个可以用来定义类似于Promise的类型

PropertyKey

这个给个等式大家就理解了
type PropertyKey = string | number | symbol

结语

本篇文章就到这里了,后续有用到或者新的,我会进行相应的补充。

上一篇:
JSDOC速通
下一篇:
使用jszip压缩解压文件