在typescript中用spreadexpressions推斷一個通用元組

declare function func< T extends Param[]> (arg: [. ..T]): void;
func([{ x: ""/span>, y: 1 }, { x: 1, y: "" }]) 
//T推斷為[{ x: string; y: number;}, { x: number; y: string;}]

現在有一個問題是如何處理輸出型別。 它不是void。 讓我們研究一下示例代碼的實作：

function func< T extends Param[]> (arg: [. ..T]) {
  return arg。 map(span class="hljs-params">elem => 'x'/span> in elem ? elem.x : elem.y)
} 

如果我們不注釋回傳型別，它將被編譯器確定為unknown[]；陣列的map()方法并不保留元組的長度，而且它當然不能遵循高階邏輯，為不同的索引產生不同的型別。

所以你會得到unknown[]：

const p: Param<string, number> = (
  [{ x: ""/span>, y: 1 }, { y: 1 }, { x: undefined, y: 1 }] 。
)[Math.floor(Math.random() * 3) ]

const result = func([
  { x: ""/span>, y: 1 },
  { y: 1 },
  { x: undefined, y: 1 },
  p
])
// const result: unknown[]。

這是真的，但對你來說是無用的。 由于編譯器不能推斷出map()的回傳值的強型別，我們將需要將其斷言為T的函式。 但是什么T的函式？

計算回傳型別：每個元素的x和y屬性的聯合

好吧，對于每個數字索引I，你看元素T[I]并回傳其"x"屬性的型別T[I]["x"]或其"y"屬性的型別T[I]["y"]。 因此，第一種方法是回傳這些型別的union：

//這里E是T陣列的某個元素。
type XorY<E> = E extends Param ? E["x"] | E["y"] : never;

function func<T extends Param[]>（arg: [...T]）{
  return arg。 map(span class="hljs-params">elem => 'x'/span> in elem ? elem.x : elem.y) 如
    { [I in keyof T] 。XorY<T[I]> }
}

const result = func([
  { x: ""/span>, y: 1 },
  { y: 1 },
  { x: undefined, y: 1 },
  p
])
// const result: [string | number, unknown, number | undefined, string | number | undefined]/span>

這就好了，我們有一個長度為4的元組，而且string和number型別大部分都在里面。 但是也有一些缺點。

一個缺點是，我們在使用的時候會出現一些問題。

一個缺點是編譯器沒有意識到，如果x存在，你肯定會得到它；估計對于result的第一個元素，型別應該是string，而不是string | number。

另一個是，如果x是不知道存在的，型別unknown就會出來。 這實際上在技術上是正確的；編譯器不可能知道它推斷的{y: 1}意味著x屬性是明確缺失的。 {y: number}的型別并不意味著 "除了y之外沒有任何屬性存在"；它只是意味著 "除了y之外沒有任何已知屬性存在"。 (也就是說，物件型別不是microsoft/TypeScript#12936中要求的那種 "精確"。) 所以編譯器決定T[I]['x']是unknown，這就破壞了事情。 讓我們做一件技術上不正確但又方便的事情，說一個像{y: 1}意味著x缺失，因此我們只想讓y的型別出來。

所以讓我們重新定義上面的XorY<E>型別，使它對陣列的元素型別E做以下分析：

• 如果E有一個型別為X的非選擇的x屬性，我們應該回傳X。
• 如果E沒有x屬性，但是它有一個y型別的Y屬性，我們應該回傳Y。
• 否則，如果E有一個型別為X的可選x屬性和一個型別為Y的y屬性，那么我們應該回傳X | Y。

這應該涵蓋了所有的情況（當然也有可能是邊緣情況，所以你需要測驗）。

要準確地檢查x屬性是否是可選的有點困難；詳情請見本答案。 下面是一種寫XorY的方法：

type XorY<E> = E extends Param<any，infer Y> ? E['x'] extends infer X ?
  'x' extends keyof E ? {} extends Pick<E, 'x'/span>> ? X | Y : X : Y
  : 從來沒有 : 從來沒有

它以一種奇怪的方式計算X和Y作為E的函式；Y是通過條件型別推理找到的，但是對于X，我是直接索引到 E；這是因為如果你使用infer，X將不包括undefined，但可選屬性有時是undefined（給或給--exactOptionalProperties編譯器標志）。所以當涉及到undefined時，E['x']比infer更準確。

無論如何，用X和Y武裝起來，如果x是一個已知的鍵('x' extends keyof E)，如果它是可選的({} extends Pick<E, 'x'>)，我們回傳X | Y。 如果它是已知的但不是可選的，我們回傳X。 如果它是未知的，那么我們就回傳Y.

好吧，讓我們來試試：

const result = func( [ { x: ""/span>, y: 1 }, { y: 1 }, { x: undefined, y: 1 }, p ]) // const result: [string, number, undefined, string | number | undefined]/span> console.log(result) // [" ", 1, undefined, something]

完美! 這已經是我們所希望的最具體的了。 同樣，可能會有一些邊緣情況，你應該進行測驗以確保它在你的實際用例中發揮作用。 但我認為這是我能想象到的對所給示例代碼的最接近的解決方案。

游戲場地鏈接到代碼

uj5u.com熱心網友回復：

有一個替代版本：

type Elem = Param;

型別HandleFalsy<T extends Param> = (
  T['x'] extends undefined] ?
  ? T['y'] ?
  : (
    未知 extends T['x'] ?
    ? T['y'/span>] : T['x'/span>]
  )
)

Type ArrayMap<
  Arr extends ReadonlyArray<Elem> 。
  Result extends any[] = [] 。
  > = Arr extends [] 。
  ? Result ?
  : Arr extends readonly [infer H, ...infer Tail] ?
  ? Tail extends ReadonlyArray<Elem>
  ? H extends Elem> ?
  ? ArrayMap<Tail, [...Result, HandleFalsy< H> ]>
  : 絕不
  :永遠不會
  : 從來沒有。

型別 Param<X = unknown, Y = unknown> = {
  x?: X
  y: Y
}

型別 Json =
  | null =
  |字串
  | 數字
  | 布爾型
  | Array<JSON>
  | {
    [prop: string] 。Json
  }


const tuple = <
  X extends Json,
  Y extends Json,
  Tuple extends Param<X, Y> 。
  Arr extends Tuple[] 。
>(data: [...Arr]/span>) =>
  data.map(span class="hljs-params">elem => 'x'/span> in elem? elem.x : elem.y) as ArrayMap<Arr>

// [42, "only y"] 
const result1 = tuple([{ x: 42, y: 'str' }, { y: 'only y' }])

// [42, "only y", "100"]/span>
const result2 = tuple([{ x: 42, y: 'str' }, { y: 'only y' }, { x: '100', y: 999999 }])

Playground

為了更好地理解ArrayMap和HandleFalsy中的內容，請看一下js表示法：

const HandleFalsy=（arg: Param）=> {
  if (!arg.x) {
    return arg.y y }
  }
  return arg.x }
}

const ArrayMap = (arr: ReadonlyArray<Elem>, result: any[] = [] ）。) Array<Param[keyof Param]> => {
  if (arr.length == 0) {
    return result
  }

  const [head, ...tail] = arr;

  return ArrayMap(tail, [...result, HandleFalsy(head)] )

如果你想了解更多關于函式引數推理的資訊，你可以閱讀我的文章

標籤：

上一篇：具有多個可選約束但只有一個通用引數的通用方法（c#）。

下一篇：使用泛型和單鏈表（錯誤CS0311）。