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

Typescript:接口中跨属性的类型保护

Typescript是一种静态类型的编程语言,它是JavaScript的超集,为JavaScript添加了静态类型检查和其他一些特性。Typescript中的接口可以用于定义对象的结构和类型,并且可以进行类型保护。

在Typescript中,接口中跨属性的类型保护是指通过判断对象的属性是否满足特定条件来保护对象的类型。这种类型保护可以通过使用类型谓词来实现,类型谓词是一个返回值为布尔类型的函数,用于在运行时检查对象的类型。

下面是一个示例:

代码语言:txt
复制
interface Circle {
  kind: "circle";
  radius: number;
}

interface Square {
  kind: "square";
  sideLength: number;
}

type Shape = Circle | Square;

function calculateArea(shape: Shape): number {
  if (shape.kind === "circle") {
    // 在这里,Typescript会智能地推断出shape是Circle类型
    return Math.PI * shape.radius ** 2;
  } else if (shape.kind === "square") {
    // 在这里,Typescript会智能地推断出shape是Square类型
    return shape.sideLength ** 2;
  }
}

const circle: Circle = { kind: "circle", radius: 5 };
const square: Square = { kind: "square", sideLength: 5 };

console.log(calculateArea(circle)); // 输出78.53981633974483
console.log(calculateArea(square)); // 输出25

在上面的示例中,我们定义了两个接口CircleSquare,它们都有一个kind属性用于区分不同的形状,并且有各自的属性。然后我们定义了一个联合类型Shape,它可以是CircleSquare。在calculateArea函数中,通过判断shape.kind的值,我们可以智能地推断出shape的具体类型,并进行相应的计算。

Typescript中的接口中跨属性的类型保护可以帮助我们在编写代码时更加安全地操作对象,并且提供了更好的代码提示和类型检查。

推荐的腾讯云相关产品:腾讯云云服务器(CVM)、腾讯云云数据库MySQL版、腾讯云对象存储(COS)等。你可以通过访问腾讯云官方网站(https://cloud.tencent.com/)了解更多关于这些产品的详细信息。

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

相关·内容

TypeScript 演化史 -- 9】object 类型 和 字符串索引签名类型属性

TypeScript 2.2 引入了一个新 object 类型。它表示任何非基本类型。...; // 所有非基本类型 type NonPrimitive = object; 使用 object 类型类型声明 随着 TypeScript 2.2 发布,标准库类型声明已经更新,以使用新...当咱们试图访问此类对象上任意属性时,TypeScript 会提示编译时错误 // Type {} const obj = {}; // Error: 类型“{}”上不存在属性“prop” obj.prop...Object]" obj.toString(); 字符串索引签名类型属性TypeScript 2.2 之前,如果想访问带有字符串索引签名类型任意属性,就必须使用[]符号,但不允许使用.符号访问...没有为这段代码提供一个错误,那么就没有对拼写错误属性保护

1.3K10

TypeScript 演化史 — 第九章】object 类型 和 字符串索引签名类型属性

TypeScript 2.2 引入了一个新 object 类型。它表示任何非基本类型。...; // 所有非基本类型 type NonPrimitive = object; 使用 object 类型类型声明 随着 TypeScript 2.2 发布,标准库类型声明已经更新,以使用新...当咱们试图访问此类对象上任意属性时,TypeScript 会提示编译时错误 // Type {} const obj = {}; // Error: 类型“{}”上不存在属性“prop” obj.prop...Object]" obj.toString(); 字符串索引签名类型属性TypeScript 2.2 之前,如果想访问带有字符串索引签名类型任意属性,就必须使用[]符号,但不允许使用.符号访问...没有为这段代码提供一个错误,那么就没有对拼写错误属性保护

1.4K30

TypeScript 演化史 — 第二章】基于控制流类型分析 和 只读属性

因为 readonly 只是一个编译时工件,所以没有针对运行时属性分配保护。...总结 基于控制流类型分析是 TypeScript 类型系统一个强大补充。类型检查器现在理解了控制流中赋值和跳转语义,从而大大减少了对类型保护需要。...因为 readonly 只是一个编译时工件,所以没有针对运行时属性分配保护。...也就是说,它是类型系统另一个特性,通过让编译器从 TypeScript 代码库中检查意外属性分配,帮助你编写正确代码。...总结 基于控制流类型分析是 TypeScript 类型系统一个强大补充。类型检查器现在理解了控制流中赋值和跳转语义,从而大大减少了对类型保护需要。

2K10

Typescript 使用日志(干货)

类型都在哪里使用 在 Typescript 中,类型通常在以下几种情况下使用。 •变量中使用•类中使用•接口中使用•函数中使用 类型在变量中使用 在变量中使用时,直接在变量后面加上类型即可。...); } } new Cat3(); 接口中高级用法 接口中高级用法主要有以下几点: •继承•可选属性•只读属性•索引类型:字符串和数字•函数类型接口•给类添加类型,构造函数类型口中除了可以定义常规属性之外...mouse 类型,所以在回调函数中,我们是知道返回参数一定是一个 MouseEvent 类型,这样是符合逻辑,但由于 MouseEvent 类型属性是多于 Event 类型,所以说 Typescript...那么问题来了,我们怎么去确定运行时到底是什么类型? 答:类型保护类型保护是针对于联合类型,让我们能够通过逻辑判断,确定最终类型,是来自联合类型哪个类型。...=•自定义类型保护,通过判断是否有某个属性等 // 自定义类型保护 function isFish(pet: Fish | Bird): pet is Fish { return (pet

