TypeScript utilizes a number of heuristic rules to determine the type of a variable that is initialized with a literal value. While these rules generally work well in many scenarios, they are not flawless.
For example:
const arr = [{ message: "hello" }, { message: "goodbye" }];
// const arr: { message: string; }[]
In this case, arr is inferred to be an array of objects with a message property of type string, rather than a literal type like "hello" or "goodbye", which allows for modifications to be made to the messages later on:
arr.forEach(o => o.message += "!"); // make messages more extreme!
Oftentimes, individuals aim to modify values in writable locations using heuristics that prioritize mutable properties.
Now, consider:
const col = [{ videoType: 'A' }, { videoType: 'B' }];
// const col: { videoType: string; }[]
The initializer for col mirrors that of arr. Consequently, the compiler assumes that the videoType property in the array elements is of type string and not specific literals like "A" or "B". This can lead to issues when trying to use col as a different type later on.
const fn = (): RS => {
const col = [{ videoType: 'A' }, { videoType: 'B' }];
// const col: { videoType: string; }[]
return {
result: col, // error! string is not "A" | "B"
}
}
In such cases, where the heuristic rules fall short, it is essential to explicitly specify the desired type for the compiler to follow. One approach is to annotate the variable with the intended type:
const fn = (): RS => {
const col: Foo[] = [{ videoType: 'A' }, { videoType: 'B' }];
return { result: col }; // okay
}
Alternatively, a const assertion can be used to enforce a narrower interpretation of literal values:
const fn = (): RS => {
const col = [{ videoType: 'A' } as const, { videoType: 'B' } as const];
// const col: ({ readonly videoType: "A"; } | { readonly videoType: "B"; })[]
return { result: col }; // okay
}
In this scenario, each element in the array is asserted as a const, resulting in the inference of object types with readonly videoType properties of literal types. This method requires more effort but can be beneficial when the desired type is not predefined in the codebase.
Link to Playground containing code sample