TypeScript类中设置可选Header遇类型错误，如何解决？（v4.7.4）

问题原因 #

你定义的headers类型是object，在TypeScript中，普通object类型不允许使用字符串作为索引访问或设置属性，所以当你用header.key（字符串类型）操作this.headers时，就会触发这个类型错误。

解决方案 #

以下是几种实用的修复方式：

1. 使用Record<string, string>定义类型 #

把headers的类型从object改为Record<string, string>，这是TypeScript专门用来描述键值对结构的工具类型，明确键为字符串、值为字符串：

export default class ErrorResponseModel {
    body: string
    headers: Record<string, string> // 修改此处类型
    statusCode: number

    constructor(message: object, statusCode: number = 500, header?: {key: string, value: string}) {
        this.headers = {
            'Content-Type': 'application/json'
        }
        this.body = JSON.stringify(message)
        this.statusCode = statusCode

        if (header) {
            this.headers[header.key] = header.value
        }
    }
}

2. 直接定义字符串索引签名 #

也可以给headers添加字符串索引签名，效果和上面一致：

export default class ErrorResponseModel {
    body: string
    headers: { [key: string]: string } // 字符串索引签名
    statusCode: number

    constructor(message: object, statusCode: number = 500, header?: {key: string, value: string}) {
        this.headers = {
            'Content-Type': 'application/json'
        }
        this.body = JSON.stringify(message)
        this.statusCode = statusCode

        if (header) {
            this.headers[header.key] = header.value
        }
    }
}

3. 临时类型断言（不推荐） #

如果只是临时绕过类型检查，可以用类型断言，但这种方式会丢失TypeScript的类型保护能力，不建议长期使用：

if (header) {
    (this.headers as Record<string, string>)[header.key] = header.value
}

说明 #

优先推荐前两种方法，它们能明确headers的类型结构，让TypeScript正确校验索引操作的合法性，同时保留类型检查的优势。

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