脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → TypeScript选且只选一个

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

 更新时间：2022年10月05日 08:44:03   作者：Rio_Kwok  
在开发中需要定义一个对象的类型,此类型必须包含某n个字段中的其中一种,这篇文章主要给大家介绍了关于TypeScript开发小状况记录之选且只选一个的相关资料,需要的朋友可以参考下

前言

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

背景

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

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

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

初步方案

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

于是，类型定义如下：

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>

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

// 正确
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

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

但是，转折来了！

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

// 正确，声明了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工具类型：

type PickOne<T> = {
    [K in keyof T]: Record<K, T[K]> & Partial<Record<Exclude<keyof T, K>, undefined>>
}[keyof T]

测试代码如下：

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
}

最后，类型定义代码如下：

interface ICodingLangRating {
    java: string
    cpp: string
    go: string
    js: string
}

type Engineer = {
    name: string
    gender: 'male' | 'female'
    age: number
} & PickOne<ICodingLangRating>

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

总结

到此这篇关于TypeScript开发小状况记录之选且只选一个的文章就介绍到这了,更多相关TypeScript选且只选一个内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

相关文章

  • 揭秘JavaScript Reduce的用法

    揭秘JavaScript Reduce的用法

    作为高级前端切图仔,我们经常遇到需要处理、聚合或转换数据的场景,JavaScript 的reduce()方法是一个强大的工具,它允许我们有效地迭代数组并累积单个值,从而简化了这些任务,本文将给大家揭秘JavaScript Reduce方法,需要的朋友可以参考下
    2023-09-09
  • javascript隐藏显示div的两种方式实例

    javascript隐藏显示div的两种方式实例

    这篇文章主要给大家介绍了关于javascript隐藏显示div的两种方式,实现的代码很简单,点击时先判断div是否是显示,如果div是显示就把div设置为隐藏,否则就变为显示,需要的朋友可以参考下
    2022-09-09
  • js图片轮播特效代码分享

    js图片轮播特效代码分享

    这篇文章主要介绍了js图片轮播特效，图片切换效果特别适合做产品演示，感兴趣的小伙伴可以参考下
    2015-09-09
  • ymyang 绘图 实例代码

    ymyang 绘图 实例代码

    非常不错的ymyang 绘图效果代码。
    2009-04-04
  • JS兼容所有浏览器的DOMContentLoaded事件

    JS兼容所有浏览器的DOMContentLoaded事件

    这篇文章主要介绍了JS兼容所有浏览器的DOMContentLoaded事件的相关资料，标准浏览器中，使用DOMContentLoaded事件即可实现我们的要求，注册事件处理函数也极为简单，感兴趣的朋友一起学习吧
    2018-01-01
  • JavaScript canvas实现刮刮乐案例

    JavaScript canvas实现刮刮乐案例

    这篇文章主要为大家详细介绍了JavaScript canvas实现刮刮乐案例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-10-10
  • sso跨域写cookie的一段js脚本(推荐)

    sso跨域写cookie的一段js脚本(推荐)

    下面小编就为大家带来一篇sso跨域写cookie的一段js脚本(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-05-05
  • 全面解析JavaScript中apply和call以及bind(推荐)

    全面解析JavaScript中apply和call以及bind(推荐)

    在javascript中apply、call和bind是三兄弟，很好的搭档，下面小编给大家全面解析JavaScript中apply和call以及bind的相关知识，感兴趣的朋友一起学习吧
    2016-06-06
  • javascript 开发之百度地图使用到的js函数整理

    javascript 开发之百度地图使用到的js函数整理

    这篇文章主要介绍了javascript 开发之百度地图使用到的js函数整理的相关资料,需要的朋友可以参考下
    2017-05-05
  • 如何在微信小程序实现一个幸运转盘小游戏

    如何在微信小程序实现一个幸运转盘小游戏

    这篇文章主要给大家介绍了关于如何在微信小程序实现一个幸运转盘小游戏的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2021-04-04

最新评论