右类型赋值

Question

我正在将一个React应用程序转换为TypeScript，并遇到了一个问题，其中一个变量被分配了两个不同类型的值之一:

const day = days?.find(d => isSameDate(d.date, date)) || {};

如果我把字体放在左边，像这样:

const day:Iday= days?.find(d => isSameDate(d.date, date)) || {};

我得到一个错误，当我试图访问一天的道具之一，因为{}不包含说的道具。我得到的TypeScript错误是:

Property 'date' does not exist on type '{} | Idate'. 
Property 'date' does not exist on type '{}'.ts(2339)

试图访问day.date.

我想要的是:

const day = days?.find(d => isSameDate(d.date, date)):Iday || {}:Iempty;

这样的事情可能吗?

Answer 1

您可以使用union类型，这样做:

const day: Iday | {} = days?.find(d => isSameDate(d.date, date)) || {};

Answer 2

联合类型描述的值可以是几种类型中的一种。使用|(竖条)分隔类型

const day : Iday | Iempty = days?.find(d => isSameDate(d.date, date)) || {};

Answer 3

如果您希望能够访问day.date，即使day是一个空对象，您可以使用类型Partial<IDay>。

Partial<IDay>将使IDay的所有属性都是可选的，这意味着如果您的IDay类型看起来像这样:

interface IDay {
date: Date,
}

Partial<IDay>等价于:

interface IDay {
date?: Date
}

但是很可能这不是键入代码的最佳方式。在您的情况下，最好将变量输入为IDay | null，例如:

const day = days?.find(d => isSameDate(d.date, date)) || null;

然后您可以在以下条件中包装试图访问date字段的代码:

if (day !== null) {
console.log(day.date)
}