2.4K10

【文末送书】Typescript 使用日志

类型都在哪里使用 在 Typescript 中,类型通常在以下几种情况下使用。 •变量中使用•类中使用•接口中使用•函数中使用 类型在变量中使用 在变量中使用时,直接在变量后面加上类型即可。...在接口中使用也比较简单,可以理解为组合多个单一类型。...); } } new Cat3(); 接口中高级用法 接口中高级用法主要有以下几点: •继承•可选属性•只读属性•索引类型:字符串和数字•函数类型接口•给类添加类型,构造函数类型口中除了可以定义常规属性之外...那么问题来了,我们怎么去确定运行时到底是什么类型? 答:类型保护类型保护是针对于联合类型,让我们能够通过逻辑判断,确定最终类型,是来自联合类型哪个类型。...=•自定义类型保护,通过判断是否有某个属性等 // 自定义类型保护 function isFish(pet: Fish | Bird): pet is Fish { return (pet

2.8K10

TypeScript 可辨识联合类型

阅读须知:本文示例运行环境是 TypeScript 官网 Playground,对应编译器版本是 v3.8.3。...这种类型本质是结合联合类型和字面量类型一种类型保护方法。如果一个类型是多个类型联合类型,且多个类型含有一个公共属性,那么就可以利用这个公共属性,来创建不同类型保护区块。...vType 属性,该属性被称为可辨识属性,而其它属性只跟特性接口相关。...原因是在 Motorcycle 接口中,并不存在 capacity 属性,而对于 Car 接口来说,它也不存在 capacity 属性。那么,现在我们应该如何解决以上问题呢?...,从而确保在 evaluatePrice 方法中,我们可以安全地访问 vehicle 对象中所包含属性,来正确计算该车辆类型所对应价格。

2.5K10

你了解 Typescript

JavaScript版本 强大智能感知 Typescript特性 可选静态类型 类型可被添加到变量,函数,属性等。...TS浏览器、操作系统、主机,开源。 TS始于JS,终于JS。遵循JavaScript语法和语义,方便了无数JavaScript开发者。...公共,私有与受保护修饰符: public(默认): 可以自由访问程序里定义成员 private: 当成员被标记成private时,它就不能在声明它外部访问 protected: protected...然后我们使用eslint,但是很多对象属性、接口类型等等,都无法解决。 我们使用不一样编辑器,有VSCode,有WebStorm,有subline。...就像我们在很小页面里使用redux会觉得繁琐,在数据类型不多对象或接口中使用typescript会觉得没啥效果一样,个人还是认为,好架构在能遇见拓展性同时,不过度设计,恰到好处才是最棒

5.5K10

分享 40 道关于 Typescript 面试题及其答案

