Type Guard和Typescript中的可空对象声明之间的区别

时间:2018-10-19 13:47:45

标签: javascript angular typescript nullable

我最近在一个更大的角度项目中发现了一些打字稿代码,该项目的对象声明中包含一个Bitwise-OR / Pipe-Symbol。 像这样:

dataSource: FileSource | null;

据我了解,它是 FileSource 类型的对象,也是 nullable

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";

会没事的。

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

2 个答案:

答案 0 :(得分:3)

  

这两个声明之间有区别吗?

是的,尤其是with strict null checks。带有union type(符号|)的属性必须与一个类型中的一种相匹配。

optional property(用?声明)就是:可选。完全不需要该对象。虽然如此,但至少在目前,TypeScript与prop?: X一样对待prop: X | undefined;请参阅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

类似地,如果没有严格的null检查,则分配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

答案 1 :(得分:3)

有很大的不同。 ?修饰符实际上等效于| undefined

这些完全等效:

myVariable: FileSource | undefined;
mySecondVariable?: FileSource;