首页
学习
活动
专区
工具
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中从接口创建联合类型或拾取类型?在Typescript中,如何理解联合类型的“扩展”?使用类的方法在typescript中创建联合类型Typescript:如何使类型成为接口的键,但只是字符串的键在typescript中,如何根据属性而不是接口来指定类型?如何在Typescript中将联合(或其他)类型设置为接口中的强制键名在typescript中,如何使用泛型来约束和描述函数的返回值类型?创建仅使用字符串键扩展接口的TypeScript泛型类型是否可以在VSCode (或其他地方)中显示typescript类型/接口的完整计算类型在Typescript中,使用字符串类型的键调用对象中的方法在Typescript中,如何定义包含属性成员的类接口,该属性成员是区分的联合类型?如何让Typescript识别联合中两个相同类型接口之间的通用共性?在TypeScript中获取Record<string的键,{}> (或使用推断的键和类型化的值定义object在Typescript - 2536中使用带约束的泛型类型时出错在TypeScript中,如何将联合的每个值映射到单独的类型?typescript如何在联合中查找与另一个对象文字匹配的类型?是否可以使用字符串值来引用Typescript中的类型是否可以使用TypeScript来确定字符串字面量联合中的所有类型是否至少使用了一次?如何在typescript中只检查布尔型或未定义联合类型的true/false值?如何确定typescript、数字数组或字符串数组中的变量类型?
相关搜索:
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

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

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

23910

深入学习下 TypeScript 中的泛型

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

17810
  • 深入学习下 TypeScript 中的泛型

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

    39K30

    在 TypeScript 中使用泛型:使用指南

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

    16910

    一份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高级类型入门手册,附大量代码实例,值得收藏

    声明了一个 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 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

    8.1K40

    一份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 将引发错误。

    96020

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

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

    2.7K30

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

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

    1.7K10

    编写高效 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.2K61

    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 运算符生成给定类型的已知公共属性名称的并集,这对于限制可能的字符串值或创建映射类型很有用。

    1K30

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

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

    32810

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

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

    15.3K73

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

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

    6.1K40

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

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

    5.1K20

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

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

    1.1K20
    领券