為什么這種型別聯合在打字稿中被決議為交集？

我無法理解我遇到的打字稿錯誤背后的機制- 我確信當它飛過我的頭時，有一些基本的東西會發出“嗖”的聲音。

我只在該主題上找到了這個問題，但是雖然錯誤看起來相同，但設定對我來說似乎完全不同。

這是我參考的定義，為簡潔起見。

type ApexAxisChartSeries = {
  // ...
  data:
    | (number | null)[]
    | {
        x: any;
        y: any;
        // ...
      }[]
    | [number, number | null][]
    | [number, (number | null)[]][];
}[]

這是一個糟糕的函式，它需要一個{x:number, y:number}陣列。

function composeSeries(input: { x: number; y: number }[]) {
  const series: ApexAxisChartSeries = [
    { name: "A", data: [] },
    { name: "B", data: [] },
  ];

  input.forEach((datum) => {
    series[0].data.push(datum); // <-- This line right here gives the error.
  });

  return series;
}

現在，讓我感到困惑的是，鑒于型別定義，我希望一個{x:number, y:number}物件是 的一個完全有效的元素data，但打字稿抱怨說

type'{ x: number; y: number; }'的引數不能分配給 type 的引數number & { x: any; y: any; fillColor?: string | undefined; strokeColor?: string | undefined; meta?: any; goals?: any; } & [number, number | null] & [number, (number | null)[]]'。

型別'{ x: number; y: number; }'不可分配給 type 'number'。

And I'm here like, where in the bleep bloop are those intersections in the error coming from, if the type definition uses unions?

As additional context:

1. It's not only the object that gives an error. If I use [x,y] tuples or just a number array, the compiler still perks up
2. I'm using TS 4.5.4
3. I'm quite positive the issue exists in this code: the TS playground gives the same error

For reference, this is the full type definition:

type ApexAxisChartSeries = {
  name?: string
  type?: string
  color?: string
  data:
    | (number | null)[]
    | {
        x: any;
        y: any;
        fillColor?: string;
        strokeColor?: string;
        meta?: any;
        goals?: any;
      }[]
    | [number, number | null][]
    | [number, (number | null)[]][];
}[]

Any clarification is deeply appreciated!

Edit: an example of the error can be found on the TS playground here, courtesy of @jcalz

uj5u.com熱心網友回復：

(T | U)[]和之間有區別T[] | U[]。首先，每個陣列元素可以是T或U型別。在第二個（與您的情況相對應）中，陣列只能包含任一型別的元素。

您必須問自己的問題是：當 TypeScript 不知道變數是哪種型別的陣列時，它如何知道允許哪些元素？

const myArray: string[] | number[] = [];
myArray.push(5); // Argument of type 'number' is not assignable to parameter of type 'never'.

以上面的例子為例。無論如何，TypeScript 都會拋出錯誤，因為您推送到該陣列的任何內容都不會符合其中一種可能的型別。

好訊息是，TypeScript 編譯器很聰明，在您的情況下，可以派生出符合所有可能條件的型別。這種型別恰好是所有可能的元素型別的交集，這是滿足要求的最基本型別。

您的選擇是使陣列允許任何可能的型別，或者使系列成為擴展任何一種型別的泛型。

選項 A：陣列元素可以是多種型別中的一種

type ApexAxisChartSeries = {
  name: string,
  data:
    (number 
      | null 
      | { x: any; y: any; } 
      | [number, number | null]
      | [number, (number | null)[]]
    )[]
};

選項 B：泛型型別引數可以是多種型別之一

type ChartDataType = (number | null)
  | { x: any; y: any; } 
  | [number, number | null] 
  | [number, (number | null)[]];

type ApexAxisChartSeries<T extends ChartDataType> = {
  name: string,
  data: T[]
}[];

function composeSeries<T extends ChartDataType>(input: T[]) {
  const series: ApexAxisChartSeries<T> = [
    { name: "A", data: [] },
    { name: "B", data: [] },
  ];

  input.forEach((datum) => {
    const index = (true) ? 0 : 1;
    series[index].data.push(datum);
  });

  return series;
}

composeSeries([{ x:1, y: 1}]); // returns { name, data: { x, y }[] }[]

標籤：typescript

上一篇：使用xpath函式text()有困難

下一篇：測驗用打字稿撰寫的自定義反應鉤子