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

在Typescript中,如何使用字符串类型联合来约束来自另一个类型或接口的键

在Typescript中,可以使用字符串类型联合来约束来自另一个类型或接口的键。具体的做法是使用字符串字面量类型和联合类型。

假设有一个接口Person,包含了nameage两个属性:

代码语言:txt
复制
interface Person {
  name: string;
  age: number;
}

现在我们想要定义一个类型,该类型的键只能是Person接口中的属性名。可以使用字符串类型联合来实现:

代码语言:txt
复制
type PersonKey = keyof Person;

这里的keyof Person表示取Person接口中所有属性的键,得到一个字符串字面量类型的联合类型。例如,PersonKey的类型将是"name" | "age"

接下来,我们可以使用PersonKey来约束另一个类型或接口的键。例如,假设有一个PersonData接口,表示一个人的详细信息:

代码语言:txt
复制
interface PersonData {
  [key: PersonKey]: string;
}

这里的[key: PersonKey]: string表示PersonData接口的键必须是PersonKey中的属性名,并且对应的值必须是字符串类型。

使用示例:

代码语言:txt
复制
const personData: PersonData = {
  name: "John",
  age: "30", // 错误,age的值必须是字符串类型
  gender: "male" // 错误,gender不是Person接口中的属性名
};

在上面的示例中,personData对象中的nameage属性符合约束,而gender属性不符合约束。

推荐的腾讯云相关产品:腾讯云云服务器(CVM),腾讯云对象存储(COS)。

请注意,以上推荐的腾讯云产品仅供参考,具体选择还需根据实际需求进行评估。

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

相关·内容

深入理解 TypeScript Keyof 运算符,让你代码更安全、更灵活!

一、如何定义 KeyOf 运算符 TypeScript ,keyof 运算符用于获取用户定义值。它主要用于泛型,格式类似于联合运算符及其属性。keyof 运算符会检索用户指定索引。...二、泛型中使用 KeyOf 运算 使用 KeyOf 运算符应用约束 TypeScript ,keyof 运算符常用于泛型函数应用约束。...keyof T 返回字符串字面量类型联合。字面量指的是赋值给常量变量固定值。由于 K 是一个字符串字面量类型,我们使用 extends 关键字对 K 进行约束。...使用 KeyOf 运算符创建联合类型 TypeScript ,当我们具有显式对象类型使用 keyof 运算符时,它会创建一个联合类型。...本文中,我们探讨了如何TypeScript 泛型、映射类型、显式、索引签名、条件映射类型和实用类型使用 keyof 运算符。

8210

深入学习下 TypeScript 泛型

今天内容,我们将尝试 TypeScript 泛型真实示例,并探索它们如何在函数、类型、类和接口使用。...您还可以使用类型创建原始类型(例如字符串和布尔值)别名,这是接口无法做到TypeScript 接口是表示类型结构强大方法。...它们允许您以类型安全方式使用这些结构并同时记录它们,从而直接改善开发人员体验。 今天文章,我们将在 TypeScript 创建接口,学习如何使用它们,并了解普通类型接口之间区别。...这意味着 TypeScript 会将数据识别为具有字符串类型和任意类型对象,从而允许您访问其属性。 类型参数约束 某些情况下,泛型类型参数需要只允许将某些形状传递给泛型。...使用 NestedOmit 泛型,传入类型,然后列出要省略属性。 请注意如何在第二个类型参数中使用点符号标识要省略。然后将结果类型存储 Result

38.9K30

TypeScript使用泛型:使用指南

,类,接口,甚至框架中使用泛型,开发者可以编写更可维护性,更有扩张性和更健壮代码,适应更大范围场景。...让我们看下其中一些技术,包括 constraints,utility 类型使用 keyof 关键字。 泛型约束 constraints 通过添加约束更优化泛型,以便限制可以使用类型。...通过这个方法,这能函数能放心使用将会存在传递过来参数 length 属性。 泛型中使用 keyof TypeScript keyof 操作符可以泛型结合使用确保属性名类型安全。...一些有用泛型 utility 类型如下: Partial - 使得 T 所有的属性可选 Readonly - 使得 T 所有的属性只读 Pick - 创建一个类型,该类型具有来自另一个类型...该章节,我们将讨论使用使用泛型基本技巧,以及如何避免可能导致复杂错误降低代码可读性错误。 命名泛型变量最佳实践 命名泛型变量应该是直观,如果可能,应该具有描述性。

11510

一份TypeScript高级类型入门手册,附大量代码实例,值得收藏

