對一個變量使用兩種類型。 打字稿

Question

轉移了js打字稿，面對這個問題。 以下函數適用於兩種類型的數據，我看到此錯誤：

Property 'dateTime' does not exist on type 'Operation | OperationCreated'. 
Property 'dateTime' does not exist on type 'OperationCreated'

 type DateTime = { date: string; }; type Operation = { dateTime: DateTime; }; type OperationCreated = { createdDate: string; }; const sortByDate = (o1: Operation | OperationCreated, o2: Operation | OperationCreated) => stringToMillisecond(o1.createdDate || o1.dateTime.date) - stringToMillisecond(o2.createdDate || o2.dateTime.date); 

進行打字稿的第一步，請幫忙

Answer 1

TypeScript無法識別o1.createdDate || o1.dateTime.date o1.createdDate || o1.dateTime.date有效的原因如下：

• 就運行時影響而言，最大的影響是您假定o1.createdDate僅在undefined才會虛假 。 但是空字符串也很虛假。 如果有人打電話給這個：

   sortByDate({ createdDate: "" }, { createdDate: "" }); 

  那么您將最終調用stringToMillisecond(undefined) ，我懷疑這是一個錯誤。 因此，我將放棄在此處對可能的string值使用虛假檢查。

• TypeScript編譯器不允許您讀取聯合類型的屬性值，除非聯合的每個成員都包含帶有該鍵的（可能是可選的）屬性。 因此，除非您通過區分可能的值來將o1 縮小為OperationCreated first ，否則o1.createdDate是一個錯誤。 一種方法是使用in運算符 ，例如：

   "createdDate" in o1 ? o1.createdDate : o1.dateTime.date; // no error 

  這工作，因為編譯器使用in檢查，以縮小o1至OperationCreated三元運營商的“然后”條款，或OperationDefault了“其他”子句。

因此，我能想到的最簡單的解決方法是：

const sortByDate = (
  o1: Operation | OperationCreated,
  o2: Operation | OperationCreated
) =>
  stringToMillisecond("createdDate" in o1 ? o1.createdDate : o1.dateTime.date) -
  stringToMillisecond("createdDate" in o2 ? o2.createdDate : o2.dateTime.date);

好的，希望對您有所幫助。 祝好運！ 鏈接到代碼

Answer 2

該錯誤是因為編譯器不知道o1和o2是Operation還是OperationCreated 。 您可以使用有區別的聯合 。

我的解決方案（清潔）

interface DateTime {
  date: string;
}

interface OperationDefault {
  type: 'default';
  dateTime: DateTime;
}

interface OperationCreated {
  type: 'created';
  createdDate: string;
}

type Operation = OperationDefault | OperationCreated;

const sortByDate = (o1: Operation, o2: Operation) => {
  const d1 = o1.type === 'default' ? o1.dateTime.date : o1.createdDate;
  const d2 = o2.type === 'default' ? o2.dateTime.date : o2.createdDate;

  return stringToMillisecond(d1) - stringToMillisecond(d2);
};

Answer 3

使用接口而不是類型文字

    interface DateTime {
        date: string;
    }

    interface Operation {
        dateTime: DateTime;
    }

    interface OperationCreated {
        createdDate: string;
    }

    const sortByDate = (
        o1: Operation | OperationCreated,
        o2: Operation | OperationCreated
    ) =>
        stringToMillisecond((o1 as any).createdDate || (o1 as any).dateTime.date) -
        stringToMillisecond((o2 as any).createdDate || (o2 as any).dateTime.date);