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

为什么我在TypeScript中得到“类型‘字符串’不能用作索引类型”错误

在TypeScript中,当我们使用一个类型作为索引类型时,会出现类型错误。这是因为索引类型必须是数字或字符串类型,而不能是其他类型。

索引类型在对象或接口中用于定义属性的类型。当我们使用一个类型作为索引类型时,我们可以通过该类型的值来访问对象或接口中的属性。例如,我们可以使用字符串类型的索引来访问对象中的属性:

代码语言:typescript
复制
interface MyObject {
  [key: string]: number;
}

const obj: MyObject = {
  foo: 1,
  bar: 2,
};

console.log(obj['foo']); // 输出 1
console.log(obj['bar']); // 输出 2

然而,如果我们尝试使用一个非字符串类型的索引,就会出现类型错误。例如,如果我们使用一个字符串类型的变量作为索引,就会得到"类型 '字符串' 不能用作索引类型"的错误:

代码语言:typescript
复制
const index: string = 'foo';
console.log(obj[index]); // 错误:类型 '字符串' 不能用作索引类型

为了解决这个问题,我们可以使用联合类型来定义索引类型,包括字符串和数字类型。例如:

代码语言:typescript
复制
interface MyObject {
  [key: string | number]: number;
}

const obj: MyObject = {
  foo: 1,
  bar: 2,
  1: 3,
};

console.log(obj['foo']); // 输出 1
console.log(obj['bar']); // 输出 2
console.log(obj[1]); // 输出 3

在这个例子中,我们使用联合类型 string | number 定义了索引类型,这样就可以同时使用字符串和数字类型的索引来访问对象中的属性。

腾讯云相关产品和产品介绍链接地址:

请注意,以上链接仅供参考,具体产品选择应根据实际需求进行评估和决策。

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

相关·内容

理解 TypeScript 类型拓宽

TypeScript ,此过程称为拓宽。理解它可以帮助你理解错误并更有效地使用类型注释。...尽管 TypeScript 很聪明,但它无法读懂你的心思。它不能保证 100% 正确,正如我们刚才看到的那样的疏忽性错误。...最初的例子,变量 x 的类型被推断为字符串,因为 TypeScript 允许这样的代码: let x = 'semlinker'; x = 'kakuqo'; x = 'lolo'; 对于 JavaScript...(vec, x); // OK 因为 x 不能重新赋值,所以 TypeScript 可以推断更窄的类型,就不会在后续赋值中出现错误。...它需要推断一个足够具体的类型来捕获错误,但又不能推断出错误类型。它通过属性的初始化值来推断属性的类型,当然有几种方法可以覆盖 TypeScript 的默认行为。

1.6K40

TypeScript 4.2 正式发布:更智能的类型别名保留,声明缺失的帮助函数,还有许多破坏性更新

标记 逻辑表达式改进的未调用函数检查 解构变量可以显式标记为未使用 可选属性和字符串索引符号之间的宽松规则 声明缺失的帮助函数 破坏性更新 更智能的类型别名保留 TypeScript 有一种为类型声明新名称的方法...这就是为什么 TypeScript 引入了一个新的标志,--noPropertyAccessFromIndexSignature。在这种模式,你将选择使用 TypeScript 的旧行为来发出错误。...尽管很明显movieWatchCount中肯定有一些字符串不存在,但是由于undefined的存在,TypeScript 的早期版本认为对象的可选属性不能用兼容索引符号赋值。...TypeScript 4.2 的 beta 版本包含了对模板字符串推断的更改。在这个变更,模板字符串字面要么被赋予模板字符串类型,要么被简化为多个字符串语义类型。...我们想要保证 TypeScript 在编码给您带来了乐趣,希望我们已经做到了这一点。 编码快乐!

3.2K20

5000 多字,让你一文掌握 TS 枚举

