开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

TypeScript索引访问类型约束行为奇怪

是指在使用索引访问类型时，其行为可能会与预期不符合或产生一些奇怪的结果。

索引访问类型是TypeScript中的一种高级类型，它允许我们通过索引类型查询或访问其他类型中的属性。通常，我们可以使用索引访问类型来获取某个对象中特定属性的类型，或者创建一个新的类型，该类型包含了原始类型中的一部分属性。

然而，当使用索引访问类型时，有一些行为可能会让人感到奇怪。以下是一些常见的奇怪行为：

可选属性的类型会变成联合类型：当使用索引访问类型获取一个对象中的可选属性时，它的类型会变成联合类型。例如，如果有一个类型type MyObject = { prop1?: string; prop2?: number; }，使用索引访问类型MyObject['prop1']获取prop1属性的类型将会是string | undefined，而不是仅仅是string。
只读属性会变成可选属性：当使用索引访问类型获取一个对象中的只读属性时，它的类型会变成可选属性。例如，如果有一个类型type MyObject = { readonly prop1: string; readonly prop2: number; }，使用索引访问类型MyObject['prop1']获取prop1属性的类型将会是string | undefined，而不是仅仅是string。
数字索引会包含所有属性的类型：当使用数字索引访问类型时，它会返回所有属性的类型的联合类型。例如，如果有一个类型type MyObject = { prop1: string; prop2: number; }，使用索引访问类型MyObject[number]将会返回string | number，而不是仅仅是string或number。

尽管索引访问类型的行为可能会有些奇怪，但它们在某些场景下仍然非常有用。例如，可以使用索引访问类型来创建泛型函数，该函数可以从对象中提取特定属性的值，并返回一个新的对象。

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

云函数（Serverless）：https://cloud.tencent.com/product/scf
云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
云原生容器服务：https://cloud.tencent.com/product/tke
云存储 COS：https://cloud.tencent.com/product/cos
人工智能平台 AI Lab：https://cloud.tencent.com/product/ai
物联网开发平台 IoT Explorer：https://cloud.tencent.com/product/iotexplorer
移动推送服务 TPNS：https://cloud.tencent.com/product/tpns

相关搜索:Angular/TypeScript - Union类型访问 char*返回类型行为奇怪 JSON访问数据-奇怪的行为 TypeScript -迭代枚举时的奇怪行为 Typescript:按索引对类函数进行类型化访问 Typescript条件类型奇怪的错误情况 Typescript索引类型和长度验证 TypeScript索引类型签名不同Android版本上的奇怪行为约束布局动画使用“回调类型”的TypeScript索引类型约束是否工作不正确？

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

TypeScript系列教程九《类型转换》-- 索引访问类型

类型转换是TS最好玩也是语言的灵魂，想玩好需要熟练各种手段和工具，下面一一介绍类型转换的一些常用手段。...索引访问类型 ---- 我们可以使用索引访问类型查找其他类型的特定属性： type Person = { age: number; name: string; alive: boolean }; type...Age = Person["age"]; //type Age = number 类型的索引访问类型，我们可以使用联合类型，keyof 或者其他type: type I1 = Person["age...使用任意类型进行索引的另一个示例是使用number获取数组元素的类型。...// type Age = number // Or type Age2 = Person["age"]; // type Age2 = number 索引是了个类型

6641 0

TypeScript 官方手册翻译计划【八】：类型操控-按索引访问的类型

说明：目前网上没有 TypeScript 最新官方文档的中文翻译，所以有了这么一个翻译计划。...因为我也是 TypeScript 的初学者，所以无法保证翻译百分之百准确，若有错误，欢迎评论区指出；翻译内容：暂定翻译内容为 TypeScript Handbook，后续有空会补充翻译文档的其它部分；...项目地址：TypeScript-Doc-Zh，如果对你有帮助，可以点一个 star ~ 本章节官方文档地址：Indexed Access Type 按索引访问的类型我们可以访问某个类型上的特定属性...这种类型称为按索引访问的类型。...number; name: string; alive: boolean }; type Age = Person["age"]; ^^^ // type Age = number 索引类型本身也是一个类型

4803 0

约束即类型、TypeScript 编程内参（一）

