I have an array in a .js file and I want to use it as a tuple in a .ts file. It's a .js file because it's used by config files such as webpack.config.js. Is it possible to import it as a tuple?
E.g.:
entityTypes.js:
export default ['foo', 'bar'];
main.ts:
import type entityTypes from 'entityTypes';
typeof entityTypes[number]; // if `entityTypes` is a tuple, this would be 'foo' | 'bar'
In general, Typescript does not analyze JS files, and it'll just type anything imported from there as any if no other type is given. Therefore it is impossible to type the array as a tuple without retyping all the strings.
However it is possible to export it as a tuple (if the exporting code would be typescript) with as const:
export default ['foo', 'bar'] as const;
It doesn't seem to be officially documented, but this blogpost describes it in detail.
.js file it'll be a warningYou can try something like this:
const myArray = ['foo', 'bar'] as const;
type ArrayToTuple<T extends ReadonlyArray<string>, V = string> = keyof {
[K in (T extends ReadonlyArray<infer U> ? U : never)]: V
};
type MyTuple = ArrayToTuple<typeof myArray>;
const shouldPass: MyTuple = 'foo';
const shouldFail: MyTuple = 'hello';
In my case I had an array and needed a tuple type because called code wants to make sure there is a certain number of elements in the array. My solution was this:
function To4Tuple<T>(arr: T[]): [T, T, T, T] | undefined {
if (arr.length === 4) return [arr[0], arr[1], arr[2], arr[3]];
else return undefined;
}
Might need more overloads for other lengths.
*.d.tsfile for yourentityTypes.jsfile?entityTypesis a tuple, this would be'foo' | 'bar'" - sounds like you want to usekeyof- but I'm not sure how that would work with a[ string, string ].entityTypesas an object and exportObject.keys(entityTypes). Then, in TS, I can dokeyof typeof entityTypes