TypeScript中HTMLElement无'string'索引签名的原因及解决方法

问题原因 #

• 当你写const key = "showModal"时，TypeScript会自动推断key的类型为字面量类型"showModal"——这个值是HTMLDialogElement明确包含的方法名，TypeScript能确认dialog[key]是合法的函数，因此不会报错。
• 但显式声明key: string时，TypeScript会认为key可以是任意字符串。而HTMLDialogElement的类型定义里并没有针对任意字符串的索引签名，TypeScript无法保证任意字符串对应的属性/方法存在，所以会抛出“未找到string类型索引签名”的错误。

解决办法 #

1. 用字面量/联合类型约束key #

把key的类型限定为具体的方法名字面量（或多个方法名的联合类型），让TypeScript明确知道key对应的方法存在：

const dialog = document.getElementById("input-dialog") as HTMLDialogElement;

const someFunction = () => {
  // 单个方法字面量类型
  const key: "showModal" = "showModal";
  dialog[key]();

  // 多个方法的联合类型
  const anotherKey: "showModal" | "close" = "close";
  dialog[anotherKey]();
};

2. 使用类型断言 #

如果你能确定当前key对应的方法一定存在，可以用类型断言直接告诉TypeScript该属性是函数：

const dialog = document.getElementById("input-dialog") as HTMLDialogElement;

const someFunction = () => {
  const key: string = "showModal";
  // 断言为无参函数类型
  (dialog[key] as () => void)();
};

3. 扩展类型添加索引签名（不推荐） #

通过扩展HTMLDialogElement类型添加字符串索引签名，但这会绕过TypeScript的类型检查，可能导致后续调用不存在的方法时无法被检测到，谨慎使用：

// 扩展类型添加索引签名
interface HTMLDialogElementWithIndex extends HTMLDialogElement {
  [key: string]: any;
}

const dialog = document.getElementById("input-dialog") as HTMLDialogElementWithIndex;

const someFunction = () => {
  const key: string = "showModal";
  dialog[key]();
};

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