是否可以鍵入 typescript 中的數組，以便將其項目限制為僅允許與另一個數組中的項目共享 ID？

Question

我正在構建一個帶有索引簽名的 object： ColumnAndColumnSettings 。 我想限制columnSettings只允許在columns中共享 id 的對象。

  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
}

游樂場鏈接

Answer 1

在我們開始之前：編譯器甚至能夠注意到colId屬性值不僅僅是string類型的唯一方法是如果你給它一些提示它應該跟蹤它們的文字類型。 最簡單的方法是在創建對象時通過const斷言：

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"; } */

例如，現在編譯器知道columnExample的colId為"1"而不是string 。

繼續：

---

不幸的是，TypeScript 中沒有特定類型的行為符合您希望ColumnAndColumnSettings的行為方式。

相反，您可以編寫一個通用類型，如ColumnAndColumnSettings<T> ，其中T是從 object 的鍵到該屬性的允許列 ID 集的映射：

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

結果是這樣的：

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

但是您不想寫出特定的T參數。 如果編譯器可以為您推斷出它，那就太好了。 它可以，但不能直接通過類型注釋； 你不能這樣做：

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

在microsoft/TypeScript#32794有一個未解決的問題要求這個，也許最終你可以寫那個或類似ColumnAndColumnSettings<infer>的東西，但現在它不是語言的一部分。

---

正如我所說，如果你重構，這是可能的。 此類情況的一般解決方法是創建一個通用幫助程序標識 function，其唯一目的是推斷類型參數。 也就是說，不是const value: GenericType<infer> = { something: 123 } ，而是編寫一個const asGenericType = <T,>(g: GenericType<T>) => g形式的助手 function 然后將其稱為const value = asGenericType({something: 123}) 。

在這種情況下，我們會寫

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

現在我們可以使用它了：

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

所以T是按需要推斷的。 偉大的！

---

不幸的是，這並不完全正確：

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";
 }> */

上面沒有錯誤，這就是重點。 編譯器很樂意從columns屬性和columnSettings屬性中推斷出T 您真的只想從columns推斷T ，並讓編譯器根據它檢查columnSettings屬性。

也就是說， columnSettings屬性里面的ColumnAndColumnSettings<T> T中的 T 應該是非推理類型參數用法。 TypeScript 不直接支持這樣的功能，GitHub 在microsoft/TypeScript#14829中有一個問題要求它。 幸運的是，那里提到了解決方法。 我將在此處使用的方法是將類型參數用法與空的 object 類型{} 相交，以降低其推理優先級， 如推薦的那樣：

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

這與ColumnAndColumnSettings<{ cars: "3" | "4", trucks: "5" }> ColumnAndColumnSettings<{ cars: "3" | "4", trucks: "5" }>沒有改變。 但現在：

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"; }>

我們得到了您正在尋找的錯誤！ boats的T條目只是"1"而不是"1" | "2" "1" | "2" ，因此數組的columnSettingExample2元素被標記為具有不兼容的colId屬性。

---

游樂場代碼鏈接