如何使用导入数组构建 Typescript 字符串文字类型？

Question

在我的配置文件config.js文件之一中，我有：

module.exports = {
    locales: ['en', 'fr']
}

在我的库中，我尝试导入config.js文件并将其转换为 typescript 自由类型，如下所示：

import config from "config.js"

const tempDefaultLocales = [...config.locales] as const
export type Language = typeof tempDefaultLocales[number]

但是Language的类型是string而不是"en" | "fr" "en" | "fr"

如果我不导入而只是硬输入它，那么as const就可以工作。 例子：

const locales = ["en","fr"] as const
type Language = typeof locales[number]

给我正确的"en" | "fr" "en" | "fr"

知道如何在不将我的配置文件更改为ts或对其进行硬编码的情况下完成这项工作吗？

这是一个沙箱： https://codesandbox.io/s/awesome-swirles-ij4qsg?file=/src/App.tsx

PS：我无法将配置更改为ts ，因为配置文件实际上是next.config.js ，他们不允许我们更改它，我想避免使用 2 个配置文件来设置我的语言。 谢谢

Answer 1

将此添加为新答案，因为它是一种不同的方法。

尝试用正确的 JSDoc 注释标记导出的 JS，这应该被 TS 读取：

module.exports = /** @type {const} */ ({
    locales: ['en', 'fr']
})

这是自 4.5 以来支持的。 看这里。 工作代码和框。

Answer 2

将导出的 object 定义为常量。 这里的工作示例。

module.exports = {
    locales: ['en', 'fr']
} as const

as const不“传播”。 您不能在其他地方定义另一个不是 const 的变量，然后假设它会将其视为一个变量，因为源数据中缺少as const保证，因此 typescript 不能保证它不会更改或添加到一些其他代码。