Can an array in typescript be typed so its items are restricted to only allow shared id's with items in another array?

Question

I am building an object with an index signature: ColumnAndColumnSettings . I'd like to restrict columnSettings to only allow objects with id's shared in columns .

  type Column = {
  colId: string,
  width?: number,
  sort?: number
  something?: string
}

type ColumnSetting = Pick<Column, 'colId' | 'width' | 'sort'>;

const columnExample = { colId: '1', something: 'test'};
const columnSettingExample1 = { colId: '1'};
const columnSettingExample2 = { colId: '2'};

export const ColumnAndColumnSettings: {
  [key: string]: { columns: Column[]; columnSettings: ColumnSetting[]};
} = {
  people: { columns: [columnExample] , columnSettings: [columnSettingExample1] }, // ok
  boats: { columns:  [columnExample], columnSettings: [columnSettingExample1, columnSettingExample2] }, // ok but want this to error, 
  //columnSettingExample2 does not share id with any item in columns
}

Playground Link

Answer 1

Before we get started: the only way the compiler will even be able to notice the colId property values aren't just of type string is if you give it some hint that it should be tracking their literal types . The easiest way to do that is via a const assertion when you create 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 knows that columnExample has a colId of "1" instead of string , for instance.

Moving on:

---

There is, unfortunately, no specific type in TypeScript that behaves the way you'd like ColumnAndColumnSettings to behave.

Instead, you could write a generic type like ColumnAndColumnSettings<T> where T is a mapping from the keys of your object to the set of 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] })[]
  }
}

Which results in 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";
        })[];
    };
} */

But you don't want to have to write out the particular T argument. It would be nice if the compiler could infer it for you. And it can, but not directly via type annotation; you can't do this:

const ColumnAndColumnSettings: ColumnAndColumnSettings = { // error!
// --------------------------> ~~~~~~~~~~~~~~~~~~~~~~~
  cars: { columns: [ce3, ce4], columnSettings: [ce3] },
  trucks: { columns: [ce5], columnSettings: [ce5] },
}; 

There's an open issue at microsoft/TypeScript#32794 asking for this, and maybe eventually you could write that or something like ColumnAndColumnSettings<infer> , but for now it's not part of the language.

---

As I said though, this is possible if you refactor. The general workaround for cases like this is to create a generic helper identity function whose sole purpose is to infer the type parameter. That is, instead of const value: GenericType<infer> = { something: 123 } , you write a helper function of the form const asGenericType = <T,>(g: GenericType<T>) => g and then call it as const value = asGenericType({something: 123}) .

In this case we'd write

const asColumnAndColumnSettings = <T extends Record<keyof T, string>>(
  c: ColumnAndColumnSettings<T>) => c;

And now we can use it:

const c = asColumnAndColumnSettings({    
  cars: { columns: [ce3, ce4], columnSettings: [ce3] },
  trucks: { columns: [ce5], columnSettings: [ce5] },
});
/* const c: ColumnAndColumnSettings<{
  cars: "3" | "4";
  trucks: "5";
}> */

So T is inferred as desired. Great!

---

Unfortunately, it's not quite right:

const ColumnAndColumnSettings = asColumnAndColumnSettings({
  people: { columns: [columnExample], columnSettings: [columnSettingExample1] }, // ok
  boats: { columns: [columnExample], 
    columnSettings: [columnSettingExample1, columnSettingExample2] }, // no error
});
/* const ColumnAndColumnSettings: ColumnAndColumnSettings<{
  people: "1";
  boats: "1" | "2";
 }> */

There's no error in the above, which was the whole point. The compiler was happy to infer T from both the columns property and the columnSettings property. You really only want to infer T from columns , and have the compiler check the columnSettings property against it.

That is, the T in the definition of ColumnAndColumnSettings<T> inside the columnSettings property should be a non-inferential type parameter usage . TypeScript doesn't directly support such a feature, and there is a issue in GitHub asking for it at microsoft/TypeScript#14829 . Luckily though, there are workarounds mentioned in there. The one I'll use here is to intersect the type parameter usage with the empty object type {} to lower its inference priority, as recommended :

type ColumnAndColumnSettings<T extends Record<keyof T, string>> = {
  [K in keyof T]: {
    columns: (Column & { colId: T[K] })[],
    columnSettings: (ColumnSetting & { colId: T[K] & {} })[]
// ----------------------------------------------> ^^^^
  }
}

This acts much the same, and ColumnAndColumnSettings<{ cars: "3" | "4", trucks: "5" }> ColumnAndColumnSettings<{ cars: "3" | "4", trucks: "5" }> hasn't changed. But now:

const ColumnAndColumnSettings = asColumnAndColumnSettings({
  people: { columns: [columnExample], columnSettings: [columnSettingExample1] }, // ok
  boats: { 
    columns: [columnExample], 
    columnSettings: [columnSettingExample1, columnSettingExample2] }, // error! 
// ---------------------------------------> ~~~~~~~~~~~~~~~~~~~~~
// Types of property 'colId' are incompatible.
});

// const ColumnAndColumnSettings: ColumnAndColumnSettings<{ people: "1"; boats: "1"; }>

We get the error you were looking for! The entry in T for boats is just "1" instead of "1" | "2" "1" | "2" , and therefore the columnSettingExample2 element of the array is flagged as having an incompatible colId property.

---

Playground link to code