本文是《约束即类型、TypeScript 编程内参》系列第一篇：约束即类型，主要记述 TypeScript 的基本使用和语法。 PS: 本文语境下的「约束」指的是「类型对值的约束」 ?...一、了解 TypeScript TS 大家都听说或者使用过，是 Angular 的官方语言，提供了静态类型检查，是 JavaScript 这门语言的超集，也就是说： TS = JS + 静态类型检查 TS...类型本质上是对变量的约束，理解类型，首先要理解的是变量的值，然后 .........二、初始化 TypeScript 项目通过以下方式初始化一个 ts 项目并编译运行： $ npm i -g typescript # 安装 ts $ mkdir my-ts-learn #...、TypeScript 编程内参（二）」，敬请期待

8661 0

TypeScript-索引访问操作符

前言TypeScript的索引访问操作符（Index Access Operator）允许您通过变量名或字符串来访问对象的属性。...通过 [] 索引类型访问操作符, 我们就能得到某个索引的类型图片class Person { name: string; age: number;}type MyType = Person[...，如果要指定返回的数据类型，那么就可能是 string、number、boolean、那么这个时候就可以利用索引类型访问操作符来进行解决该问题最终代码如下：let obj = { name:...arr.push(obj[key]); }) return arr;}let res = getValues(obj, ['name', 'age']);console.log(res);通过索引类型访问操作符解决该问题其实它内部就是自动转换为了联合...索引访问操作符注意点不会返回 null/undefined/never 类型interface TestInterface { a: string, b: number, c: boolean

2253 0

索引类型、映射类型与条件类型_TypeScript笔记12

(n => o[n]); } pluck函数能从o中摘出来names指定的那部分属性，存在2个类型约束：参数names中只能出现o身上有的属性返回类型取决于参数o身上属性值的类型这两条约束都可以通过泛型来描述...索引类型查询操作符（index type query operator） T[K]：索引访问操作符（indexed access operator）：索引类型查询操作符 keyof T取类型T上的所有...，而不是值（因此keyof obj不合法）这种类型查询能力在pluck等预先无法得知（或无法穷举）属性名的场景很有意义索引访问操作符与keyof类似，另一种类型查询能力是按索引访问类型（T[K]）...T = Boxed; 上例中Boxed的True分支具有any[]类型约束，因此能够通过索引访问（T[number]）得到数组元素的类型应用场景条件类型结合映射类型能够实现具有针对性的类型映射...R : any; （摘自TypeScript/lib/lib.es5.d.ts）具体示例见Predefined conditional types 四.总结除类型组合外，另2种产生新类型的方式是类型查询与类型映射

1.7K1 0

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

在泛型约束中使用类型参数概述一个泛型被另一个泛型约束, 就叫做泛型约束中使用类型参数博主需求: 定义一个函数用于根据指定的 key 获取对象的 value：let getProps = (obj: object..., key: string): any => { return obj[key];}如上的代码在编译器当中是会报错的，报错的原因就是它不知道 obj[key] 返回的到底是不是 any 这个类型，...如果这个时候我要获取一个 c 的 key 的 value 那么就直接是 undefined 了，说明一个问题，代码不够健壮, 明明 obj 中没有 c 这个 key 但是却没有报错，那么这时就可以利用在泛型约束中使用类型参数

1691 0

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

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

1.3K1 0

TypeScript进阶（一）深入理解类和接口

在本文中，我们将深入探讨 TypeScript 类和接口的各种特性，包括类的继承、抽象类、静态成员、接口、索引器以及 this 指向约束。...在 TypeScript 中，我们可以使用字符串或数字作为索引类型。索引签名可以是字符串或数字类型，它们分别对应于对象的属性名和数组的索引。...我们可以像访问普通对象的属性一样访问 colors 对象中的属性。 this 指向约束在 TypeScript 中，我们可以使用 this 关键字来引用当前对象。...通过使用 this 指向约束，我们可以确保函数中只能访问特定类型的属性和方法。 this 指向约束通常与箭头函数一起使用，因为箭头函数没有自己的 this 值，它会继承外部作用域中的 this 值。...TypeScript基础（一）基本类型与类型运算 TypeScript基础（二）扩展类型-枚举及其位运算 TypeScript基础（三）扩展类型-接口和类型兼容性 TypeScript基础（四）扩展类型

2531 0

TypeScript 中的元组类型：元组的特性、常见操作和注意事项

