Typescript - 联合类型

Question

我创建了以下界面:

export interface Message{
  date: Timestamp | Date;
}

interface Timestamp {
  seconds: number;
  nanoseconds: number;
}

不知道为什么 - 我收到以下错误:

Property 'seconds' does not exist on type 'Date | Timestamp'.
  Property 'seconds' does not exist on type 'Date'.

为什么编译器在 Date 中搜索 seconds 而不能使用 Timestamp 类型？

Answer 1

简答

Why does the compiler searches for seconds in Date and doesn't work with the Timestamp type?

使用联合类型时，编译器只允许访问存在于所有类型的属性。发生错误是因为 seconds 仅存在于 Timestamp 而不是 Date。

例子

这里我们创建了一个 Message，它的 date 有一个 Timestamp。

const message: Message = {
  date: {
    seconds: 10, 
    nanoseconds: 10
  }
}

在下面的代码中，编译器不知道date 是一个Timestamp。就编译器而言，date 是 Date 或 Timestamp。

// Property 'seconds' does not exist on type 'Timestamp | Date'.
// Property 'seconds' does not exist on type 'Date'.
const seconds = message.date.seconds;

类型守卫

为了给编译器更多信息，我们可以添加类型保护。然后编译器就会知道，在 if 语句中，它正在处理一个 Timestamp。

if (!(message.date instanceof Date)) { 
    // now we know we are dealing with a Timestamp
    // the compiler will not output an error
    const seconds = message.date.seconds;
}

有关 type guards is here 的文档.