如何在 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())
}

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

一旦您有了字符串索引签名，所有显式成员也必须符合该索引签名。这是为了提供安全性，以便任何字符串访问都会给出相同的结果。

参考：How to combine declared interface properties with custom Index Signature