JavaScript 中的索引器
JavaScript
JavaScript
// js 中的索引器
const obj = {
name: "张三",
age: 18,
}
for (const key in obj) {
console.log(obj[key]); // 索引器
}
// es6 中的索引器
const methodName = "sayHello";
class User {
constructor(name, age) {
}
[methodName]() { // 索引器书写的位置应该是所有成员之前
console.log("hello");
}
}
const u = new User("张三", 18);
u[methodName](); // hello
TypeScript 中的索引器
索引器存在的问题
-
问题：在 TS 中，默认情况下，不对索引器 （成员表达式） 做严格的类型检查 （对象赋值绕过 TS 检查）；const A = { name: 'sam', age: 20, }; A['className'] = "一年级"; // 新增属性没有报错 -
解决办法：使用配置 noImplicitAny：true 开启对隐式 any (TS 根据实际情况推导出的 any 类型) 的检查；
![]( "不用索引器存在的问题")
索引器特征
-
在索引器中，键的类型可以是 字符串，也可以是 数字；在类中，索引器书写的位置应该是所有成员之前；
-
在严格的检查下，可以实现为类动态增加成员，可以实现动态的操作类成员：
class User { [props: string]: any // 这里的 any 可以是联合类型等 name: string = 'cll' age: number = 9 } const u = new User(); u['pid'] = '123' -
在 JS 中，所有的成员名本质上，都是字符串，如果使用数字作为成员名，会自动转换为字符串；在 TS 中，如果某个类中使用了两种类型的索引器，要求两种索引器的值类型必须匹配，或者是子集；
interface A { } class User { [props: number]: A [props: string]: object } const u = new User(); u[0] = {}; u['pid'] = {};
keyof T 联合成员的过滤
-
先使用 keyof 进行计算，再使用 extends 进行过滤；
type T = { [k: string]: string | number; a: string; b: number; c: 1; } type keys = keyof T; type U1 = 'a' | 'b'; // 最后 T4 是一个 {} type T4 = { [k in keys as (k extends U1 ? k : never)]: T[k]; } -
keyof T 在 in 的右侧时，求值但不合并
type T = { [k: string]: string | number; a: string; b: number; c: 1; } // 最后 T4 是一个 { c: 1 } type T4 = { // keyof T 在in的右侧时，求值但不合并 [k in keyof T as (k extends 'c' ? k : never)]: T[k]; }
打赏作者
您的打赏是我前进的动力
微信
支付宝
📱 WebView 介绍
上一篇
评论
