如何在TypeScript中用方法扩展类参数并保留类型提示？

定义了包含attributes方法的Entity接口，通过该方法在运行时为实例填充属性，但遇到以下问题：

• 使用索引访问属性时无TypeScript类型提示
• 使用点语法访问属性时无法编译

代码示例：

interface Entity {
    id: number

    attributes(): { [attribute: string]: any }
    [attribute: string]: any
}

class BasicEntity implements Entity {
    id: number

    constructor(id: number) {
        this.id = id

        for (const [name, value] of Object.entries(this.attributes())) {
            this[name] = value
        }
    }

    attributes() {
        return {
            DATE: 'TODAY',
            OPINION: 'BASED',
        }
    }
}

const entity = new BasicEntity(0)

entity['DATE'] = 'TOMORROW' // 可编译，但无类型提示
entity.DATE = 'TOMORROW' // 无法编译

已知attributes()的返回值在编译时是常量且明确，需要在运行时填充属性的同时保留TypeScript类型提示。

方法1：利用字面量类型与ReturnType提取属性类型 #

通过as const让TypeScript推断attributes返回值的字面量类型，再用ReturnType提取该类型，让类同时实现Entity接口与属性类型，确保编译时类型可见。

interface Entity {
    id: number
    attributes(): Record<string, any>
}

class BasicEntity implements Entity, ReturnType<BasicEntity['attributes']> {
    id: number
    // 声明属性以满足类型实现要求，值由构造函数赋值
    DATE: string
    OPINION: string

    constructor(id: number) {
        this.id = id
        const attrs = this.attributes()
        // 批量赋值属性
        Object.assign(this, attrs)
    }

    attributes() {
        // 使用as const固定返回值的字面量类型
        return {
            DATE: 'TODAY',
            OPINION: 'BASED',
        } as const
    }
}

const entity = new BasicEntity(0)
entity.DATE = 'TOMORROW' // 可编译，且有类型提示
entity['OPINION'] = 'UNBASED' // 同样支持索引访问并提供类型提示

方法2：泛型基类+预定义属性常量 #

将属性定义为常量并提取其类型，通过泛型基类复用属性填充逻辑，子类只需指定属性类型即可，减少重复代码。

// 预定义属性常量，用as const锁定类型
const basicEntityAttrs = {
    DATE: 'TODAY',
    OPINION: 'BASED',
} as const
// 提取属性类型
type BasicEntityAttrs = typeof basicEntityAttrs

// 泛型Entity接口
interface Entity<T extends Record<string, any>> {
    id: number
    attributes(): T
}

// 泛型基类处理属性填充逻辑
class BaseEntity<T extends Record<string, any>> implements Entity<T> {
    id: number
    // 结合泛型与索引签名，确保类型兼容性
    [key: string]: T[keyof T] | number | (() => T)

    constructor(id: number) {
        this.id = id
        Object.assign(this, this.attributes())
    }

    attributes(): T {
        throw new Error('子类需重写attributes方法')
    }
}

// 子类继承泛型基类并指定属性类型
class BasicEntity extends BaseEntity<BasicEntityAttrs> {
    attributes(): BasicEntityAttrs {
        return basicEntityAttrs
    }
}

const entity = new BasicEntity(0)
entity.DATE = 'TOMORROW' // 正常编译，类型提示生效
entity['DATE'] = 'YESTERDAY' // 索引访问同样有类型约束

方法3：类型断言结合构造函数赋值 #

如果不想显式声明属性，可在构造函数中通过类型断言让TypeScript识别实例的完整类型，适合属性较多的场景。

interface Entity {
    id: number
    attributes(): Record<string, any>
}

// 提取BasicEntity的属性类型
type BasicEntityProps = { id: number } & ReturnType<typeof BasicEntity.prototype.attributes>

class BasicEntity implements Entity {
    id: number

    constructor(id: number) {
        this.id = id
        Object.assign(this, this.attributes())
        // 通过类型断言让实例符合完整类型
        return this as unknown as BasicEntityProps
    }

    attributes() {
        return {
            DATE: 'TODAY',
            OPINION: 'BASED',
        } as const
    }
}

const entity = new BasicEntity(0)
entity.DATE = 'TOMORROW' // 可编译并提供类型提示

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