Understanding this concept can be challenging, as the issue arises when the data type 'types' is converted to 'string[]', losing valuable information about the specific strings in the array and their order.
If your focus is solely on the individual strings and not their sequence, a workaround exists where a helper function can manipulate 'types' into a more restrictive type (refer to this article for details on avoiding widening):
const narrowArray = <K extends string>(...arr: K[]) => arr;
Implement it like so:
const types = narrowArray("error", "warning", "success");
Now 'types' will be identified as
Array<"error"|"warning"|"success">
. If you intend for 'Modal['types']' to reference one of these strings (unclear from your post... 'keyof' won't achieve this), follow this approach:
interface Modal {
type: (typeof types)[number]; // "error" | "warning" | "success"
}
These steps should meet your requirements.
Another noteworthy element is that TypeScript version 3.0 introduces a feature to infer tuple types, enabling the preservation of the ordering within 'types'. It functions as illustrated below:
// only operational in TS3.0 and later
const narrowTuple = <K extends string[]>(...arr: K) => arr;
const types = narrowTuple("error", "warning", "success");
// 'types' now signifies type ["error", "warning", "success"]
'types' is now specified as the triple ["error", "warning", "success"], providing TypeScript with knowledge during compilation that, for instance, types[1] specifically corresponds to "warning". The ordering information need not be retained for the definition of 'Modal['type']' as mentioned above, unless there's a different intent for 'Modal['type']'.
Hopefully, this explanation proves beneficial. Best of luck!