Starting out: the compiler will only recognize that the colId property values are not just of type string if you provide a clue to track their literal types. The simplest way to do this is by using a const assertion when creating the objects:
const columnExample = { colId: '1', something: 'test' } as const;
/* const columnExample: { readonly colId: "1"; readonly something: "test"; } */
const columnSettingExample1 = { colId: '1' } as const;
/* const columnSettingExample1: { readonly colId: "1"; } */
const columnSettingExample2 = { colId: '2' } as const;
/* const columnSettingExample2: { readonly colId: "2"; } */
Now, the compiler identifies that columnExample has a colId of "1", not just any string.
Next up:
Unfortunately, TypeScript doesn't have a specific type that behaves like how you want ColumnAndColumnSettings to act.
Instead, you could define a generic type such as ColumnAndColumnSettings<T>, where T maps the keys of your object to the allowable column ids for that property:
type ColumnAndColumnSettings<T extends Record<keyof T, string>> = {
[K in keyof T]: {
columns: (Column & { colId: T[K] })[],
columnSettings: (ColumnSetting & { colId: T[K] })[]
}
}
This leads to something like this:
type Example = ColumnAndColumnSettings<{ cars: "3" | "4", trucks: "5" }>;
/* type Example = {
cars: {
columns: (Column & {
colId: "3" | "4";
})[];
columnSettings: (ColumnSetting & {
colId: "3" | "4";
})[];
};
trucks: {
columns: (Column & {
colId: "5";
})[];
columnSettings: (ColumnSetting & {
colId: "5";
})[];
};
} */
However, manually providing the T argument isn't ideal. It would be better if the compiler could infer it for you. While direct inference via type annotation isn't possible, there's a workaround involving a generic helper identity function specifically designed for inferring the type parameter. Instead of
const value: GenericType<infer> = { something: 123 }
, you'd create a helper function like
const asGenericType = <T,>(g: GenericType<T>) => g
and use it as
const value = asGenericType({something: 123})
.
In this scenario, we can write:
const asColumnAndColumnSettings = <T extends Record<keyof T, string>>(
c: ColumnAndColumnSettings<T>) => c;
And now it can be utilized as follows:
const c = asColumnAndColumnSettings({
cars: { columns: [ce3, ce4], columnSettings: [ce3] },
trucks: { columns: [ce5], columnSettings: [ce5] },
});
/* const c: ColumnAndColumnSettings<{
cars: "3" | "4";
trucks: "5";
}> */
So, the desired T is inferred successfully. Excellent!
Unfortunately, it's still not entirely correct:
const ColumnAndColumnSettings = asColumnAndColumnSettings({
people: { columns: [columnExample], columnSettings: [columnSettingExample1] }, // works fine
boats: { columns: [columnExample],
columnSettings: [columnSettingExample1, columnSettingExample2] }, // no error
});
/* const ColumnAndColumnSettings: ColumnAndColumnSettings<{
people: "1";
boats: "1" | "2";
}> */
The absence of an error in the above example defeats the purpose. The compiler managed to infer T from both the columns property and the columnSettings property. What you truly desire is for T to be inferred solely from columns, with the columnSettings property being checked against it.
In other words, in the definition of ColumnAndColumnSettings<T> within the columnSettings property, T should be used in a non-inferential manner. Unfortunately, TypeScript doesn't support this directly, but there is an open issue on GitHub regarding this at microsoft/TypeScript#14829. Fortunately, there are workarounds mentioned there. Here, the approach taken is to intersect the type parameter usage with the empty object type {} to lower its inference priority, which is recommended:
type ColumnAndColumnSettings<T extends Record<keyof T, string>> = {
[K in keyof T]: {
columns: (Column & { colId: T[K] })[],
columnSettings: (ColumnSetting & { colId: T[K] & {} })[]
// ----------------------------------------------> ^^^^
}
}
It operates similarly, and
ColumnAndColumnSettings<{ cars: "3" | "4", trucks: "5" }>
remains unchanged. However, now:
const ColumnAndColumnSettings = asColumnAndColumnSettings({
people: { columns: [columnExample], columnSettings: [columnSettingExample1] }, // works fine
boats: {
columns: [columnExample],
columnSettings: [columnSettingExample1, columnSettingExample2] }, // error!
// ---------------------------------------> ~~~~~~~~~~~~~~~~~~~~~
// Types of property 'colId' are incompatible.
});
// const ColumnAndColumnSettings: ColumnAndColumnSettings<{ people: "1"; boats: "1"; }>
You now receive the expected error! The entry in T for boats is simply "1" instead of "1" | "2", leading to a flag for the columnSettingExample2 element with an incompatible colId property.
Playground link to code