Différence entre les types d'union avec Null et la déclaration d'objet Nullable dans Typescript

Question

J'ai récemment trouvé un bout de code typecript dans un projet angulaire plus important, qui contenait un symbole Bitwise-OR/Pipe-Symbol dans sa déclaration d'objet. Comme ceci :

dataSource: FileSource | null;

D'après moi, il s'agit d'un objet de type FileSource qui est aussi nullable .

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

J'ai également découvert que l'on peut déclarer un objet avec une balise ensemble complet de types de données comme ça :

myVariable: number | string | null;

J'en viens maintenant à ma vraie question : Je peux aussi bien déclarer un objet avec un point d'interrogation comme symbole pour nullable. Y a-t-il une différence entre ces deux déclarations ?

myVariable: FileSource | null;
mySecondVariable?: FileSource;

S'il n'y a pas de différence entre les deux, considérez-vous qu'il s'agit d'une mauvaise pratique, car elle n'est pas courante dans d'autres langages et ne constitue pas un code javascript valide ?

BTW : En Javascript, ceci :

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

serait bien.

Je me concentre sur la nullité d'un objet et sur les différences entre ces déclarations.

Answer 1

Y a-t-il une différence entre ces deux déclarations ?

Oui, en particulier avec des contrôles de nullité stricts . Une propriété avec un type de syndicat (le | ) doit être présent avec une valeur qui correspond à l'un des types.

Un site propriété facultative (déclaré avec ? ) n'est que cela : Facultatif. L'objet n'est pas du tout obligé de la posséder. Cela dit, pour l'instant (du moins), TypeScript traite les éléments prop?: X exactement comme prop: X | undefined ; voir cette question utilement mis en évidence par jcatz .

Sans des contrôles de nullité stricts, c'est parfait :

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

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

Avec des contrôles de nullité stricts, le second est faux :

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'.

Exemple vivant dans la cour de récréation

De même, l'attribution de undefined serait correct sans les contrôles stricts de nullité, mais avec eux, c'est une erreur dans le cas du type d'union :

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

Exemple vivant dans la cour de récréation

Answer 2

Il y a une grande différence. Le site ? est en fait équivalent à | undefined .

Ils sont tout à fait équivalents :

myVariable: FileSource | undefined;
mySecondVariable?: FileSource;