声明了一个 GenericType 接口,该接口接收泛型类型 T, 并通过类型 T约束接口内 name 类型 注:泛型变量约束了整个接口后,实现时候,必须指定一个类型 因此使用时我们可以将name...设置为任意类型值,示例字符串数字 多参数泛型类型 interface GenericType { id: T; name: U; } function showType...,它需要两个参数 T是要从中选择元素类型 K是要选择属性(可以使使用联合类型选择多个字段) Omit Omit Omit作用与Pick类型正好相反。...代码,它期望一个number作为类型,这就是为什么我们将 0、1 和 2 作为employees变量原因。...就是说,如果我们函数showType()中使用它,则接收到参数必须是字符串-否则,TypeScript 将引发错误。

1.5K40

一份TypeScript高级类型入门手册,附大量代码实例,值得收藏

声明了一个 GenericType 接口,该接口接收泛型类型 T, 并通过类型 T约束接口内 name 类型 注:泛型变量约束了整个接口后,实现时候,必须指定一个类型 因此使用时我们可以将name...设置为任意类型值,示例字符串数字 多参数泛型类型 interface GenericType { id: T; name: U; } function showType...,它需要两个参数 T是要从中选择元素类型 K是要选择属性(可以使使用联合类型选择多个字段) Omit Omit Omit作用与Pick类型正好相反。...代码,它期望一个number作为类型,这就是为什么我们将 0、1 和 2 作为employees变量原因。...就是说,如果我们函数showType()中使用它,则接收到参数必须是字符串-否则,TypeScript 将引发错误。

1.5K30

TypeScript keyof 操作符

keyof 操作符是 TypeScript 2.1 版本引入,该操作符可以用于获取某种类型所有,其返回类型联合类型。...对象上不同属性,可以具有完全不同类型,我们甚至不知道 obj 对象长什么样。 那么 TypeScript 如何定义上面的 prop 函数呢?...obj[key]; } 以上代码,我们使用TypeScript 泛型和泛型约束。...首先定义了 T 类型使用 extends 关键字约束类型必须是 object 类型类型,然后使用 keyof 操作符获取 T 类型所有,其返回类型联合类型,最后利用 extends 关键字约束...,介绍一下含有数值属性对象如何使用 keyof 操作符来安全地访问对象属性: enum Currency { CNY = 6, EUR = 8, USD = 10 } const

8K40

一份TypeScript高级类型入门手册,附大量代码实例,值得收藏

声明了一个 GenericType 接口,该接口接收泛型类型 T, 并通过类型 T约束接口内 name 类型 注:泛型变量约束了整个接口后,实现时候,必须指定一个类型 因此使用时我们可以将name...设置为任意类型值,示例字符串数字 多参数泛型类型 interface GenericType { id: T; name: U; } function showType...,它需要两个参数 T是要从中选择元素类型 K是要选择属性(可以使使用联合类型选择多个字段) Omit Omit Omit作用与Pick类型正好相反。...代码,它期望一个number作为类型,这就是为什么我们将 0、1 和 2 作为employees变量原因。...就是说,如果我们函数showType()中使用它,则接收到参数必须是字符串-否则,TypeScript 将引发错误。

93620

自从给 React 组件用上 Typescript之后,太爽了!

这很好,因为错误是开发过程捕获,而不是隐藏在代码库。 2. 约束 props 在我看来,React从TypeScript获得最大好处是支持类型。 输入React组件通常需要两个步骤。...接口:text 是字符串类型,important 是 boolean 类型。...这就是为什么ShowText函数返回类型是一个联合JSX.Element。 总结 React组件可以从TypeScript受益匪浅。 给组件规定类型对于验证组件支持非常有用。...通常,这是通过定义一个接口实现,每个prop都有自己类型。 然后,当带注释组件呈现时,TypeScript会验证是否提供了正确prop值。...在数据验证基础上,类型可以作为元信息重要来源,提供注释函数变量如何工作线索。

1.7K10

以淘宝店铺为例,谈谈 TypeScript ESLint 规则集考量

