Typescript 通用接口陣列

Question

我對 TypeScript 中更高級的泛型類型有疑問。

我想要做的是一個數據數組，其中data本身由以下type控制：

[
 {
  type: "T1",
  content: number,
 },
 {
  type: "T2",
  values: {
   id: number,
   ...
  }
 }
]

在描述了可用類型后，我有點堆積如山：

enum DataType {
 T1 = "t1",
 T2 = "t2"
}

所以結果一定是這樣的，我猜：

interface DataGeneric<T> {
 [T extends DataType.T1]: { content: number },
 [T extends DataType.T2]: { values: { id: number, ... } },
} ???

interface Data<T extends DataType = any(?)> extends DataGeneric<T>{
 type: DataType,
 // and all the other fields are generic from T = DataType
}
const someData: Data[] | undefined = fetchData();

// suggesting that the `type` of element[1] is "t2"
// and VSCode suggestions works correctly too,
// consider that there is an object-field `values` with `id` key
someData[1].values.id 

提前致謝！

Answer 1

如果您要根據字符串或數字文字檢查對象的type屬性以區分 object 的 rest 所持有的數據類型，那么您可能想要使用可區分的聯合而不是 Z56B97998B338B977DFF05A2888EEE。 這基本上是一種聯合類型，其中聯合的成員有一個共同的判別鍵。 在您的情況下，它可能如下所示：

enum DataType {
  T1 = "t1",
  T2 = "t2"
}

type Data =
  { type: DataType.T1, content: number } |
  { type: DataType.T2, values: { id: number } }

然后，當您有一個Data類型的值data時，您可以檢查它的type屬性，編譯器知道它應該將data縮小到聯合的正確成員：

declare const someData: Data[] | undefined;

if (someData) {
  someData.forEach(data => {
    if (data.type === DataType.T1) {
      data.content.toFixed();
    } else {
      data.values.id.toFixed();
    }
  })
}

Playground 代碼鏈接