一、基础知识 JavaScript 布尔类型的变量含有有限范围的值,即true和false。而在 TypeScript 中使用枚举,你也可以自定义相似的类型。...TypeScript 2.6 支持 .ts 文件通过报错一行上方使用// @ts-ignore来忽略错误。 // @ts-ignore注释会忽略下一行中产生的所有错误。...建议实践@ts-ignore之后添加相关提示,解释忽略了什么错误。 请注意,这个注释仅会隐藏报错,并且我们建议你少使用这一注释。...相反,您最终得到了number,并且你不想回退到SomeFlag。 认为,如果我们再次运行 TypeScript 之后仍然有枚举,那么我们将为位标志建立一个单独的构造。...default 分支TypeScript 会推断 value 的类型为never类型

3.8K10

一文让你彻底掌握 TS 枚举

一、基础知识 JavaScript 布尔类型的变量含有有限范围的值,即 true 和 false。而在 TypeScript 中使用枚举,你也可以自定义相似的类型。...TypeScript 2.6 支持 .ts 文件通过报错一行上方使用 // @ts-ignore 来忽略错误。 // @ts-ignore 注释会忽略下一行中产生的所有错误。...建议实践 @ts-ignore之后添加相关提示,解释忽略了什么错误。 请注意,这个注释仅会隐藏报错,并且我们建议你少使用这一注释。...相反,您最终得到了 number,并且你不想回退到 SomeFlag。 认为,如果我们再次运行 TypeScript 之后仍然有枚举,那么我们将为位标志建立一个单独的构造。...default 分支TypeScript 会推断 value 的类型为 never 类型

4.4K20

TypeScript进阶 之 重难点梳理

那么其实,Typescript 个人理解,并不能算是一个编程语言,它只是 JavaScript 的一层壳。当然,我们完全可以将它作为一门语言去学习。...这个索引签名表示了当用number去索引StringArray时会得到string类型的返回值。 Typescript支持两种索引签名:字符串和数字。...interface NotOkay { [x: number]: Animal; [x: string]: Dog; } 下面的例子里,name的类型字符串索引类型不匹配,所以类型检查器给出一个错误提示...类型转换发生在运行时 函数重载 ❝刚开始使用 ts 的时候,一直困惑。。。为什么会有函数重载这么鸡肋的写法,可选参数它不香么? ❞ ?...为什么不能判断类型或者可选参数呢?

3.8K20

十分钟教你理解TypeScript的泛型

你将在本文中学到什么 本文介绍TypeScript泛型(Generics)的概念和用法,它为什么重要,及其使用场景。我们会以一些清晰的例子,介绍其语法,类型和如何构建参数。...如果你更进一步,决定打印string的子字符串——它会报运行时错误,但不指不出任何具体的内容,更重要的是,编译器没有给出任何类型不匹配的编译时错误。  ...这是因为,TypeScript现在可以从指定的泛型类型推断出001不是字符串T出现的地方,就可以使用string类型,这就实现了类型安全。...无法推断出arg参数是什么类型不能证明所有类型都具有length属性,因此不能假设它是一个字符串(具有length属性)。...TypeScript中使用泛型的主要原因是使类型,类或接口充当参数。 它帮助我们为不同类型的输入重用相同的代码,因为类型本身可用作参数。 泛型的一些好处有: 定义输入和输出参数类型之间的关系。

2.2K10

Typescript常看常新

type Nullable = T | undefined | null; 上面示例,Nullable是一个泛型,只要传入一个类型,就可以得到这个类型与undefined和null的一个联合类型...类型断言也是开发中经常会用到的东西,这里补充一点知识吧 as 对于没有类型声明的值,TypeScript 会进行类型推断,很多时候得到的结果,未必是开发者想要的。...' | 'b' | 'c' function foo(language:lang) {return language} foo(str as const) // 错误 非空断言 非空断言实际编程很有用...,最后属性都会被转为字符串 // 的形式, 因此Obj的索引类型也包含了number 数组也可以 数组也是也对象嘛, 就是{0: 'a', 1: 'b', 2: 'c'}这样的形式,所以类型是{ [...一定是兼容 string|number|symbol,否则不能用作键名,会报错。

