TypeScript中为何用{[key: string]: any}索引签名而非object类型？

你在工具函数里见的这个写法非常常见，别觉得值类型写了any就没用，它和TS内置的object类型逻辑差得很远，实用性很强。

首先先讲TS里的object类型到底是什么：它的约束非常弱，只校验你传的值不是原始类型（也就是不能传string/number/boolean/null/undefined/symbol/bigint），但完全不允许你操作这个值的任何属性，只要你写xxx.xxx读属性，TS直接飘红报错。

function handleObj(res: object) {
  // 这行直接报类型错误：类型“object”上不存在属性“css”
  console.log(res.css)
}

你想啊，写工具函数比如你例子里的template，本来就是要拿到传入的资源对象，读里面的各种字段做渲染，用object类型的话，连属性都读不了，根本没法写逻辑，总不能每读一个属性就做一次类型断言吧？

那{[key: string]: any}解决的就是这个问题，它的实用价值主要有这几点：

• 放开对象属性的操作权限。它明确告诉TS：这个值是标准的键值对结构对象，你可以任意读、写字符串类型key对应的属性，不会因为属性没提前声明就报类型错，完全匹配JS里操作普通对象的习惯。
• 比直接用any类型更安全。如果把参数直接标成any，那调用方传字符串、数字、null进来都不会报错，很容易出运行时bug；但用这个索引签名类型，传原始值进来TS会直接拦截报错，至少能保证传入的值是可以遍历、可以取属性的对象。
• 适配不确定结构的入参场景。类似模板渲染、数据合并、通用遍历这类工具函数，根本不可能提前预知调用方会传什么结构的对象——比如传的资源对象可能有css/html/static各种自定义字段，用索引签名就不需要提前把所有字段都列出来，灵活度足够。

两者核心差异可以直接记这三点：

1. 操作权限不同：object类型禁止读写任何属性，{[key: string]: any}允许任意字符串key的属性操作
2. 约束边界不同：object仅排除原始值，函数、数组、普通对象都能传，但啥属性都不让碰；{[key: string]: any}同样排除原始值，允许属性操作，数组、带属性的函数也兼容（因为本质都是对象，支持字符串索引访问）
3. 语义不同：object的语义是「只要是个非原始值就行，我不操作它的属性」，{[key: string]: any}的语义是「这是个键值对集合，我要通过key存取里面的内容」

你例子里的template函数用这个类型就非常合理：它本身不关心传入的资源对象具体有哪些字段，只要是键值对格式的对象就能处理，用这个类型既不会给调用方加多余的类型约束，也能避免传原始值导致的运行时错误，还不会让函数内部读属性的时候满屏飘红。

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