0%

ts一些技巧总结

一些学习资料

一本不错的 TS 书籍,已经买了实体书:

interface && type

两者几乎没有区别,但是 interface 可以合并多个相同的 interface,而 type 只能使用 & 进行连接。

1
2
3
4
5
6
7
8
9
interface A {
a: number;
b: number;
}

type B = {
a: number;
b: number;
}

区别:

1
2
3
4
5
6
7
8
9
10
11
12
interface A {
a: number;
}

interface A {
b: number;
}

const a: A = {
a: 3,
b: 4
}

typeof

typeof 可以取某个值的 type:
具体使用方法:

1
2
3
4
const a: number = 3;

// Equal to const b: number = 4
const b: typeof a = 4

在一些服务端项目里面,我们可以把一些需要的工具塞在context里面去,这个时候就需要typeof

1
import logger from './lo'

keyof

keyofObject.keys 有些类似,不过 keyof 取的是interface里面的键。

1
2
3
4
5
6
7
8
interface Point {
x: number;
y: number;
}

// type keys = 'x' | 'y'
// 这里keys会成为一个联合类型
type keys = keyof Point;

我们可以使用keyof来实现一个get函数来获取它的属性。

1
2
3
4
5
6
7
8
const data = {
a: 3,
hello: "world"
}

function get<T extends object, K extends keyof T>(obj: T, name: K): T[K] {
return o[name]
}

这里能同时兼具以下几个优点:

  1. 能够确认结果的返回类型
  2. 能够对key值进行一个约束

keyof, in

keyof 能够产生一个联合类型,in能够遍历枚举类型。

1
2
3
4
5
6
7
8
9
10
11
12
13
interface Foo {
name: string;
age: number
}

// T -> "name" | "age"
type T = keyof Foo

type keys = 'a' | 'b'
type Obj = {
[p in Keys]: any
}
// obj -> { a: any, b: any }

那么可以写一个将传入的属性变成可选项的类型

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

那么使用的时候就可以这样:

1
2
3
4
5
6
7
8
9
10
11
12
interface Foo {
name: string;
age: number;
}

type A = Partial<Foo>;

// 只能定义 name, age 中的属性,当然也可以不定义
const a: A = {
name: '1',
age: '3'
}

in的主要作用是取联合类型的值。主要用于数组和对象的构造。

1
2
3
4
type name = 'firstName' | 'lastName'
type IName = {
[key in name]: string;
};

但是in是不能用在interface上面,否则会出错。

ts定义函数

ts中类型系统中的函数为泛型操作符,最简单的方式就是使用type关键字:

1
2
// a simple operator
type foo<T> = T;

上面的代码转成JavaScript之后会成这个样子:

1
2
3
function foo (T) {
return T
}

这里的类型系统中的函数还支持对入参对约束:

1
2
// 对 T 进行约束
type foo<T extends string> = T;

这里就类似于这样的ts代码:

1
2
3
function foo (T: string) {
return T
}

同样也是能够设置默认值的:

1
type foo<T extends string = 'hello xyx'> = T

同理:

1
2
3
function foo (T: string = 'hello xyx') {
return T
}

但是这里是不能像JS里的函数一样支持剩余参数的,但是我们可以通过一些操作模拟出来。

类型支持条件判断

可以使用extends关键字来完成这一操作:

1
T extends U ? X : Y

结合之前的type这里可以用来模拟一下:

1
2
3
4
5
6
type num = 1;
type str = 'hello xyx'
type INumber = N extends number ? 'yeah' : 'no'

type res1 = INumber<num> // yeah
type res2 = INumber<str> // no

这里我们就相当于实现了一个简单的带判断逻辑的函数。