首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在Typescript中使用布尔值区分联合

在 TypeScript 中,使用布尔值来区分联合类型是一种常见的模式,通常称为“标签联合”或“判别联合”。这种模式通过在每个联合成员中添加一个共同的布尔属性来区分不同的类型。

示例

假设我们有一个联合类型 Shape,它可以是 CircleSquare。我们可以使用一个布尔属性 isCircle 来区分这两种类型。

定义联合类型

代码语言:javascript
复制
interface Circle {
    isCircle: true;
    radius: number;
}

interface Square {
    isCircle: false;
    sideLength: number;
}

type Shape = Circle | Square;

在这个例子中,CircleSquare 都有一个共同的布尔属性 isCircle,但它们的值不同:CircleisCircletrue,而 SquareisCirclefalse

使用联合类型

我们可以使用类型保护来区分联合类型的不同成员:

代码语言:javascript
复制
function getArea(shape: Shape): number {
    if (shape.isCircle) {
        // TypeScript 知道 shape 是 Circle
        return Math.PI * shape.radius * shape.radius;
    } else {
        // TypeScript 知道 shape 是 Square
        return shape.sideLength * shape.sideLength;
    }
}

// 示例用法
const myCircle: Circle = { isCircle: true, radius: 5 };
const mySquare: Square = { isCircle: false, sideLength: 10 };

console.log(getArea(myCircle)); // 输出: 78.53981633974483
console.log(getArea(mySquare)); // 输出: 100

解释

  1. 定义联合类型
    • CircleSquare 接口都有一个共同的布尔属性 isCircle
    • Shape 类型是 CircleSquare 的联合类型。
  2. 类型保护
    • getArea 函数中,我们使用 if (shape.isCircle) 来检查 isCircle 属性。
    • TypeScript 会根据 isCircle 的值自动推断 shape 的具体类型。
    • 如果 isCircletrue,TypeScript 知道 shapeCircle 类型。
    • 如果 isCirclefalse,TypeScript 知道 shapeSquare 类型。

其他示例

你也可以使用其他布尔属性来区分联合类型。例如,假设我们有一个联合类型 Vehicle,它可以是 CarBike,我们可以使用布尔属性 isCar 来区分这两种类型:

代码语言:javascript
复制
interface Car {
    isCar: true;
    numberOfDoors: number;
}

interface Bike {
    isCar: false;
    hasPedals: boolean;
}

type Vehicle = Car | Bike;

function describeVehicle(vehicle: Vehicle): string {
    if (vehicle.isCar) {
        return `This car has ${vehicle.numberOfDoors} doors.`;
    } else {
        return `This bike ${vehicle.hasPedals ? 'has' : 'does not have'} pedals.`;
    }
}

// 示例用法
const myCar: Car = { isCar: true, numberOfDoors: 4 };
const myBike: Bike = { isCar: false, hasPedals: true };

console.log(describeVehicle(myCar)); // 输出: This car has 4 doors.
console.log(describeVehicle(myBike)); // 输出: This bike has pedals.

通过这种方式,你可以在 TypeScript 中使用布尔值来区分联合类型,并利用类型保护来处理不同的类型。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Typescript:可区分类型联合模式

今天,让我们深入了解 TypeScript 中一个有趣的模式,它将让你大开眼界!这个模式被称为辨识类型联合或辨识联合类型。深入探讨这个模式之前,让我们先了解问题。...TypeScript 验证中,因为可能未定义的属性,Pokemon 函数存在错误。...TypeScript 的类型安全验证在这里!就像我说的,pokemon 和 error 取决于 state。我们可以函数中创建一些逻辑来验证每个状态并定义我们是否有这些属性。但这不是最好的解决方案。...现在,让我们介绍我们的模式,称为辨识类型联合。...这种模式根据一个共同的属性将类型分离,使 TypeScript 理解到它是类型安全的。我喜欢这种模式,以及 TypeScript 如何验证和使我们的代码更清晰易懂。就是这样!

15810

TypeScript中使用装饰器

