Napsal Paul Cowan ✏️
Myslím, že vydání TypeScript 3.7 je obrovské. Čekal jsem velmi, velmi dlouho, než budu mít volitelné řetězení, když jsem to před několika lety krátce ochutnal na smlouvě v C#.
Jaký problém to řeší?
Jedním z nejvýznamnějších problémů, které většina z nás ve světě JavaScriptu/TypeScriptu trápí, je neustálá kontrola proměnných nebo výrazů pro null nebo undefined . Níže uvedený příklad je TypeScript 3.7 a ilustruje, co toto vydání změnilo. S novou funkcí můžeme konečně drasticky zastavit množství nesmyslných kódů, které musíme napsat.
class Student {
constructor(public name: string) {}
discipline?: Discipline;
printDetails() {
return `
name: ${this.name}
discipline: this.discipline?.name || 'Not set';
`;
}
}
class Discipline {
student?: Student;
constructor(public name: string) { }
}
class College {
constructor(public name: string) { }
disciplines?: Discipline[];
}
class City {
constructor(public name: string) { }
college?: College;
}
class University {
constructor(public name: string) { }
city?: City;
get college(): College | undefined {
return this?.city?.college;
}
addDisciplines(...disciplines: Discipline[]) {
if (!this.city?.college?.disciplines) {
return;
}
this.city.college.disciplines.push(...disciplines)
}
}
const university = new University("Queen's University Belfast");
const city = new City("Belfast");
const computerScience = new Discipline("Computer Science");
const economics = new Discipline("Economics");
const college = new College("Da College");
const student = new Student("Brian Cant");
university.city = city;
university.city.college;
university.addDisciplines(computerScience, economics);
const firstStudent = university.city?.college?.disciplines?.[0]?.student; // Student | undefined
console.log(firstStudent?.printDetails())
Zde je hřiště s funkčním příkladem výše uvedeného fragmentu kódu.
Řádek 1 obsahuje Student definice třídy, která obsahuje volitelný discipline vlastnost, která může mít undefined nebo null hodnota. A printDetails metoda existuje na řádku 6 což zahrnuje přístup s volitelnou vlastností.
printDetails() {
return `
name: ${this.name}
discipline: this.discipline?.name || 'Not set';
`;
}
Volitelné řetězení určíte umístěním ? otazník za volitelnou hodnotou vlastnosti, na kterou chcete volat vlastnost, metodu nebo dokonce dolní index (více o tom později), abyste vynutili rozbalení její hodnoty. Pokud během rozbalování vlastnosti nebo metody null hodnotu nebo undefined hodnota je nalezena, undefined je vráceno. undefined je vždy vráceno bez ohledu na to, zda je základní hodnota null nebo undefined .
Níže jsou uvedeny některé hrozné kódy, které bychom únavně psali před tímto vynikajícím vydáním.
printDetails() {
return `
name: ${this.name}
discipline: this.discipline && this.discipline.name ? this.discipline.name : 'Not set';
`;
}
Kde se leskne volitelné řetězení při práci s hluboce vnořenými objekty na řádku 3 z níže uvedeného příkladu kódu nebo řádek 63 prvního příkladu kódu:
university.addDisciplines(computerScience, economics);
const firstStudent = university.city?.college?.disciplines?.[0]?.student; // Student | undefined
console.log(firstStudent?.printDetails())
Dříve bychom museli udělat nějaké dost nechutné věci, abychom se dostali k tak hluboké hierarchii, ale nyní můžeme volitelně zřetězit naši cestu k mnohem lepší existenci s TypeScript 3.7.
Přístup k dolním indexům prostřednictvím volitelného řetězení
Volitelné řetězení můžete použít k pokusu o načtení hodnoty z dolního indexu na volitelné hodnotě a ke kontrole, zda je volání tohoto dolního indexu úspěšné.
const firstStudent = university.city?.college?.disciplines?.[0]?.student;
Instance Discipline třída může mít řadu studentů. Když přistupujete k dolnímu indexu na volitelné hodnotě prostřednictvím volitelného řetězení, umístíte otazník před dolní index závorky, ne za. Nepovinný řetězový otazník vždy následuje bezprostředně za částí výrazu, která je nepovinná.
Myslím, že je to masivní, budeme psát podstatně méně kódu, který kontroluje existenci věcí. Nemohu zadržet své vzrušení z tohoto vydání.
Nulové slučovací operátory
Další funkcí, kterou jsem dříve v C# zažil, je operátor null coalescing (?? ), což zjednodušuje kontrolu hodnot null nebo nedefinovaných.
const a: number | null = null;
const b = a ?? 42;
console.log(b); // 42
A co || ?
Když jsem to viděl poprvé v TypeScriptu, zakřičel jsem ‚a co || ?‘ Níže je stejný příklad se stejným výsledkem.
const a: number | null = null;
const b = a || 42;
console.log(b); // 42
Kde se tento příklad rozpadá, jsou pravdivé a nepravdivé podvody JavaScriptu.
const a: number | null = 0;
const b = a || 42;
console.log(b); // 42
Bohužel 0 vrátí false při použití ve výrazu s JavaScriptem, takže 42 se dostane do konzole, což je nesprávné.
V této situaci přichází na pomoc koalescenční operátor.
const a: number | null = 0;
const b = a ?? 42;
console.log(b); // 0
Přestanu používat zkrat nebo || při vydání TypeScript 3.7 a místo toho použijte krásný ?? operátor.
Hra změněna
Na tyto změny jsem čekal dlouho a myslím si, že oficiální oznámení TypeScriptu dělá svou obvyklou práci spočívající v podceňování skvělých nových funkcí.
Také nenávidím příklady kódu, které používají:
// Before
if (foo && foo.bar && foo.bar.baz) {
// ...
}
// After-ish
if (foo?.bar?.baz) {
// ...
}
Myslím, že to ilustruje rozpor mezi skutečným světem a vývojáři TypeScript. foo , bar a baz jsou jen ty nejhorší příklady, které lze použít pro cokoli. Nemohu myslet na nic hmatatelného s těmito vytvořenými vlastnostmi.
Myslím, že by se z tohoto vydání mělo udělat mnohem více. Díky tomu bude psaní TypeScript výrazně méně otravné.
Zanechte prosím zpětnou vazbu v komentářích níže.
Poznámka redakce: Vidíte na tomto příspěvku něco špatného? Správnou verzi najdete zde.
Plug:LogRocket, DVR pro webové aplikace
LogRocket je frontendový protokolovací nástroj, který vám umožní přehrát problémy, jako by se staly ve vašem vlastním prohlížeči. Namísto hádání, proč k chybám dochází, nebo žádostí uživatelů o snímky obrazovky a výpisy protokolů, vám LogRocket umožňuje přehrát relaci, abyste rychle pochopili, co se pokazilo. Funguje perfektně s jakoukoli aplikací, bez ohledu na rámec, a má pluginy pro přihlášení dalšího kontextu z Redux, Vuex a @ngrx/store.
Kromě protokolování akcí a stavu Redux zaznamenává LogRocket protokoly konzoly, chyby JavaScriptu, stacktrace, síťové požadavky/odpovědi s hlavičkami + těly, metadata prohlížeče a vlastní protokoly. Nástroj DOM také zaznamenává HTML a CSS na stránku a vytváří videa s dokonalými pixely i těch nejsložitějších jednostránkových aplikací.
Vyzkoušejte to zdarma.
Příspěvek Volitelné řetězení a operátor null coalescing jsou v TypeScriptu 3.7 zásadní změny appeared first on LogRocket Blog.