如何让TypeScript编译器对无效带引号属性抛出错误？

要解决带引号属性访问的类型安全问题，核心是调整TypeScript的编译配置，让编译器严格校验方括号语法的属性访问：

1. 启用noImplicitAny编译选项 #

这个选项是关键——当你用方括号访问一个类型中不存在的属性时，编译器会因为无法推断出合法类型（默认会退化为any）而直接抛出错误。

你可以在tsconfig.json中配置：

{
  "compilerOptions": {
    "noImplicitAny": true,
    // 推荐直接开启全严格模式，包含noImplicitAny及其他安全校验
    "strict": true
  }
}

开启后，你示例中的UserContact["PhoneNumber"]会直接触发编译错误，因为ContactDetails类型中不存在名为"PhoneNumber"的属性，编译器无法确定该访问的返回类型，不会再静默返回undefined或允许赋值。

2. 为外部数据定义精确类型 #

对于含空格或特殊命名的外部数据（比如external_db_row["Email Address"]），不要直接用any类型接收，而是提前定义匹配的类型结构：

type ExternalDbRow = {
  "Email Address": string;
  "Full Name": string;
  // 其他对应属性
};

const external_db_row: ExternalDbRow = /* 外部数据赋值 */;
// 合法访问，会被类型校验
const userEmail = external_db_row["Email Address"];
// 非法访问会直接报错
const invalidProp = external_db_row["Invalid Field"];

3. 约束动态索引的类型 #

如果需要用变量作为索引访问属性，要确保变量的类型是目标类型的属性名联合类型（通过keyof关键字）：

type ContactDetails = {
  "Email": string;
  "HomeAddress": string;
};

const UserContact: ContactDetails = { /* ... */ };

// 正确：key的类型被约束为ContactDetails的属性名
const key: keyof ContactDetails = "Email";
const validValue = UserContact[key];

// 错误：类型不匹配，编译报错
const invalidKey: string = "PhoneNumber";
const invalidValue = UserContact[invalidKey];

补充：配合ESLint规则强化约束 #

如果需要进一步限制带引号属性的使用场景，可以添加ESLint规则（比如@typescript-eslint/dot-notation），强制优先使用点语法访问属性，仅在必要时（比如属性名含空格）使用方括号语法，减少误操作的可能。

内容的提问来源于stack exchange，提问作者Matt Korostoff