是否可以键入 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属性。

---

游乐场代码链接