接上文,JS中使用装饰器,本文介绍一下TS中使用装饰器。 TypeScript中使用装饰器 TypeScript已经将装饰器作为一项实验性特性支持了,我们可以直接通过修改配置开启装饰器特性。...开启特性 tsconfig.json: { "compilerOptions": { "experimentalDecorators": true } } 使用 一图了解TypeScript...注意  TypeScript 不允许同时装饰一个成员的 get 和 set 访问器。因此,如果想为一个成员的访问器添加装饰器,则必须添加在该成员文档顺序上的第一个访问器前。...因为装饰器应用于属性描述符时联合了 get 和 set 访问器,而不是分开声明的。 类型声明 同方法装饰器。 返回值用于替换属性装饰器。...中文教程-装饰器 JDR Design-浅析 TypeScript 装饰器 JDR Design-Typescript 装饰器及应用场景浅析 TypeScript装饰器完全指南

1.1K20
  • TodoList实例告诉你怎么项目中使TypeScript

    为什么todolist 现代的框架教程目前再也不是写个hello world那么简单了,而是需要有一定基础能力能够做到数据绑定、遍历、条件判断等各种逻辑,而能完成这一系列内容的,todolist就是个很好的实现...对应的上述的点击事件,我们实现一下它的伪代码,当其点击的时候,需要处理对应的数据,先使用js实现 function handleTodoItem(todo){ // 点击的时候todo中的done的布尔值取反...虽然能够实现同样的内容,但是它是有副作用的,改变了传入的参数,是不可取的 function handleTodoItem(todo: Todo):Todo { // 点击的时候todo中的done的布尔值取反...联合类型 上面我们之后交叉类型通过 & 连接,那联合类型则是通过 | 连接,同样的举个例子 type Foo = number | string; 这表示Foo类型可以是一个数字,也可以是一个string...}else{ return priority.custom } } 联合类型我们通过if条件进行判断的时候,它会自动确认每个if条件下的参数类型,这也是联合类型的强大之处 总结 基本上我们项目中用到的一些知识点这里都概括了

    71850

    优雅的 react 中使TypeScript

    写在最前面 为了 react 中更好的使用 ts,进行一下讨论 怎么合理的再 react 中使用 ts 的一些特性让代码更加健壮 讨论几个问题,react 组件的声明?... react 中使用 ts 的几点原则和变化 所有用到jsx语法的文件都需要以tsx后缀命名 使用组件声明时的Component泛型参数声明,来代替PropTypes!...全局变量或者自定义的window对象属性,统一项目根下的global.d.ts中进行声明定义 对于项目中常用到的接口数据对象,types/目录下定义好其结构化类型声明 声明React组件 react...但是TS中,编译器会对装饰器作用的值做签名一致性检查,而我们高阶组件中一般都会返回新的组件,并且对被作用的组件的props进行修改(添加、删除)等。...加入此时我们想要声明一个高阶组件,用来给UserCard传递一个额外的布尔值属性visible,我们也需要在UserCard中使用这个值,那么我们就需要在其props的类型里添加这个值: interface

    2.7K10

    优雅的vue中使TypeScript

    TypeScript 是 JS 类型的超集,并支持了泛型、类型、命名空间、枚举等特性,弥补了 JS 大型应用开发中的不足。...单独学习 TypeScript 时,你会感觉很多概念还是比较好理解的,但是和一些框架结合使用的话坑还是比较多的,例如使用 React、Vue 这些框架的时候与 TypeScript 的结合会成为一大障碍...配置文件,主要用于指定待编译的文件和定义编译选项 shims-tsx.d.ts: 允许.tsx 结尾的文件, Vue 项目中编写 jsx 代码 shims-vue.d.ts: 主要用于 TypeScript...识别.vue 文件,Ts 默认并不支持导入 vue 文件 使用 开始前我们先来了解一下 vue 中使typescript 非常好用的几个库 vue-class-component: vue-class-component...vue 中使typescript 的各种场景都有很好的实践,大家感兴趣的可以参考一下,https://github.com/FSFED/ts-vue

    2K20

    VS 2015 中使用 Gulp 编译 TypeScript

    VS 2015 中使用 Gulp 编译 TypeScript 升级到 VS2015 之后, TypeScript 文件不能自动编译成 js 文件, 要编译项目才能讲所有的 ts 文件 编译成 js...文件, 不过 VS2015 支持 Gulp , 而 Gulp 有 TypeScript 插件, 这样使用 Gulp 自动编译 ts 文件的方法就可以实现了。...我们要把 app 目录下的 ts 文件编译到 wwwroot/app 目录下, 使用 Gulp 的做法是这样的: 1、 添加 gulp 和 gulp-typescript NPM 包 打开 package.json..., devDependencies 节点下添加: { "devDependencies": { "gulp": "^3.9.0", "gulp-typescript...) .pipe(gulp.dest('wwwroot/app')); }); 现在在 Task Runner Explorer 就能看到这个名称为 tsc 的任务了, 运行一下, 果然

    1.3K30

    TypeScript 中使用泛型:使用指南

    让我们探索一些 TypeScript 项目中的泛型的实际应用。 函数中使用泛型 其中一个使用泛型的使用场景是函数创建。...接口和类中使用泛型 定义特定类型进行操作接口或者类时,泛型也非常有用。...,类,接口,甚至框架中使用泛型,开发者可以编写更可维护性,更有扩张性和更健壮的代码,来适应更大范围的场景。...泛型中使用 keyof TypeScript 中 keyof 操作符可以泛型中结合使用,来确保属性名的类型安全。它生成类型的已知公共属性名称的联合。...如果一个类型只是覆盖少数特定类型,应该使用联合类型 union type。 性能考虑 泛型通常不会直接作用于运行时性能,因为 TypeScript 编译为 JavaScript,类型信息被删除。

    14910

    【强强联合Power BI 中使用Python(1)

    【2】 今天我们主要来讲讲第二种应用:直接在Power BI中使用Python。 Power BI 2018年8月8日的更新已经支持Python了,和之前支持R语言一样。...之前接触过Power BI和R语言联合使用的朋友上手应该会快一些。 那么Power BI 中如何使用python呢?主要有以下4个地方: ?...想要在Power BI 中使用python,我们需要先配置环境: 1、首先需要安装Python的运行环境,我电脑中直接安装的的是Anaconda3,关于该包,大家自己在网上找来装吧,或者如果你安装了Visual...数据获取环节可以通过以下2种方式: 一、图形界面里找“Python脚本”选项; 二、空查询中使用Python.Execute()函数 我们首先看第一种运行方式: 1、首页-获取数据或者Power Query...注意:最后一行print(df)并非是必需的,我只是为了在编辑环境里查看下输出的结果而已,贴到Power BI Desktop的时候并不需要该行。

    2.9K42

    【强强联合Power BI 中使用Python(2)

    上一篇文章我们讲解了Power BI中使用Python来获取数据的一些应用: 【强强联合Power BI 中使用Python(1) 这一篇我们将继续讲解如何在Power BI中使用Python进行数据清洗工作...脚本编辑器中自带一句话: # 'dataset' 保留此脚本的输入数据 一行以“#”开头的语句,Python的规范中表示注释,所以这句话并不会运行,它的意思是将你要进行修改的表dataset来表示,...以上只是循序渐进地告诉大家,powerquery中是可以Python进行数据清洗的,并且清楚地告诉大家调用Python的方法,大家应该很熟练了吧。 以下才是重点(当然上面也是): ?...powerquery数据清洗中使用较多的Python功能一定会有正则,因为powerquery本身是没有正则的,所以这时候调用Python来进行正则就显得尤为重要,否则你可能需要在powerquery...这样我们就实现了powerquery中使用正则表达式对数据进行清洗的目的。 ? 当然,也可以调用R、PHP或者js来实现相同的目的,方法大同小异,各位读者可以自行研究。

    3.3K31

    TypeScript-泛型约束中使用类型参数

    泛型约束中使用类型参数概述一个泛型被另一个泛型约束, 就叫做 泛型约束中使用类型参数博主需求: 定义一个函数用于根据指定的 key 获取对象的 value:let getProps = (obj: object...如果这个时候我要获取一个 c 的 key 的 value 那么就直接是 undefined 了,说明一个问题,代码不够健壮, 明明 obj 中没有 c 这个 key 但是却没有报错,那么这时就可以利用 泛型约束中使用类型参数...a: 'a', b: 'b'}let res = getProps(obj, "c");console.log(res);如上 K extends keyof T 的含义为,key 只能是...obj 当中存在的属性,如果指定的 key obj 当中不存在就不允许获取图片图片最后本期结束咱们下次再见~ 关注我不迷路,如果本篇文章对你有所帮助,或者你有什么疑问,欢迎评论区留言,我一般看到都会回复的

    19410

    Vue 中使TypeScript 的一些思考(实践)

    使用 JavaScript 时,这并没有什么不对的地方,但当你使用 TypeScript 时,这有点不足,我们并不能得到有关于 someProp 更多有用的信息(比如它含有某些属性),甚至 TypeScript...此外,这里有个 PR 暴露一个更直观的类型( Vue 2.6 版本才可以): props: { testProp: Object as PropTypes }...当在 TypeScript 中使用它时,我们希望得到有关于 mixins 的类型信息。...当你 Vue 中使TypeScript 时,所遇到的第一个问题即是 ts 文件中找不到 .vue 文件,即使你所写的路径并没有问题: ?... TypeScript 中,它仅识别 js/ts/jsx/tsx 文件,为了让它识别 .vue 文件,我们需要显式告诉 TypeScript,vue 文件存在,并且指定导出 VueConstructor

    3.3K30

    GroovyJMeter中使用正则提取赋值

    之前写过一些文章讲了Groovy如何在JMeter中协助测试: Groovy处理JMeter断言和日志 Groovy处理JMeter变量 GroovyJMeter中执行命令行 Groovy处理...JMeter中的请求参数 Java和Groovy正则使用 JMeter吞吐量误差分析 这次来看看Groovy正则表达式JMeter中的应用。...Apache JMeter™中,可以从内置组件正则表达式提取器中使用正则表达式,也可以Groovy编写它们。 将正则表达式与Groovy一起使用可提供更大的灵活性并节省时间。...本文中,我将向您展示当使用JMeter对API响应进行性能测试时,如何在Groovy中使用正则表达式。 首先新建一个简单的线程组和一个简单的请求: ? 添加JSR223 后置处理程序 ?...本期我采用正则提取的方式进行提取,并赋值到某个线程私有变量中,赋值变量部分可以参考文章:Groovy处理JMeter变量。

    1.2K20

    【强强联合Power BI 中使用Python(3)数据可视化

    前两篇文章我们讲解了Power BI中使用Python来获取数据的一些应用: 【强强联合Power BI 中使用Python(1) 以及如何在Power BI中使用Python进行数据清洗工作:...【强强联合Power BI 中使用Python(2) 这一篇我们继续讲解如何在Power BI中使用Python进行可视化呈现工作。...添加了字段之后,Python脚本编辑器中,自动显示了几行内容: ?...结果得到一个很丑陋的柱状图……还不如直接Power BI做呢! ? 没关系,我们只要按照下面的步骤适当调整一下代码: ? 就得到了我们想要的结果: ?...第二个问题,很可惜没有现成的工具可以直接解决,但是结合本系列《【强强联合Power BI 中使用Python》第二篇的内容: Python的处理结果以Dataframe形式输出,M将Dataframe

    2.7K31

    TypeScript 联合类型的定义、使用场景和注意事项

    TypeScript 中,联合类型(Union Types)是一种用于表示变量或参数可以具有多种类型的概念。它允许我们将多个类型中的一个或多个类型作为一个整体来使用。...本文将详细介绍 TypeScript 联合类型的定义、使用场景和注意事项,并提供一些示例来帮助理解。定义联合类型 TypeScript 中,可以使用 | 符号将多个类型组合成一个联合类型。...类型保护TypeScript 提供了一些机制来帮助我们使用联合类型时进行类型保护,以减少可能出现的错误。以下是几种常见的类型保护方法:类型判断使用 typeof 操作符可以判断一个变量的类型。...联合类型的限制和注意事项使用联合类型时,需要注意以下几点:联合类型只能使用联合类型的公共属性或方法,即类型中共有的属性和方法;联合类型不会进行类型缩小,即不能在运行时判断具体的类型;无法对联合类型的变量进行修改...通过灵活使用联合类型,我们可以处理多种类型的变量,提高代码的可读性和可维护性。实际开发中,根据具体的需求选择合适的联合类型,有助于编写出更健壮和可靠的 TypeScript 代码。

    93641
    领券