如何在 TypeScript 中使用索引签名和动态变量键入对象？

Question

我是 TypeScript 的新手，尝试过多种输入方式，但运行遇到索引签名问题。界面应该是什么样的？

interface MyConfig {
...
}

// someVar can be any string
let someVar = "dynamicKey";

// the structure of the object cannot change
const config: MyConfig = {
  myObj: {
    [someVar]: {
      firstProp: 'some text',
      secondProp: 'some text',
    },
    thirdProp: 'some text',
  },
};

Answer 1

如果您知道 someVar 变量的一个或多个确切值，您可以有一个严格的接口，如：

interface MyConfig {
    myObj: {
        SomeKey: {
            firstProp: string
            secondProp: string
        },
        thirdProp: string
    }
}

那么你可以使用：

const someVar = "SomeKey";

const config: MyConfig = {
    myObj: {
        [someVar]: {
            firstProp: 'some text',
            secondProp: 'some text',
        },
        thirdProp: 'some text',
    },
};

但是如果您希望 someVar 是动态的，那就有点棘手了。为此，我建议您将动态部分移动到一个单独的块中，这样您就可以使用：

interface MyConfig {
    myObj: {
        dynamic: {
            [key: string]: {
                firstProp: string
                secondProp: string
            }
        },
        thirdProp: string
    }
}

const someVar = "SomeKey";
const config: MyConfig = {
    myObj: {
        dynamic: {
            [someVar]: {
                firstProp: 'some text',
                secondProp: 'some text',
            },
        },
        thirdProp: 'some text',
    },
};

最后，如果您有动态 someVar 并且无法更改数据结构。您可以使用以下内容：

interface MyConfig {
    myObj: ({
        [key: string]: {
            firstProp: string
            secondProp: string
        } | string
    } & {
        thirdProp: string
    })
}
const someVar: string = "SomeKey";

const config: MyConfig = {
    myObj: {
        [someVar]: {
            firstProp: 'some text',
            secondProp: 'some text',
        },
        thirdProp: 'some text',
    },
};

// String
console.log(config.myObj.thirdProp.trim())

// Error, union string | object
console.log(config.myObj.abc.firstProp)

if (typeof config.myObj.abc === 'object') {
    // string
    console.log(config.myObj.thirdProp.trim())
    // string
    console.log(config.myObj.abc.firstProp.trim())
}

在此示例中，我们使用打字稿索引签名 + 我们指定已知属性。您还可以注意到一件奇怪的事情——索引签名有联合 object | string。这是因为打字稿限制：

As soon as you have a string index signature, all explicit members must also conform to that index signature. This is to provide safety so that any string access gives the same result.

参考：

如何在 TypeScript 中使用索引签名和动态变量键入对象？

How to type object with index signature and dynamic variable in TypeScript?

types

typescript

index-signature