面试题：TypeScript 中如何实现与 JavaScript 类似的动态属性访问，有哪些区别？

Question

在 JavaScript 中，我们可以通过对象的属性名动态访问属性，例如`obj[key]`。在 TypeScript 中，如何实现类似功能？这种实现方式与 JavaScript 有什么不同的地方，特别是在类型检查方面？请举例说明。

Answer 1

在 TypeScript 中，可以通过索引类型实现类似功能。

1. 实现方式 假设我们有一个对象类型定义，然后可以通过索引类型来动态访问属性。例如：

interface MyObject {
    name: string;
    age: number;
}

const myObj: MyObject = { name: 'John', age: 30 };
const key: keyof MyObject = 'name';
const value = myObj[key];
console.log(value); // 输出: John

这里keyof MyObject获取MyObject类型的所有键的联合类型，确保动态访问的键是对象实际拥有的键。

2. 与 JavaScript 的不同 - 类型检查
   • JavaScript：在 JavaScript 中，使用obj[key]时，只要key是一个有效的字符串或符号，就可以访问属性，不会进行严格的类型检查。例如：

const obj = { name: 'John', age: 30 };
const key = 'address';
const value = obj[key];
console.log(value); // 输出: undefined，不会报错

这里即使对象obj没有address属性，代码也不会报错，只是返回undefined。

• TypeScript：在 TypeScript 中，如果尝试使用对象不存在的键进行动态访问，会报错。例如：

interface MyObject {
    name: string;
    age: number;
}

const myObj: MyObject = { name: 'John', age: 30 };
const key: keyof MyObject = 'address'; // 这里会报错，因为 'address' 不是 MyObject 的键
const value = myObj[key];

TypeScript 会在编译时进行类型检查，确保动态访问的键在对象类型定义中有对应的属性，提高了代码的健壮性和可维护性。