javascript - Typescript 中具有 Null 和 Nullable Object 声明的联合类型之间的区别

Question

我最近在一个更大的 Angular 项目中发现了一些 typescript 代码，它的对象声明中有一个 Bitwise-OR/Pipe-Symbol。像这样:

dataSource: FileSource | null;

在我的理解中，它是 FileSource 类型的对象，也是可为空的。

dataSource = null; // Works
dataSource = new FileSource... // Works
dataSource = 32; // Error

我还发现您可以像这样声明一个具有整套数据类型的对象:

myVariable: number | string | null;

现在回答我的实际问题:我也可以声明一个带有问号 的对象作为可空符号。这两个声明之间有什么区别吗？

myVariable: FileSource | null;
mySecondVariable?: FileSource;

如果这两者之间没有区别，您会认为这是一种不好的做法吗，因为它在其他语言中并不常见并且没有有效的 javascript 代码？

顺便说一句:在 Javascript 中:

myVariable: Number | null;
myVariable = "Hello World";

会好的。

我的重点是对象的可空性以及这些声明有何不同

Answer 1

Is there any difference between these two declarations?

是的，特别是with strict null checks .带有 union type 的属性(| 符号)必须与匹配其中一种类型的值一起出现。

安optional property (用 ? 声明)只是:可选。该对象根本不需要拥有它。尽管如此，目前(至少)TypeScript 对待 prop?: X 完全像 prop: X |未定义；见this issue jcatz 有帮助地指出.

没有严格的空检查，这没问题:

type A = {
    dataSource: Date | null
};
type B = {
    dataSource?: Date
};

const a: A = { dataSource: null }; // Works
const b: B = { dataSource: null }; // Also works

有了严格的空检查，第二个是错误的:

type A = {
    dataSource: Date | null
};
type B = {
    dataSource?: Date
};

const a: A = { dataSource: null }; // Works
const b: B = { dataSource: null }; // Error: Type 'null' is not assignable to type 'Date | undefined'.

Live Example in the Playground

类似地，如果没有严格的空检查，分配 undefined 是没问题的，但是对于它们，这是联合类型情况下的错误:

type A = {
    dataSource: Date | null
};
type B = {
    dataSource?: Date
};

const a: A = { dataSource: undefined }; // Error: Type 'undefined' is not assignable to type 'Date | null'.
const b: B = { dataSource: undefined }; // Works

Live Example in the Playground