TypeScript-索引访问操作符
原创
前言
TypeScript的索引访问操作符（Index Access Operator）允许您通过变量名或字符串来访问对象的属性。这种灵活性使您可以在运行时动态确定要访问的属性名称，增强了代码的可扩展性和动态性。例如，您可以使用obj[key]来访问对象obj中名为key的属性，这在处理动态数据或配置时非常有用。这一特性让TypeScript在应对各种数据结构和动态场景时表现得更为强大。
通过
[]索引类型访问操作符, 我们就能得到某个索引的类型
class Person {
name: string;
age: number;
}
type MyType = Person['name'];验证方式为，按住键盘的 ctrl 键 + 鼠标左键然后放到 MyType 上方即可。
应用场景
博主假设有这么一个需求: 获取指定对象, 部分属性的值, 放到数组中返回：
首先在来演变过程也就是说先不给出最终完整的代码：
let obj = {
name: 'yangbuyiya',
age: 18,
gender: true
}
function getValues<T, K extends keyof T>(obj: T, keys: K[]) {
let arr = [];
keys.forEach(key => {
arr.push(obj[key]);
});
return arr;
}
let res = getValues(obj, ['name', 'age']);
console.log(res);运行效果如下发现是可以进行实现的，但是还是有问题：
如上的函数我是没有指定具体的返回的数据类型的，如果要指定返回的数据类型，那么就可能是 string、number、boolean、那么这个时候就可以利用 索引类型访问操作符 来进行解决该问题最终代码如下：
let obj = {
name: 'yangbuyiya',
age: 18,
gender: true
}
function getValues<T, K extends keyof T>(obj: T, keys: K[]): T[K][] {
let arr = [] as T[K][];
keys.forEach(key => {
arr.push(obj[key]);
})
return arr;
}
let res = getValues(obj, ['name', 'age']);
console.log(res);通过索引类型访问操作符解决该问题其实它内部就是自动转换为了联合，例如我现在返回的既有 string、又有 number 那么返回值类型就自动转换为了 (string | number)[]，验证方式为，按住键盘的 ctrl 键 + 鼠标左键然后放到 res 上方即可。
索引访问操作符注意点
不会返回
null/?developer/article/2334394/undefined/never类型
interface TestInterface {
a: string,
b: number,
c: boolean,
d: symbol,
e: null,
f: ?developer/article/2334394/undefined,
g: never
}
type MyType = TestInterface[keyof TestInterface];验证方式为，按住键盘的 ctrl 键 + 鼠标左键然后放到 MyType 上方即可。
最后
本期结束咱们下次再见?~
? 关注我不迷路，如果本篇文章对你有所帮助，或者你有什么疑问，欢迎在评论区留言，我一般看到都会回复的。大家点赞支持一下哟~ ?
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。