TypeScript如何将interface的属性名作为函数参数的类型

直接使用 TypeScript 内置的 keyof 类型运算符即可，无需手动枚举接口的所有属性：

• keyof 接收一个类型作为入参，会返回由该类型所有公共属性名组成的字面量联合类型，会随接口定义自动更新，适配任意属性数量的场景。

基础适配代码 #

interface Column {
   id: string,
   title: string,
   description: string
}

// 直接用 keyof Column 替代手动枚举的联合类型
const replaceColumnProperty = (col: Column, property: keyof Column, val: string) => {
   col[property] = val;
}

上述代码中 keyof Column 和你手动编写的 'id' | 'title' | 'description' 完全等价。

进阶类型优化（适配属性值类型不一致的场景） #

如果你的接口存在多种类型的属性值（比如数值、布尔值等），可以搭配泛型实现更严谨的类型校验，避免传入的属性值和属性实际类型不匹配：

interface Column {
   id: string,
   title: string,
   description: string,
   order: number, // 新增数值类型属性
   disabled: boolean // 新增布尔值类型属性
}

// 泛型自动匹配属性对应的值类型
const replaceColumnProperty = <K extends keyof Column>(col: Column, property: K, val: Column[K]) => {
   col[property] = val;
}

// 调用时会自动校验参数类型
const testCol: Column = {id: '1', title: '测试', description: '示例', order: 1, disabled: false}
replaceColumnProperty(testCol, 'order', 2) // 合法，number 类型匹配 order 属性要求
replaceColumnProperty(testCol, 'disabled', 'true') // 会直接抛出类型错误，参数类型不匹配

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