15210

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

json项目文件夹。让我们为TypeScript生成一个配置文件: npm run tsc -- --init 如果一切顺利,您将得到“消息TS6071:成功创建tsconfig。...从现在开始,将以文本形式向你展示错误,但请记住,ide和文本编辑器会在你TypeScript中出现错误时显示这些红线。...关键是,你不能给一个随机对象分配属性,然后就完事了。TypeScript要求代码的每个实体都符合特定的形状。这个形状TypeScript中有一个名字:interface。...这意味着我们可以通过string类型索引访问该对象的任何键,而该索引又返回另一个字符串。...总之,跳过了TypeScript的另一个有用特性:函数的返回类型。 要理解为返回值添加类型注释为什么很方便,请想象一下正在摆弄您的奇特函数。

6K40

使用TypeScript两年后,还值得吗?

这是一个关于使用TypeScript日常工作感受到的优缺点的总结。想描述一下使用TypeScript的最糟糕体验,另一方面,也要说一下认为最有用的功能。...类型将帮助你更快,更安全地编码。你可以告诉编译器“这个常量妥妥的是一个数字”,如果你尝试将其用作数组或字符串,TS编译器将始终提示你输入错误。...这就是为什么有些情况下使用类而不是接口(如使用Angular Dependency Injection)更好。让我们看一下接口的一些真实例子: ? 左边 - 返回类型错误实现。...右侧 - VS Code 立即通知你代码错误。 ? 左侧 - 一个类错误地实现了用户扩展的接口(参见上一个屏幕)。右边 - 描述错误信息.. 类 ES6有类,所以你可能之前用过它。...如果是一个字符串为什么你只需要调用“toString()”就可以了?如果是一个数字,为什么你刚刚在它前面添加字符串“id_”呢?

1.3K20

TypeScript 演化史 -- 8】字面量类型扩展 和 无类型导入

上一篇更好的类型推断的文章,解释了 TypeScript 如何用 const 变量和 readonly 属性的字面量始化来推断字面量类型。...: 字符串字面量类型被扩展为 string 类型 数字字面量类型被扩展为 number 类型 布尔字面量类型被扩展为 boolean 类型 枚举字面量类型被扩展为包含枚举的类型 到目前为止,咱们一直研究字面量类型的扩展...在下面的例子,一个数组是由两个可扩展字符串字面量类型的变量创建的: const http = "http"; // Type "http" (可扩展) const https = "https"; /...这是因为数组类型没有对索引 0 处的值 "http" 和索引 1 处的值 "https" 进行编码。它只是声明该数组只包含两个字面量类型的值,不管在哪个位置。...是小智,对前端技术保持学习爱好者。我会经常分享自己所学所看的干货,进阶的路上,共勉!

1K10

【TS 演化史 -- 13】字符串枚举 和 弱类型(Weak Type)探测

TypeScript 2.4 之前,这段代码是类型正确的。...: true // Error }; const formatter = createFormatter(prettierConfig); 使用了这个类型注释,咱们会得到以下类型错误不能类型“{...另一个好处是 TypeScript 语言可以给咱们自动完成建议,因为类型注释告诉它咱创建的对象的类型。 弱类型的解决方法 如果出于某种原因,咱们就是不想从特定弱类型的弱类型检测获得错误,该怎么办?...也许一个用例,这种方法是有意义的,但是通常,咱们应该更喜欢其他解决方案之一。 弱类型检测的限制 请注意,弱类型检测仅在属性完全没有重叠时才会产生类型错误。...是小智,对前端技术保持学习爱好者。我会经常分享自己所学所看的干货,进阶的路上,共勉!

1.6K10

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