(https://www.typescriptlang.org/docs/handbook/why-typescript.html) 5.如何在 TypeScript 口中定义可选属性?...在接口中定义可选属性属性名称后面的修饰符。可选属性可能存在于实现该接口对象中,也可能不存在。这是一个例子: interface Person { name: string; age?...TypeScript类型保护是什么?它们如何工作?举个例子。 答案:类型防护是 TypeScript 表达式,它在运行时检查变量类型,并允许您根据类型执行不同操作。...) 39.TypeScript口中“索引签名”是什么?...答案:TypeScript口中索引签名允许您根据属性名称定义属性类型。它们用于定义具有动态属性名称对象。

38430

TypeScript 官方手册翻译计划【十二】:类

对于访问器,TypeScript 有一些特殊推断规则: 如果 get 存在而 set 不存在,那么属性会自动成为只读属性 如果没有指定 setter 参数类型,那么会基于 getter 返回值类型去推断参数类型...return s.toLowercse() === "ok"; ^ // any } } 在这个例子中,我们可能会认为 s 类型会受到接口中...成员可见性 你可以使用 TypeScript 控制特定方法或属性是否在类外面可见。 public 类成员默认可见性是公有的(public)。...层级访问受保护成员 对于通过一个基类引用访问受保护成员是否合法,不同 OOP 语言之间存在争议: class Base { protected x: number = 1; } class...这意味着 JavaScript 运行时一些操作,诸如 in 或者简单属性查找仍然可以访问私有成员或者受保护成员: class MySafe { private serectKey = 123345

2.5K10

一份不可多得TypeScript系统入门整理

== -1 } 与接口中可选属性类似,我们用 ? 表示可选参数: function buildName(firstName: string, lastName?...Config接口中而进行限制 可选属性口中属性有时候是不必须,有的用得到,有的用不到情况下,是可选属性,这样对可能存在属性进行预先定义。...函数类型接口 接口定义方式:使用interface关键字 接口中可定义: 确定属性 可选属性 任意属性 只读属性 确定属性 interface UserInfo { name: string;...,那么确定属性和可选属性类型都必须是任意属性类型子类,定义了任意属性后,对象变量中属性个数才可以出现比接口属性数量多情况。...= dada(user); 类型注解 TypeScript类型注解是一种轻量级为函数或变量添加约束方式。

1.7K40

TypeScript类中派生接口

因此在本文中,我们探索了 typescript 两个功能,可以帮助我们解决这个问题。 从类派生接口 TypeScript 一个鲜为人知特性是接口可以从类派生。...但是有一个重要警告:实现所有私有或受保护成员都将会在派生接口中公开。 如果你对此感到惊讶,你并不孤独。...当接口类型扩展类类型时,它继承类成员但不继承它们实现。...就好像接口已经声明了类所有成员而没有提供实现一样。接口甚至会继承基类私有成员和受保护成员。这意味着当你创建一个继承了具有私有或受保护成员接口时,该接口类型只能由该类或其子类实现。...当你具有大型继承层次结构但希望指定你代码仅使用具有某些属性子类时,这非常有用。除了继承基类之外,子类不必相关。 所以,这一切都很好,但如果我们只想要公有成员,应该怎么办?

82040

类_TypeScript笔记4

一.类成员 TypeScript定义与ES6 Class规范一致,静态属性,实例属性,访问器等都支持: class Grid { static origin = {x: 0, y: 0}...this.xxx访问私有成员) protected:与private类似,但在派生类中也可以访问受保护成员 例如: class Animal { // 私有成员属性 private name...: string; // 受保护成员属性 protected ancestor: string; // 不写的话,默认public constructor(theName: string...符合TypeScript设计原则: 不给编译产物增加运行时开销 另外,类成员可访问性也是类型检查一部分,private/protected修饰符会打破鸭子类型,例如: class Animal {...,也就是说,Class声明具有类型含义: 该类实例类型:Greeter 类自身类型:typeof Greeter 实际上,类自身类型约束了静态属性、实例属性、构造函数、原型方法等特征,例如: class

70650

TypeScript接口类型

,即变量属性类型必须和声明属性类型保持一致,否则会报错,少写、多写都会报错。...可对属性设置联合类型口中声明属性类型以分号隔开interface Class { name: string; time: number;}let info: Class = { name...name: 'typescript',}另外除了以上基础用法外,还可以设置接口属性只读、索引签名、可选属性、函数类型接口,具体如下:(1)设置属性只读我们在接口中属性前加readonly,表示该属性为只读...具体使用是在接口中定义一个 [property:string]:any,意思是定义了一个属性属性类型是字符串,属性类型为任意。...'one','two'];//可以通过索引进行访问值,但是不能使用数组方法,毕竟不是真正数组console.log(info[0])//one(3)设置可选属性设置可选只需要在接口中属性后加?

16910

Typescript基础语法

typescript与javascript typescript是一个js超集,个人理解为包装了面向对象编程逻辑语法糖,所以一般使用typescript语言来编写代码,然后再使用typescript...安装typescript npm install -g typescript 类型语法 通过在形参右侧使用 : 类型,代表限定形参类型。...接口 以下是官方demo,通过关键字interface定义接口,接口中成员使用 成员名 : 成员类型来表示。代表实现某个接口成员,只需要js对象数据结构符合接口定义成员要求,无须其他特殊处理。...接口中可以指定方法成员类型,通过 方法名: (形参列表) => 返回值类型 来表示,或者 方法名 (形参列表) :返回值类型 interface Person { firstName: string...typescript还支持创建一个可以指代多种类型类型,通过|运算符,即可使用不同类型创建一个联合类型,代表当前变量为其中之一,如 let a : string | number; 类型别名 typescript

1.5K20

TypeScript】TS接口类型(五)

,变量形状必须跟接口形状保持一致,即变量属性类型必须和声明属性类型保持一致,否则会报错,少写、多写都会报错。...可对属性设置联合类型口中声明属性类型以分号隔开interface Class { name: string; time: number;}let info: Class = { name...', time: 2, age:18}与声明属性类型不一致let info: Class = { name: 'typescript', time: '2',}少写属性let...info: Class = { name: 'typescript',}另外除了以上基础用法外,还可以设置接口属性只读、索引签名、可选属性、函数类型接口,具体如下:(1)设置属性只读我们在接口中属性前加...具体使用是在接口中定义一个 [property:string]:any,意思是定义了一个属性属性类型是字符串,属性类型为任意。

18710

TypeScript高级类型备忘录(附示例)

TypeScript 是一种类型语言,允许你指定变量类型,函数参数,返回值和对象属性。...在这里,我们传入两个参数:T 和 U,然后将它们用作属性类型。也就是说,我们现在可以使用该接口并提供不同类型作为参数。 内置类型 TypeScript 提供了方便内置类型,可帮助轻松地操作类型。...如果省略属性TypeScript 会抛出错误。 Readonly Readonly Readonly 将 T 类型所有属性变成只读属性。...就是说,如果我们在函数 showType() 中使用它,则接收到参数必须是字符串,否则,TypeScript 将报错。 类型保护 类型保护使你可以使用运算符检查变量或对象类型。...instanceof instanceof 类型保护是通过构造函数来细化类型一种方式。

85320

TS_React:使用泛型来改善类型

可以直接在浏览器中使⽤ ⽀持模块、泛型和⼝ 不⽀持泛型或⼝ ---- 获取 TypeScript 命令⾏ TypeScript 编译器可以使⽤ npm 包管理器来安装。...但该函数并不是可扩展或通⽤。 可以把 Number 换成 any ,这样就失去了定义应该返回哪种类型能⼒,并且在这个过程中使「编译器失去了类型保护作⽤」。...确保属性存在 有时候,我们希望「类型变量对应类型上存在某些属性」。这时,除⾮我们显式地将特定属性定义为类型变量,否则编译器不会知道它们存在。...我们需要做就是让类型变量 extends ⼀个含有我们所需属性⼝,⽐如这样: interface Length { length: number; } function identity<T extends...,我们⽀持已经实现 Length 任何类型

5.1K20

了不起 TypeScript 入门教程

使用 any 类型,可以很容易地编写类型正确但在运行时有问题代码。如果我们使用 any 类型,就无法使用 TypeScript 提供大量保护机制。...在 JavaScript 中是没有元组,元组是 TypeScript 中特有的类型,其工作方式类似于数组。 元组可用于定义具有有限数量未命名属性类型。每个属性都有一个关联类型。...换句话说,类型保护可以保证一个字符串是一个字符串,尽管它值也可以是一个数值。类型保护与特性检测并不是完全不同,其主要思想是尝试检测属性、方法或原型,以确定如何处理值。...这种类型本质是结合联合类型和字面量类型一种类型保护方法。如果一个类型是多个类型联合类型,且多个类型含有一个公共属性,那么就可以利用这个公共属性,来创建不同类型保护区块。...原因是在 Motorcycle 接口中,并不存在 capacity 属性,而对于 Car 接口来说,它也不存在 capacity 属性。那么,现在我们应该如何解决以上问题呢?

6.9K52

1.8W字|了不起 TypeScript 入门教程(第二版)

Object 接口中所有属性。...: number; 确定赋值断言,TypeScript 编译器就会知道该属性会被明确地赋值。 四、类型守卫 类型保护是可执行运行时检查一种表达式,用于确保该类型在一定范围内。...换句话说,类型保护可以保证一个字符串是一个字符串,尽管它值也可以是一个数值。类型保护与特性检测并不是完全不同,其主要思想是尝试检测属性、方法或原型,以确定如何处理值。...这种类型本质是结合联合类型和字面量类型一种类型保护方法。如果一个类型是多个类型联合类型,且多个类型含有一个公共属性,那么就可以利用这个公共属性,来创建不同类型保护区块。...10.3 任意属性 有时候我们希望一个接口中除了包含必选和可选属性之外,还允许有其他任意属性,这时我们可以使用 索引签名 形式来满足上述要求。

10K51
领券