鱼肚的博客

发布于: 2021-06-14作者: 鱼肚最后更新: 2021-06-15

Typescript中的类型联动

问题说明

类型联动,指的是一个对象中,A属性的值变化,会引起B属性的类型变化。

假设有这样一个类型:

1type Component = {
2  type: 'button' | 'input' | 'select' | 'textarea';
3  payload: {
4    onChange: Function;
5    onClick: Function;
6    type: string;
7    placeholder: string;
8  };
9}

类型联动,指的是当 type 的值发生变化时,payload的类型也跟着变化,比如当type为'input'时,可能希望payload中包含onChange,而当type为'button'时,则不希望payload中包含onChange。

粗糙的解决方案

最粗糙的解决方案,是用 Union 的形式,将多种类型组合起来。

类似下面的形式:

1type ButtonComponent = {
2  type: 'button';
3  payload: {
4    onClick: Function;
5    type: string;
6  }
7}
8
9type InputComponent = {
10  type: 'input';
11  payload: {
12    onChange: Function;
13    placeholder: string;
14  }
15}
16
17// ... 将所有可能的类型写一遍
18
19// 最后,给一个union类型
20type Component = ButtonComponent | InputComponent | ... | OtherComponents
21// => {type: 'button', payload: {onClick: Function, type: string}} | {type: 'input', payload: {onChange: Function, placeholder: string}}

这种方法比较笨拙,因为它需要把每种可能的组合都写一遍。

手写类型的时候,还可以勉强用一下,当遇到需要类型推导的场景时,就不好使了。

类型推导

使用如下的代码,可以推导出我们想要的类型

1// 先定义一个类型映射关系
2type ComponentPayload = {
3  button: {
4    onClick: Function;
5    type: string;
6  }
7
8  input: {
9    onChange: Function;
10    placeholder: string;
11  }
12
13  // 其它略过不写
14}
15
16// 使用 keyof 获取到所有的 key
17type ComponentPayloadKeys = keyof ComponentPayload;
18// => 'button' | 'input'
19
20// 再结合类型推导,构造出valueof
21type ComponentPayloadValues = ComponentPayload[keyof ComponentPayload]
22// => { onClick: Function; type: string; } | { onChange: Function; placeholder: string; }
23
24// 如果先构造出 {type => {type, payload}} 的格式,就可以用上面的valueof的方式,获取到目标类型
25type Component = {
26  [T in keyof ComponentPayload]: {
27    type: T;
28    payload: ComponentPayload[T]
29  }
30}[keyof ComponentPayload]
31// => {type: 'button', payload: {onClick: Function, type: string}} | {type: 'input', payload: {onChange: Function, placeholder: string}}

至此,就大功告成了。

总结

TS中的类型跟随值变化,本质是还是类型跟随类型变化,只是TS中允许把值作为类型的一种。

通过keyof、Generic等操作生成Union类型,可以实现类型之间的联动。



0条评论