广告位联系
返回顶部
分享到

TypeScript开发小状况记录之选且只选一个

JavaScript 来源:互联网 作者:佚名 发布时间:2022-10-08 08:22:25 人浏览
摘要

在项目内,使用TypeScript的过程中遇到了一些状况、报错或棘手的情况,决定开一个系列记录遇到的问题和我的解决方法。 背景 在项目开发中,很多时候会遇到一种场景,需要定义一个

在项目内,使用TypeScript的过程中遇到了一些状况、报错或棘手的情况,决定开一个系列记录遇到的问题和我的解决方法。

背景

在项目开发中,很多时候会遇到一种场景,需要定义一个对象的类型,此类型必须包含某n个字段中的其中一种。

例如,我要定义一个工程师(Engineer)的对象,里面包括姓名(name),性别(gender),年龄(age)和一门编程语言(java/cpp/go/js四选一)的评价。

显然,前三个字段都是很简单的,但是第四个就有点麻烦了。首先,第四个字段的key是可以不一样(甚至value也有可能不同),其次字段只能从给定的里面4选1。

初步方案

一开始是考虑使用可选或联合类型,但是发现没有办法进行4选1的限制,对于没有编程语言字段,或者多个编程语言字段的情况并没有很好的限制。最后只能使用泛型,再使用时进行显式的声明。

于是,类型定义如下:

1

2

3

4

5

6

7

8

9

10

11

12

interface ICodingLangRating {

    java: string

    cpp: string

    go: string

    js: string

}

 

type Engineer<K extends keyof ICodingLangRating> = {

    name: string

    gender: 'male' | 'female'

    age: number

} & Pick<ICodingLangRating, K>

对该声明的校验代码如下:

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

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

// 正确

const candidate: Engineer<'java'> = {

    name: 'Jack',

    gender: 'male',

    age: 22,

    java: 'fabulous'

}

 

// 错误,声明了java,但是却同时定义了java和go字段

const candidate_1: Engineer<'java'> = {

    name: 'Jack',

    gender: 'male',

    age: 22,

    java: 'fabulous',

    go: 'not bad'

}

 

// 错误,声明了java,但是类型不正确

const candidate_2: Engineer<'java'> = {

    name: 'Jack',

    gender: 'male',

    age: 22,

    java: 666

}

 

// 错误,声明了java,但是却定义了go字段

const candidate_3: Engineer<'java'> = {

    name: 'Jack',

    gender: 'male',

    age: 22,

    go: 'not bad'

}

 

// 错误,声明了java,但是却同时定义了cpp和go字段

const candidate_4: Engineer<'java'> = {

    name: 'Jack',

    gender: 'male',

    age: 22,

    cpp: 'unknown',

    go: 'not bad'

}

 

// 错误,声明了java,但是却没有定义java字段

const candidate_5: Engineer<'java'> = {

    name: 'Jack',

    gender: 'male',

    age: 22

}

 

// 错误,声明了ICodingLangRating中不存在的python

const candidate_6: Engineer<'python'> = {

    name: 'Jack',

    gender: 'male',

    age: 22,

    python: 'just so so'

}

从校验代码可以看出,针对各种不符合期望的情况:

  • 声明a,却定义a和b
  • 声明a,但定义a的类型不正确
  • 声明a,却定义b
  • 声明a,却定义b和c
  • 声明a,却没有定义a
  • 声明不合法的f

都能做出正确的限制,确保在业务场景的代码中,有且只有一个合法范围的字段。

但是,转折来了!

在后来的使用中,我们发现,其实这个解决方案只是一个弱限制,如果在泛型的显式声明中,传入联合类型的话,那还是可以绕过有且只有一个编程语言字段的限制。

1

2

3

4

5

6

7

8

// 正确,声明了java和go,并同时定义了java和go字段

const candidate_1: Engineer<'java' | 'go'> = {

    name: 'Jack',

    gender: 'male',

    age: 22,

    java: 'fabulous',

    go: 'not bad'

}

难道就真的没有办法做到只能选择一个的限制么?

终极方案

根据上面的尝试,目前我们还缺少的是如何阻止同时有2个或以上的合法字段出现。最笨的方式就是为每一个语言都定义一个类似{ langName: string }这样的类型然后通过extends或者联合类型使用,但是显然这样就没有办法做到在其它情况通用。

而通过官方现成的工具类型,由于都是支持字面量和联合类型,没有办法筛选出只包含一个字段的类型。就在这时,我想到,是不是可以定义出一个类型,包含全部字段,但是只有一个字段是正确有意义,其他字段都是无意义的呢。

最终,我就构造出下面这个PickOne工具类型:

1

2

3

type PickOne<T> = {

    [K in keyof T]: Record<K, T[K]> & Partial<Record<Exclude<keyof T, K>, undefined>>

}[keyof T]

测试代码如下:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

type OneLang = PickOne<ICodingLangRating>

 

// 正确

const lang: OneLang = {

    java: 'good'

}

 

// 错误

const lang2: OneLang = {

    python: 'unknown'

}

 

// 错误

const lang3: OneLang = {

    java: 'good',

    go: 'good'

}

 

// 错误

const lang4: OneLang = {

    java: 123

}

最后,类型定义代码如下:

1

2

3

4

5

6

7

8

9

10

11

12

interface ICodingLangRating {

    java: string

    cpp: string

    go: string

    js: string

}

 

type Engineer = {

    name: string

    gender: 'male' | 'female'

    age: number

} & PickOne<ICodingLangRating>

使用了这个PickOne工具类型,我不需要在使用的时候显式的指定编程语言,甚至还能在其它类似的场景使用


版权声明 : 本文内容来源于互联网或用户自行发布贡献,该文观点仅代表原作者本人。本站仅提供信息存储空间服务和不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权, 违法违规的内容, 请发送邮件至2530232025#qq.cn(#换@)举报,一经查实,本站将立刻删除。
原文链接 : https://juejin.cn/post/7150316226009382919
相关文章
  • 本站所有内容来源于互联网或用户自行发布,本站仅提供信息存储空间服务,不拥有版权,不承担法律责任。如有侵犯您的权益,请您联系站长处理!
  • Copyright © 2017-2022 F11.CN All Rights Reserved. F11站长开发者网 版权所有 | 苏ICP备2022031554号-1 | 51LA统计