尽管如此,类型检查器在任何给定位置都为 command 变量使用最具体的类型 分配了字符串 “pwd” 之后,command 变量就不可能是字符串数组(联合类型惟一的其他选项)。...分配了字符串数组 ["ls", "-la"] 之后,command 变量不再被视为字符串,现在它是一个字符串数组,所以对 join 方法的也就能调用了。...因此,没有从 command 变量的联合类型删除字符串类型,并产生以下编译时错误: Property 'join' does not exist on type 'string | string[]...为了清晰可见,将 undefined 的类型添加到 lastName 属性的联合类型,尽管这是多余的做法。...其思想是确保每个不可空的局部变量使用之前都已正确初始化。 只读属性 TypeScript 2.0 ,readonly 修饰符被添加到语言中。

2K10

TypeScript 4.2 Beta版本发布:带来诸多更新,营造更好的开发体验

TypeScript 4.2 ,rest 元素的使用方法得到了专门扩展。...现在系统能够根据你代码的使用方式来打印出这些类型,这意味着作为 TypeScript 用户,你可以避免显示一些烦人的巨大类型,而这往往会转化为更好的.d.ts 文件输出、错误消息和快速信息及签名帮助的编辑器内类型显示...于是它们可能与我们新的模板字符串类型不兼容。 TypeScript 4.2 ,模板字符串表达式现在总是以模板字面量类型开始。.../pull/41891 更严格地检查 in 运算符 JavaScript in 运算符的右侧使用一个非对象类型会出运行时错误。...; } } 为了简化这类场景的操作,前不久 TypeScript 类型带有一个字符串索引签名时加入了“点”属性访问语法(例如 person.name)。

1.6K10

一文解决现代编程语言选择困难:命令式编程

类型系统(Type System) 类型系统倍受大量开发人员的青睐,这也是为什么 TypeScript 之类的语言日渐大行其道。在我看来,类型系统去除了大量的程序错误,更容易实现重构。...尽管比 Go 更复杂,但 Rust 提供了强大的类型系统。Rust 提供了现代的空值替换和错误处理方法。 为什么本文将 Rust 排在 TypeScript 和 JavaScript 之后?...例如, switch 字符串匹配易于出错,编译器无法大小写错误时给出警告。 TypeScript 仅提供基本的类型推断。...但使用不可为空类型并非编程默认,也并非 TypeScript 的惯用做法。 错误处理 TypeScript ,使用抛出和捕获异常处理错误。...实验特性可使用 Babel JavaScript 得到支持,而在 TypeScript 则无此功能。

1.2K30

TS - Index Signatures

答案是使用索引签名! 让我们找到什么是TypeScript索引签名以及何时需要它们。 1.为什么索引签名 索引签名的思想是您只知道键和值类型时键入未知结构的对象。...[key: boolean]: string; } 3.索引签名警告 TypeScript索引签名有一些您应该注意的注意事项。...当在属性访问器中用作键时,JavaScript会将数字隐式强制转换为字符串(names[1]与names['1']相同)。TypeScript也执行这种强制。...例如,如果您尝试使用字符串文字类型的并集作为索引签名的键,则会出错: interface Salary { // Type error: // An index signature parameter...索引签名由方括号索引名称及其类型组成,后跟冒号和值类型:{ [indexName: Keys]: Values }。

6410

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

TypeScript附带的lib.es6.d.ts文件,Object类型定义如下: interface Object { // ... /** Returns a string representation...Object]" obj.toString(); 字符串索引签名类型的点属性 TypeScript 2.2 之前,如果想访问带有字符串索引签名的类型的任意属性,就必须使用[]符号,但不允许使用.符号访问...许多情况下,不再需要像这样令人不快的变通方法: // 笨拙的方式 (portNumbers as any).http = 80; 请注意,类型必须定义显式字符串索引签名,以便用.符号访问对任意属性都是类型正确的...类型使用上使用.符号访问未知属性仍然是一个错误,因此,对于以下代码,TypeScript 2.2 仍然会给出一个编译时错误: const portNumbers = {}; // OK portNumbers...给定适当的字符串索引签名,在这些情况下,就会获得更少的类型错误,并且不再需要使用类型注释注释点属性访问,这只是为了让编译器通过。

1.3K10
领券