Typescript中使用 中括号语法 [ ] 访问对象中不存在的key时，为何没有报错？

今天遇到一个小问题，和大家分享下。

有如下场景：

interface PersonInfo {
    name: string
    age: number
}
const data: PersonInfo = {
    name: 'abc',
    age: 1
}

const a = data.gender // 报错:类型上不存在gender
const b = data['gender'] // 不报错，且b为any

const str = 'gender'
const c = data[str] // 不报错，且c为any

为什么会这样呢，为什么点语法会报错，中括号就不报错呢

答案如下：

在 TypeScript 中，使用点语法访问对象属性时，编译器会检查属性名是否存在于对象的类型定义中。如果不存在，编译器会在编译时报错。

当使用中括号语法访问对象属性时，TypeScript 编译器不会检查对象类型定义中是否存在该属性名。这意味着，即使对象类型定义中没有该属性，也不会在编译时报错。相反，使用中括号语法访问不存在的属性时，返回值的类型会被推断为 any，即任意类型。

为什么TypeScript在使用中括号的时候不去检查对象类型中有无定义该属性呢？

因为这种语法的灵活性更高，可以让程序员在运行时动态地确定要访问的属性名，这对一些动态性比较强的场景非常有用。

例如，假设我们需要根据用户输入的不同属性名，从一个对象中获取对应的属性值。如果使用点语法，我们需要手动编写多个 if 语句来判断输入的属性名是哪个，这样会导致代码变得冗长而不够灵活：

typescriptCopy code
if (property === 'name') {
  value = person.name;
} else if (property === 'age') {
  value = person.age;
} // 更多类似的判断

而如果使用中括号语法，我们可以直接使用输入的属性名来访问对象的属性，这样可以避免编写冗长的 if 语句：

typescriptCopy code
value = person[property];