TypeScript Null și Undefined
TypeScript are un sistem puternic pentru lucrul cu valori care pot fi null sau undefined.
Notă: În mod implicit, această verificare este dezactivată. Activeaz-o setând strictNullChecks la true în opțiunile compilatorului. Restul acestei pagini presupune că strictNullChecks este activat.
Tipuri
null și undefined sunt tipuri primitive. Le poți folosi în adnotări de tip la fel ca string sau number, de exemplu într-o uniune.
Notă: Cu strictNullChecks activat, TypeScript se așteaptă ca fiecare valoare să fie setată, cu excepția cazului în care undefined face parte explicit din tipul ei.
Exemplu
Variabila acceptă un șir de caractere, undefined sau null, așa că toate cele trei atribuiri sunt permise.
null și undefined folosite ca membri ai unui tip uniune.
Declară value cu tipul string | undefined | null, inițializează-l cu null, apoi atribuie-i 'hello' și după aceea undefined. Fișierul doar face atribuiri; nu afișează nimic.
Ieșire: program TypeScript și rezultatul capturat
let value: string | undefined | null = null;
value = 'hello';
value = undefined;
Înlănțuire opțională
Înlănțuirea opțională este o funcționalitate JavaScript care se potrivește bine cu modul în care TypeScript tratează valorile nule.
Îți permite să citești o proprietate a unui obiect care poate să existe sau nu, cu o sintaxă foarte scurtă.
Folosește operatorul ?. când accesezi proprietatea. Dacă obiectul dinaintea lui ?. este null sau undefined, întreaga expresie devine undefined în loc să arunce o eroare.
Exemplu
house.yard?.sqft este undefined când casa nu are curte, așa că funcția afișează Fără curte.
?. pe o proprietate imbricată opțională.
Declară o interfață House cu sqft: number și un obiect opțional yard care are la rândul lui sqft: number. Scrie printYardSize(house: House) care citește house.yard?.sqft, afișează 'Fără curte' când rezultatul este undefined și, în caz contrar, afișează Curtea are <dimensiune> sqft. Creează home cu sqft 500 și fără curte, apoi apelează funcția astfel încât să afișeze 'Fără curte'.
Ieșire: program TypeScript și rezultatul capturat
interface House {
sqft: number;
yard?: {
sqft: number;
};
}
function printYardSize(house: House) {
const yardSize = house.yard?.sqft;
if (yardSize === undefined) {
console.log('Fără curte');
} else {
console.log(`Curtea are ${yardSize} sqft`);
}
}
let home: House = {
sqft: 500
};
printYardSize(home); // Afișează 'Fără curte'
Coalescență nulă
Coalescența nulă este o altă funcționalitate JavaScript care se potrivește bine cu modul în care TypeScript tratează valorile nule.
Îți permite să dai unei expresii o valoare de rezervă, folosită doar atunci când valoarea este null sau undefined.
Este utilă când pot apărea alte valori falsy, precum 0 sau un șir gol, care sunt totuși valide.
Folosește operatorul ?? într-o expresie, într-un mod asemănător cu operatorul &&.
Exemplu
mileage ?? 'Indisponibil' folosește valoarea de rezervă pentru null, dar păstrează 0, pentru că 0 nu este null sau undefined.
?? ca valoare de rezervă doar pentru null și undefined.
Scrie printMileage(mileage: number | null | undefined) care afișează Kilometraj: urmat de mileage ?? 'Indisponibil'. Apelează funcția cu null (afișează 'Kilometraj: Indisponibil') și cu 0 (afișează 'Kilometraj: 0').
Ieșire: program TypeScript și rezultatul capturat
function printMileage(mileage: number | null | undefined) {
console.log(`Kilometraj: ${mileage ?? 'Indisponibil'}`);
}
printMileage(null); // Afișează 'Kilometraj: Indisponibil'
printMileage(0); // Afișează 'Kilometraj: 0'
Aserțiune Null
Inferența din TypeScript nu este perfectă. Uneori știi că o valoare nu poate fi null sau undefined, chiar dacă tipul ei spune că ar putea fi.
Ai putea folosi o conversie de tip, dar TypeScript îți oferă și operatorul ! ca mod scurt de a spune „această valoare este sigur setată”.
Notă: La fel ca o conversie de tip, acest lucru poate fi nesigur. Folosește-l cu grijă.
Exemplu
getValue() returnează string | undefined. Scriind value!.length îi spui lui TypeScript să trateze value ca pe un șir de caractere.
!.
Scrie getValue() cu tipul de retur string | undefined, care returnează 'hello', păstrează rezultatul în value și afișează 'lungimea valorii: ' plus value!.length, astfel încât rezultatul să arate lungimea 5.
Ieșire: program TypeScript și rezultatul capturat
function getValue(): string | undefined {
return 'hello';
}
let value = getValue();
console.log('lungimea valorii: ' + value!.length);
Tratarea limitelor tabloului
Chiar și cu strictNullChecks activat, TypeScript presupune în mod implicit că citirea unui element de tablou nu dă niciodată undefined (cu excepția cazului în care undefined face parte din tipul elementelor tabloului).
Opțiunea de compilare noUncheckedIndexedAccess schimbă acest lucru. Cu ea activată, fiecare citire după index primește undefined adăugat la tipul său.
Exemplu
În mod implicit array[0] are tipul number. Cu noUncheckedIndexedAccess devine number | undefined.
noUncheckedIndexedAccess.
Declară array ca number[] care conține 1, 2 și 3, apoi citește array[0] în value, cu un comentariu care precizează că sub noUncheckedIndexedAccess tipul ar fi number | undefined. Nu se afișează nimic.
Ieșire: program TypeScript și rezultatul capturat
let array: number[] = [1, 2, 3];
let value = array[0]; // cu `noUncheckedIndexedAccess` aceasta are tipul `number | undefined`