TypeScript使用Object.keys遍历对象时字符串无法索引类型报错如何解决

报错原因 #

Object.keys() 方法的默认返回类型是string[]，TypeScript无法确认返回的字符串都是目标接口的合法属性名，所以用字符串类型的变量索引固定结构的接口时就会触发该报错。
另外你当前代码还存在参数类型和实际传入值不匹配的问题：你定义的encode函数入参是Data类型（仅包含一个data属性，值为Options类型），但你描述实际传入的是直接带name/email/message三个属性的对象，需要先对齐参数类型再修复索引报错。

推荐解决方案（最安全，保留完整类型校验） #

如果你实际要序列化的就是带name/email/message的对象，直接修改参数类型并对Object.keys的返回值做类型断言即可：

interface Options {
    name: string;
    email: string;
    message: string;
}

function encode(data: Options) {
    // 把key的类型断言为Options的合法属性组成的数组
    return  (Object.keys(data) as Array<keyof Options>)
            .map(key => encodeURIComponent(key) + '=' + encodeURIComponent(data[key]))
            .join('&');
}

特殊场景适配 #

如果你确实需要处理外层包了data字段的Data类型对象，调整代码如下即可：

interface Data {
    data: Options;
}

interface Options {
    name: string;
    email: string;
    message: string;
}

function encode(data: Data) {
    const targetData = data.data;
    return  (Object.keys(targetData) as Array<keyof Options>)
            .map(key => encodeURIComponent(key) + '=' + encodeURIComponent(targetData[key]))
            .join('&');
}

替代方案（不推荐，会丢失类型校验能力） #

你也可以给接口添加字符串索引签名解决报错，但是后续给接口新增属性时会失去类型校验，不建议使用：

interface Options {
    name: string;
    email: string;
    message: string;
    // 声明所有字符串类型的键对应的值都是string
    [key: string]: string;
}

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