类型约束：元组中的每个元素都有对应的类型约束，必须按照定义的顺序和类型添加元素。例如，person[0] = "Bob"; person[1] = "30"; 将导致编译错误，因为类型不匹配。...零索引访问：可以通过零索引来访问元组中的元素，索引从零开始。例如，let name: string = person[0]; 可以获取元组 person 中的姓名。...访问元素可以使用索引来访问元组中的元素。例如，let name: string = person[0]; 可以获取元组 person 中的姓名。修改元素可以通过索引修改元组中的元素。...类型一致性：元组中的元素应该具有相应的类型约束，不同类型的元素可能导致类型错误。解构赋值问题：在解构元组时，要确保变量的数量和类型与元组中的元素匹配，否则可能导致未定义的行为。...总结本文详细介绍了 TypeScript 中的元组类型，包括元组类型的特性、常见操作和注意事项。元组用于存储固定数量、不同类型的元素，并提供了访问、修改、解构和遍历等操作。

4052 0

盘点前端面试常见的15个TS问题，你能答对吗？

而TypeScript的构造函数用关键字constructor来实现。可以通过this（和java/C#一样代表对象实例的成员访问）关键字来访问当前类体中的属性和方法。 8 实例化是什么？...10 什么是可索引类型接口？...一般用来约束数组和对象 // 数字索引——约束数组 // index 是随便取的名字，可以任意取名 // 只要 index 的类型是 number，那么值的类型必须是 string interface...arr:StringArray = ['aaa','bbb']; console.log(arr); // 字符串索引——约束对象 // 只要 index 的类型是 string，那么值的类型必须是...如果接口用于一个类的话，那么接口会表示“行为的抽象” 对类的约束，让类去实现接口，类可以实现多个接口接口只能约束类的公有成员（实例属性/方法），无法约束私有成员、构造函数、静态属性/方法 // 接口可以在面向对象编程中表示为行为的抽象

3.3K4 0

学会这15个TS面试题，拿到更高薪的offer

而TypeScript的构造函数用关键字constructor来实现。可以通过this（和java/C#一样代表对象实例的成员访问）关键字来访问当前类体中的属性和方法。 8 实例化是什么？...10 什么是可索引类型接口？...一般用来约束数组和对象 // 数字索引——约束数组 // index 是随便取的名字，可以任意取名 // 只要 index 的类型是 number，那么值的类型必须是 string interface...arr:StringArray = ['aaa','bbb']; console.log(arr); // 字符串索引——约束对象 // 只要 index 的类型是 string，那么值的类型必须是...如果接口用于一个类的话，那么接口会表示“行为的抽象” 对类的约束，让类去实现接口，类可以实现多个接口接口只能约束类的公有成员（实例属性/方法），无法约束私有成员、构造函数、静态属性/方法 // 接口可以在面向对象编程中表示为行为的抽象

3.6K5 0

TypeScript接口类型

顾名思义，它也是一种类型，和number、string、undefined等一样，约束使用者使用，主要是用来进一步定义对象中属性的类型。它是对行为模块的抽象，具体的行为是用类来实现。...: 'typescript', time: 2}设置联合类型，具体如下：interface Class { name: string; time: number | string;}let...name: 'typescript',}另外除了以上基础用法外，还可以设置接口属性只读、索引签名、可选属性、函数类型接口，具体如下：（1）设置属性只读我们在接口中属性前加readonly，表示该属性为只读...: Class = { name: 'typescript', time: 2}info.name = 'zhangsan';//Error（2）设置索引签名设置索引签名后，在对象数据中传入多余的属性...则该属性就变成了类数组，具体如下所示：interface Class { [property:number]:any}let info: Class = ['one','two'];//可以通过索引进行访问值

1701 0

【TypeScript】TS接口类型（五）

顾名思义，它也是一种类型，和number、string、undefined等一样，约束使用者使用，主要是用来进一步定义对象中属性的类型。它是对行为模块的抽象，具体的行为是用类来实现。...: 'typescript', time: 2}设置联合类型，具体如下：interface Class { name: string; time: number | string;}let...info: Class = { name: 'typescript',}另外除了以上基础用法外，还可以设置接口属性只读、索引签名、可选属性、函数类型接口，具体如下：（1）设置属性只读我们在接口中属性前加...', time: 2}info.name = 'zhangsan';//Error（2）设置索引签名设置索引签名后，在对象数据中传入多余的属性，仍能够执行。...则该属性就变成了类数组，具体如下所示：interface Class { [property:number]:any}let info: Class = ['one','two'];//可以通过索引进行访问值

