如何在TypeScript中为自定义属性对象实现代码补全？

要实现让Thing类的props根据传入的自定义对象自动获得类型提示，无需手动定义每个场景的接口，可以用TypeScript泛型改造类，让类的类型与传入参数对象的类型绑定：

改造后的实现代码 #

手动指定泛型参数（明确类型场景） #

class Thing<T extends Record<string, any>> {
    props: T;

    init(obj: T) {
        this.props = obj;
    }
}

// 实例化时指定传入对象的类型，后续访问props自动获得补全
const thing = new Thing<{ propA: string; propB: number }>();
thing.init({
    propA: "HELLO WORLD",
    propB: 1
});

自动推导泛型参数（更简洁的写法） #

class Thing<T extends Record<string, any>> {
    props!: T; // 用!标记非空，确保init初始化后可安全访问

    init(obj: T) {
        this.props = obj;
    }
}

// 无需手动指定泛型，TypeScript会自动推导传入对象的类型
const thing = new Thing();
thing.init({
    propA: "HELLO WORLD",
    propB: 1
});

// 新增属性时，直接修改传入对象即可自动获得补全提示
thing.init({
    propA: "HELLO WORLD",
    propB: 1,
    propC: "GOODBYE WORLD"
});

核心原理 #

• 泛型T被约束为Record<string, any>，确保传入的是合法键值对对象；
• 类的props属性类型与init方法的参数类型绑定为同一个泛型T；
• 当调用init传入具体对象时，TypeScript会自动推导T的具体类型，从而在访问thing.props.时提供对应的属性补全；
• 作为共享模块，Thing类无需修改任何代码，每个使用场景传入不同的自定义对象，都会自动生成对应的类型支持。

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