TypeScript 如何做动态属性

很多刚接触TypeScript的小伙伴，都会在写代码时遇到这么个头疼的问题：明明知道某个对象里可能会加一个临时的、不确定的属性，却又怕写出来的代码不符合TypeScript的类型规则。比如你做一个外卖小程序，要根据用户选的“冰度”“甜度”，动态往订单对象里加对应的属性，这时候怎么用TypeScript处理才不会报错？今天就用生活化的例子，给大家讲清楚TypeScript做动态属性的几种实用方法，看完就能直接用到项目里。

用索引签名搞定“不确定的键”

最常见的动态属性场景，就是不知道对象里会出现哪些键，但知道键和值的类型。比如你有一个“用户偏好配置”的对象，里面可能有“音乐音量”“字体大小”，也可能有用户之后加的“暗黑模式开关”“通知频率”，所有属性的键都是字符串，值都是字符串或数字。这时候用索引签名就特别简单，就像给对象加一个“万能属性框”，不管加什么键，只要类型符合就行。

举个生活化的例子，你家里的收纳柜，每个格子都贴了标签（键），但有时候你会临时塞一个没贴标签的东西进去，这个收纳柜的“索引签名”就是“所有格子都能放任意物品”，只要你拿的时候知道是什么类型。对应的代码里，只要给对象加[key: string]: 类型，比如{[key: string]: string | number}，不管你往这个对象里加多少动态属性，TypeScript都不会报错。

用类型交叉合并“固定+动态属性”

有时候你需要对象既有几个固定的属性，又能加动态属性，这时候就可以用类型交叉。还是用外卖的例子：订单对象必须有“餐品名称”“配送地址”这两个固定属性，但还要根据用户的选择，动态加“备注”“指定时间”这些属性。固定属性是确定的，动态属性是不确定的，交叉类型就相当于把“固定属性的表单”和“空白备注栏”合并，既保证必填项都在，又能随便加内容。

具体写法就是把固定属性的类型和动态属性的类型用&连起来，比如OrderBase & { [key: string]: string }。这样定义出来的对象，你既不能少写“餐品名称”这些必填项，也能随便加其他字符串键的属性，完美适配需要“部分固定、部分动态”的场景。

用Record类型简化动态属性定义

如果动态属性的键和值的类型已经确定，用Record类型会比索引签名更简洁。Record就相当于一个“预填好类型的索引签名”，它的写法是Record<键的类型, 值的类型>。还是用用户偏好的例子，键都是字符串，值都是字符串或数字，用Record<string, string | number>就比写{[key: string]: string | number}更清晰，读代码的人一眼就能知道这是个“键为字符串、值为混合类型”的对象。

比如你做一个商品筛选功能，用户可以根据不同分类选属性，比如“手机”分类下有“内存”“颜色”，“笔记本”分类下有“CPU”“尺寸”，这时候用Record定义筛选条件对象，不管加多少动态分类属性，都能保证类型正确，不会出现“把颜色值写成数字”这种低级错误。

注意别踩的小坑

用动态属性时，有个很容易踩的坑：如果直接给普通对象加动态属性，TypeScript会报错，因为它不知道这个新属性的类型。比如你定义了const userPref = { musicVol: 50, font: '14px' }，然后直接写userPref.darkMode = true，TypeScript会说“darkMode不存在于类型中”。这时候要么用上面的索引签名/交叉类型重新定义对象，要么用类型断言（比如userPref as any），但更推荐前者，因为any会失去类型保护，容易出bug。

总的来说，TypeScript处理动态属性并不复杂，只要根据自己的场景选对方法：只需要动态键就用索引签名或Record，需要固定+动态就用交叉类型，避开直接给普通对象加属性的坑，就能写出既灵活又符合类型规则的代码。这些方法在日常开发中特别实用，比如表单动态字段、配置文件扩展、用户自定义属性等场景，都能直接套用。