使用泛型定義函式的回傳值，并將區分聯合作為輸入-有解無憂

我想創建一個函式，它接收具有updatedAt和/或createdAt屬性的物件（作為日期）并回傳相同的物件，但將單個或兩個值序列化為字串。

首先，我如何定義這個函式的回傳型別？

其次，我有一種感覺，用泛型做這件事會更好，但我還沒有找到正確的方法來做到這一點。

這是我目前擁有的：

type HasBothValues = {
  [key: string]: any;
  createdAt: Date;
  updatedAt: Date;
};

type HasCreatedAt = {
  [key: string]: any;
  createdAt: Date;
};

type HasUpdatedAt = {
  [key: string]: any;
  updatedAt: Date;
};

type AllInputVariants = HasBothValues | HasCreatedAt | HasUpdatedAt;

const serializeDates = (obj: AllInputVariants): any => { //  <-- Don't like the any return type!
  const retObj = { ...obj };
  if (obj.createdAt) {
    retObj.createdAt = obj.createdAt.toISOString();
  }

  if (obj.updatedAt) {
    retObj.updatedAt = obj.updatedAt.toISOString();
  }

  return obj;
};

export { serializeDates };

我很感激任何提示！

uj5u.com熱心網友回復：

函式多載似乎是一個很好的解決方案。

首先我們創建一個型別呼叫Overwrite來改變一些屬性的型別。

type Overwrite<T, U> = Pick<T, Exclude<keyof T, keyof U>> & U extends infer O ? {
  [K in keyof O]: O[K]
} : never

現在我們可以添加所有可能的函式多載：

function serializeDates<T extends HasBothValues>(obj: T): Overwrite<T, {updatedAt: string, createdAt: string}>
function serializeDates<T extends HasUpdatedAt>(obj: T): Overwrite<T, {updatedAt: string}>
function serializeDates<T extends HasCreatedAt>(obj: T): Overwrite<T, {createdAt: string}>
function serializeDates<T extends AllInputVariants>(obj: T) { 
  const retObj: any = { ...obj };
  if (obj.createdAt) {
    retObj.createdAt = obj.createdAt.toISOString();
  }

  if (obj.updatedAt) {
    retObj.updatedAt = obj.updatedAt.toISOString();
  }

  return retObj;
};

操場

讓我們看看它是否有效：

const t1 = serializeDates({
  createdAt: new Date(),
})
// const t1: {
//     createdAt: string;
// }

const t2 = serializeDates({
  updatedAt: new Date()
})
// const t2: {
//     updatedAt: string;
// }

const t3 = serializeDates({
  createdAt: new Date(),
  updatedAt: new Date()
})
// const t3: {
//     updatedAt: string;
//     createdAt: string;
// }

const t4 = serializeDates({
  createdAt: new Date(),
  updatedAt: new Date(),
  a: 123,
  b: "123"
})
// const t4: {
//     a: number;
//     b: string;
//     updatedAt: string;
//     createdAt: string;
// }

再想想，我們可以做得更好。讓我們修改Overwrite為僅覆寫T實際存在于T.

type Overwrite<T, U> = (Pick<T, Exclude<keyof T, keyof U>> & Pick<U, Extract<keyof U, keyof T>>) extends infer O ? {
  [K in keyof O]: O[K]
} : never

現在我們不再需要函式多載了：

function serializeDates<
  T extends { updatedAt?: Date, createdAt?: Date }
>(obj: T): Overwrite<T, {updatedAt: string, createdAt: string}> { 
  const retObj: any = { ...obj };
  if (obj.createdAt) {
    retObj.createdAt = obj.createdAt.toISOString();
  }

  if (obj.updatedAt) {
    retObj.updatedAt = obj.updatedAt.toISOString();
  }

  return retObj as any;
};

操場

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/476048.html

標籤：打字稿打字稿打字打字稿泛型

上一篇：在打字稿中回傳未定義的狀態

下一篇：如何在reduxtypescript中獲取有效負載型別