1881 0

从C#到TypeScript - 接口

从C#到TypeScript - 接口为了更好的抽象出行为和属性，TypeScript在ES6的基础上增加了接口interface。...check: CheckLogin = function(name: string, pwd: string): boolean { return false; } 另外，接口还可以用来描述可索引类型...索引支持两种：number和string。...interface Testable { field: T; (arg: T): T; } 也支持泛型约束，关键字是extends。...interface Testable { field: T; (arg: T): T; } TypeScript的接口对于C#程序员来说是有点奇怪了，

1.3K7 0

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

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

1.4K3 0

TypeScript 官方手册翻译计划【九】：类型操控-条件类型

就像使用类型保护实现的类型收缩可以得到一个更具体的类型一样，条件类型的真分支可以通过我们检查的类型进一步地去约束泛型。...我们可以对 T 进行约束，这样 TypeScript 就不会再报错了： type MessageOf = T['message']; interface...type Num = Flatten; ^ // type Num = number 当 Flatten 接受数组类型的时候，它会使用 number 按索引访问...举个例子，在上面的 Flatten 函数中，我们可以直接推断出数组元素的类型，而不是通过索引访问“手动”提取出元素的类型： type Flatten = Type extends Array...number[]; 通常情况下，这是我们期望的行为。

7872 0

JavaScript: 函数式编程-类型签名

具体的 TypeScript 基础的函数类型定义可以看看我的文章 TypeScript 基本类型和泛型的使用缩小可能性范围 narrowing of possibility 一旦引入一个类型变量，就会出现一个奇怪的特性叫做...重点是，不管在哪种情况下，类型 a 的多态性（polymorphism）都会大幅缩小 reverse 函数可能的行为的范围。...这种“可能性范围的缩小”（narrowing of possibility）允许我们利用类似 Hoogle 这样的类型签名搜索引擎去搜索我们想要的函数。类型签名所能包含的信息量真的非常大。...如果这里不太明白 compose 的使用的话，可以翻到前面看看 code compose 的文章解释代码组合的优势类型约束最后要注意的一点是，签名也可以把类型约束为一个特定的接口（interface...我们把这种接口声明叫做类型约束（type constraints）。

8111 0

TypeScript学习第六篇－接口的定义

TypeScript中的接口类似于Java，同时还增加了更加灵活的接口类型，包括属性、函数、可索引和类等。 1....TypeScript中定义函数类型接口。对方法传入的参数，以及返回值进行约束。...TypeScript中定义可索引类型接口。实现对数组和对象的约束。...// 对数组的约束 interface UserArr{ // 约束索引为数字类型，数组中的元素为字符类型 [index:number]:string } // var arr:UserArr...TypeScript中定义类类型的接口。实现对类的约束。

5581 0

TypeScript学习指南(有PDF小书+思维导图)

在定义一个数组时，可以定义一个索引类型接口，这样就约束了它必须传递哪些类型的值。...接口约束通过定义接口，泛型函数继承接口，则参数必须实现接口中的属性，这样就达到了泛型函数的约束类约束通过给类的泛型指定为另一个类，这样就规定了类泛型的类型都为另一个类 # 第一种 // 定义接口...protected受保护的 protected修饰符与 private修饰符的行为很相似，但有一点不同， protected成员在派生类中仍然可以访问,不可以通过实例来访问受保护的属性。...注意直接通过变量访问也可以通过索引访问只能定义一个剩余参数，且位置在默认参数和可选参数后面 function getNumberInfo(num:number,...peopleArray:...，它能够附加到类声明、方法、访问符、属性、类方法的参数上，以达到扩展类的行为。

2.7K3 0

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

对于访问器，TypeScript 有一些特殊的推断规则：如果 get 存在而 set 不存在，那么属性会自动成为只读属性如果没有指定 setter 参数的类型，那么会基于 getter 返回值的类型去推断参数类型...从 TypeScript 4.3 开始，访问器的 getter 和 setter 可以使用不同的类型。..._size = num; } } 索引签名类可以声明索引签名，其工作方式和其它对象类型的索引签名一样： class MyClass { [s: string]: boolean | ((...泛型类的静态成员永远都不能引用类的类型参数。类的运行时 this 有个要点需要记住，那就是 TypeScript 不会改变 JavaScript 的运行时行为。...而众所周知，JavaScript 拥有一些特殊的运行时行为。

2.5K1 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