,对于 TypeScript 代码进行约束思考,以及如何在自己团队内推广这一套规则。...为什么:逻辑 || 会将 0 与 "" 视为 false 而导致错误应用默认值,而可选链相比于逻辑与 && 则能够带来更简洁语法(尤其是属性访问嵌套多层,来自于一个函数时,如 document.querySelector...值导入与类型导入 TypeScript使用不同堆空间存放,因此无须担心循环依赖(所以你可以父组件导入子组件,子组件导入定义父组件类型这样)。...推荐规则配置仅开启 allowNumber 允许数字,而禁止掉其他类型,你所需要做得应当是把这个变量填入模板字符串时进行一次具有实际逻辑转化。...如联合类型变量每一条类型分支可能都需要特殊处理逻辑。

2.7K30

编写高效 TS 代码一些建议

一、尽量减少重复代码 对于刚接触 TypeScript 小伙伴来说,定义接口时,可能一不小心会出现以下类似的重复代码。...,你也可以使用 typeof 操作符快速获取配置对象「形状」: type Options = typeof INIT_OPTIONS; 而在使用可辨识联合(代数数据类型标签联合类型过程,也可能出现重复代码...但因为接口中 releaseDate 和 recordingType 属性类型都是字符串,所以使用 Album 接口时,可能会出现以下问题: const dangerous: Album = {...Jackson", title: "Dangerous", releaseDate: new Date("1991-11-31"), recordingType: "studio", }; 另一个错误使用字符串类型场景是设置函数参数类型...说到这里相信有一些小伙伴已经想到了 keyof 操作符,它是 TypeScript 2.1 版本引入,可用于获取某种类型所有,其返回类型联合类型

3.1K61

TypeScript

如何使用 npm install -g typescript # 下载 tsc xx.ts # 生成 xx.js 文件 太麻烦?...let,常量使用const 联合属性: let value: string | number = 666 #接口 接口是对值名称和类型做检查 #定义 interface Person { name...A 即可 #泛型 泛型(Generics)是指在定义函数、接口时候,不预先指定具体类型,而在使用时候再指定类型一种特性。...当然,现在编译器足够聪明,调用时候可以不传递类型,编译器可以自己识别的 传递类型时,这个类型函数中使用方法/属性,必须是存在,或者继承自某个接口。...这里我有意使用不同变量名,以表明类型值沿链向上传播,且与变量名无关。 #泛型约束 确保属性存在 当我们函数获取length属性,类型为number时,是没有length,所以会报错。

1.8K10

分享 30 道 TypeScript 相关面的面试题

03、什么场景下你会使用自定义类型,它们 TypeScript 如何定义? 答案:当我们有复杂结构重复模式时,使用 type 关键字接口定义自定义类型是有益。...例如,如果我们经常处理用户数据,我们可以定义一次用户类型接口,然后整个代码库中使用它,而不是函数重复定义用户形状。 04、工会类型有哪些?它们有何益处?...公共属性(通常称为“鉴别器”)允许我们联合类型之间安全地切换,从而更轻松地使用此类对象。 12、继承 TypeScript 如何发挥作用?...然后,编译器将根据函数调用参数使用适当类型。但是,TypeScript 不支持传统方法重载(您可以定义多个具有相同名称但参数不同方法)。 相反,您可以使用可选参数联合类型实现类似的功能。...30、解释高级类型场景如何以及为何使用 keyof 和 typeof 运算符。 答案:keyof 运算符生成给定类型已知公共属性名称并集,这对于限制可能字符串创建映射类型很有用。

64330

TypeScript 5.4:带来新类型和一些 Break Change

其实也是属于类型收窄一种。 工具类型:NoInfer TypeScript ,有时候我们写代码时候不需要明确告诉它变量是什么类型TypeScript 会自动根据我们给推断出类型。...函数需要为每个不同组制作一个“”,然后 Object.groupBy 使用这个创建一个对象,其中每个都映射到一个包含原始元素数组。... TypeScript 早期版本,当我们使用条件类型(就是那种基于条件分支决定类型表达式)时,默认行为有时会显得有些草率。... TypeScript 5.4 之前版本,对于 first 和 second 赋值,TypeScript 会仅仅基于 U 约束进行类型推断而不会充分考虑可能情况。...另一个改进是 TypeScript 现在会更精确地检查字符串类型是否可以分配给模板字符串类型占位符: function a() { let x:

24010

细数这些年被困扰过 TS 问题

TypeScript 提供最新和不断发展 JavaScript 特性,包括那些来自 2015 年 ECMAScript 和未来提案特性,比如异步功能和 Decorators,以帮助建立健壮组件...索引签名 之外,我们也可以使用 TypeScript 内置工具类型 Record 定义 Developer 接口: // type Record<K extends string | number...除了 T 之外,以下是常见泛型变量代表意思: K(Key):表示对象类型; V(Value):表示对象类型; E(Element):表示元素类型。...五、如何理解函数重载作用 5.1 可爱又可恨联合类型 由于 JavaScript 是一个动态语言,我们通常会使用不同类型参数来调用同一个函数,该函数会根据不同参数而返回不同类型调用结果: function...5.2 函数重载 函数重载方法重载是使用相同名称和不同参数数量类型创建多个方法一种能力。

15K73

全网最全,最详细,最友好 Typescript 新手教程

原来,TypeScript,我们可以通过将接口属性赋值给新接口扩展接口,比如TranslatedLink就从Link“继承”了一些特性。...这意味着我们可以通过string类型索引访问该对象任何,而该索引又返回另一个字符串。...我们可以尝试用联合类型解决这个问题,这是一种TypeScript语法,用来定义两个更多其他类型之间联合类型: interface Link { description?...,可能返回另一个字符串、数字未定义值。...那么接口类型之间应该使用什么呢?我更喜欢复杂对象接口TypeScript文档也建议了一种方法: 因为软件理想属性是对扩展开放,所以如果可能的话,应该始终类型别名上使用接口

6K40

TypeScript学习笔记(二)—— TypeScript基础

原始数据类型包括:布尔值、数值、字符串、null、undefined 以及 ES6 类型 Symbol。 本节主要介绍前五种原始数据类型 TypeScript 应用。...5.2、访问联合类型属性方法 当 TypeScript 不确定一个联合类型变量到底是哪个类型时候,我们只能访问此联合类型所有类型里共有的属性方法: function getLength(something...六、对象类型——接口 TypeScript ,我们使用接口(Interfaces)定义对象类型。...接口中我们可以将数组索引值和元素设置为不同类型,索引值可以是数字字符串。...9.1、语法 值 as 类型 tsx 语法(React jsx 语法 ts 版)必须使用前者,即 值 as 类型

5K20

让你TypeScript代码更优雅,这10个特性你需要了解下

三、巧用 TypeScript 模板字面量类型 模板字面量类型(Template Literal Types)是 TypeScript 提供一种强大工具,让你可以通过字符串字面量创建更加表达性和易于管理字符串类型...通过这种方式,你可以定义复杂字符串组合类型,提升代码可读性和可维护性。下面我们来看一个具体例子。 1、模板字面量类型基本用法 模板字面量类型允许你使用字符串字面量创建新类型。...六、掌握 TypeScript keyof 类型操作符 TypeScript keyof 操作符用于创建一个对象类型所有联合类型,这一特性能帮助你创建依赖于其他类型动态和灵活类型定义...1、keyof 操作符基本用法 keyof 操作符会提取一个对象类型所有,并将这些组成一个联合类型。...UserKeys 被定义为 User 接口所有联合类型,即 "id" | "name" | "email"。

6910

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

答:联合类型允许一个变量有多种类型。它通过使用 | 表示类型之间符号。这允许变量存储任何指定类型值。...答案:TypeScript “排除”实用程序类型允许您通过从联合中排除某些类型创建新类型。它有助于创建联合类型子集。...答案:TypeScript 模板文字类型允许您使用模板文字语法操作类型字符串。它们提供了一种基于字符串模式创建复杂类型方法。...答案:TypeScript “noUncheckedIndexedAccess”编译器选项用于使用索引访问属性时捕获潜在未定义空值。它通过避免运行时错误帮助提高代码安全性。...Dictionary 接口允许您使用字符串和数字值定义对象。

47230

淘宝店铺 TypeScript 研发规约落地实践|技术详解

4.5 版本,我们前面提到类型守卫也支持了基于模板字符串类型守卫,如上面的例子能直接通过包含 Success 字符串判断出来自于 interface Success。...还有使用语法代替掉老语法,比如空值合并代替逻辑,可选链代替逻辑与。对象类型只能用 interface 声明,类型别名应该用来做联合类型、函数类型、工具类型声明等。...或者一些 ESLint 显得不那么智能,比如你希望强制要求某些函数入参来自于枚举而不是字符串场景,你会开始关注如何使用 Compiler API 做源码分析和约束。...还有一些 Lint 无法覆盖场景,也就是更严格约束,如你希望强制要求项目中必须导入某些模块作为 polyfill,某些函数入参来自于枚举而不是字符串场景,那你会开始关注如何使用 Compiler...ts-morph 以及 ts-morpher 这里就不再赘述了,我们在前面已经讲过如何使用操作 TypeScript AST,不论你团队是想基于它们哪一个建设自己 CodeMod 或者

1.1K20
领券