如何在TypeScript中定义带有动态键的泛型类？

报错原因 #

TypeScript 不支持在类定义中直接使用泛型参数作为索引签名的键类型，类的索引签名仅支持 string、number 这类固定基础类型，你写的 [name: keyof M] : M[name] 属于不被支持的语法，后续两个报错都是该语法问题触发的连锁报错。

修复方案 #

可以通过同名接口与类自动合并的特性实现需求，修复后的代码如下：

type Methods = {
    [name:string]: Function
}

// 泛型接口继承传入的方法类型，声明动态属性的类型
interface App<M extends Methods> extends M {}

// 同名类实现逻辑部分，类型会自动和上面的接口合并
class App<M extends Methods> {
    constructor(methods: M) {
        // 把传入的方法实例挂载到当前类实例上
        Object.assign(this, methods)
    }
}

// 测试示例
const methods = {
    action: () => console.log('执行action'),
    move: () => console.log('执行move')
}

const myApp = new App(methods)
// 此时可以正常获得属性提示，类型完全匹配
myApp.action()
myApp.move()

方案说明 #

• 接口中用 extends M 相当于把传入的 Methods 类型里的所有属性映射到 App 的类型定义中，满足动态属性的类型声明需求
• 类的构造函数中通过 Object.assign 把传入的方法挂载到实例，运行时也可以正常调用对应的方法

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