0

In one of my config files config.js file, I have:

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

In my library, I try to import the config.js file and turn it into a typescript liberal type like so:

import config from "config.js"

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

But the type of Language is string and not "en" | "fr"

If I don't import and just hard type it, the as const works. Example:

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

Gives me the correct type of "en" | "fr"

Any idea how I can make this work without changing my config file to ts or hardcoding it?

Here is a sandbox: https://codesandbox.io/s/awesome-swirles-ij4qsg?file=/src/App.tsx

PS: I can't change the config to ts because the config file is actually next.config.js and they don't allow us to change it and I want to avoid having 2 config files to set my languages. Thanks

Improve this question
2
  • 1
    Why can't you change the config file to TypeScript? Commented Oct 24, 2022 at 16:50
  • @T.J.Crowder The config file is actually the next.config.js from NextJS. I'm trying to just have one file to update my language settings, if no choice, I would need to define and update the language in 2 files for internationalization to work. I checked a request on github to support ts for the config file but they don't plan on doing it. Commented Oct 24, 2022 at 16:59

2 Answers 2

Reset to default
4

Adding this as a new answer as it's a different approach.

Try to markup the exported JS with the correct JSDoc annotations, which should be read by TS:

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

This was supported since 4.5. See here. Working codesandbox.

enter image description here

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

Just confirmed it as working on codesandbox: codesandbox.io/s/empty-moon-qr01s8?file=/src/index.ts.
Probably worth me noting that you won't need to as const in the consumer anymore since it will already appear as read-only when imported.
Nice one! I'm cross with myself about not remembering JSDoc. :-)
The is a neat workaround. I found to get it working I have to add "allowJs": true to tsconfig.json.
0

Define the exported object as a const. Here is a working example.

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

as const does not "propogate". You can't define another variable somewhere else that isn't a const and then assume it will treat it as one because the as const guarantees are missing on the source data, so TypeScript can't guarantee it won't change or be added to by some other code.

Improve this answer

5 Comments

Thanks for the answer, but I can't change the config file to ts and so the as const generates an error.
What if you moved that object to another file (a ts one) and imported it were you need it.
The other option would be to make a declaration file for the JS file, so you can have the export types defined seperately.
@adsy - Which is effectively hardcoding it (which the OP said they didn't want to do), just hidden off elsewhere. :-|
I read what he said differently. He says "If I don't import and just hard type it, the as const works.". Its ambiguous but I think declaration files wouldn't be against what he wants. He wants this locale list to be in one canonical place and not to convert that particular file it is in now to TS. So the options are to move it to somewhere where it can be represented as TS, or write declarations for it. Those allow him to keep it in one canonical place. However, I have another idea...will post a new answer.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.