TypeScript, oblíbený programovací jazyk společnosti Microsoft, nadále ohromuje svou nejnovější verzí TypeScript 5.1. Tato verze, nabitá vzrušujícími novými funkcemi a vylepšeními, slibuje, že vaše zkušenosti s kódováním budou nové výšky.

Zjednodušené návraty funkcí a typy přístupových objektů

V JavaScriptu, když vytvoříte funkci a provedete jej, aniž byste narazili na příkaz return, automaticky vrátí hodnotu nedefinováno.

TypeScript 5.1 zavedl novou funkci, která umožňuje funkcím vracejícím se undefined úplně vynechat příkaz return. Toto vylepšení zlepšuje čitelnost kódu a jeho stručnost.

funkcelogMessage(zpráva: tětiva): nedefinováno{
řídicí panel.log (zpráva);
// Zde není potřeba žádný příkaz return
}

Tento příklad používá funkci logMessage pro zobrazení zprávy na konzole. Funkce však explicitně nevrací žádnou hodnotu.

TypeScript 5.1 zavádí novou funkci, která umožňuje použití nesouvisejících typů pro getry a settery, pokud poskytnete explicitní anotace typu.

Toto vylepšení se ukazuje jako velmi výhodné v situacích, kdy potřebujete vynutit různé typy přístupu a úpravy vlastnosti.

třída uživatel {
soukromé _název: tětiva | nula = nula;
soubor jméno (newName: tětiva) {
tento._name = newName;
 }
dostat název(): tětiva {
vrátit setento._název?? 'Neznámý';
 }
}

V tomto příkladu má třída User privátní _název vlastnost, která může být buď a tětiva nebo nula. The název setr bere provázek nové jméno a přiřadí to _název. Název getter vrací hodnotu _název pokud není nulanebo Neznámý Pokud to je.

To vám umožňuje vynutit, že vlastnost name může být nastavena pouze pomocí řetězce, ale při získávání vlastnosti name to může být buď řetězec nebo Neznámý pokud ještě není nastaveno.

Tato funkce umožňuje flexibilnější a výraznější definice typů, jak je znázorněno v příkladu níže.

rozhraní CSSStyleRule {
// Vždy se čte jako `CSSStyleDeclaration`
dostat style(): CSSStyleDeclaration;
// Zde lze napsat pouze `řetězec`.
soubor styl (newValue: tětiva);
}

Ve výše uvedeném příkladu má vlastnost style getter, který vrací CSSStyleDeclaration, a setter, který přijímá řetězec. Tyto typy spolu nesouvisejí, ale TypeScript 5.1 umožňuje tento druh definice typu.

Vylepšení JSX

TypeScript 5.1 zavádí několik vylepšení pro JSX. Nyní umožňuje oddělenou kontrolu typu mezi prvky JSX a typy značek JSX, což může být užitečné pro knihovny, jako je redux které umožňují komponentám vracet více než jen prvky JSX.

import * tak jako Reagovat z"reagovat";
asynchronnífunkceAsyncComponent() {
vrátit se
Načteno</div>;
}
// Toto je nyní povoleno:
nechat prvek = ;

V tomto příkladu je AsyncComponent funkce je asynchronní funkce, která vrací prvek JSX. TypeScript 5.1 vám umožňuje používat tento druh funkce jako komponentu JSX, což v předchozích verzích nebylo možné.

TypeScript 5.1 také zavádí podporu pro novou JSX Transform představenou v React 17. To vám umožní používat JSX bez importu React.

// Před
import Reagovat z"reagovat";
funkceKomponent() {
vrátit se
Ahoj světe!</h1>;
}
// Po
funkceKomponent() {
vrátit se
Ahoj světe!</h1>;
}

Ve výše uvedeném příkladu vrací funkce Component prvek JSX. V TypeScript 5.1 a React 17 již nemusíte importovat React, abyste mohli používat JSX.

Zvýšení výkonu a významné změny v TypeScript 5.1

TypeScript 5.1 zavádí několik optimalizací pro zlepšení výkonu, včetně optimalizace rychlosti, paměti a velikosti balíčku, vyhnout se zbytečné konkretizaci typu, negativním kontrolám velkých a malých písmen pro sjednocovací literály a omezení volání do skeneru pro JSDoc rozebrat.

Zde je příklad, jak se vyhnout zbytečné instanci typu v rámci typů objektů, o kterých je známo, že neobsahují odkazy na parametry vnějšího typu, a rychlejší kontroly sjednocovacích literálů.

typ Unie = 'A' | 'b' | 'C';
funkcešek(hodnota: Unie) {
// ...
}

V tomto příkladu může TypeScript 5.1 rychle zkontrolovat, zda je hodnota součástí typu Union, aniž by bylo nutné porovnávat všechny typy v unii.

Zde je další příklad:

typ Bod = { x: číslo, y: číslo };
funkcepřeložit(bod: bod, dx: číslo, dy: číslo): Směřovat{
vrátit se { x: bod.x + dx, y: bod.y + dy };
}
nechat p: Bod = { x: 1, y: 2 };
p = přeložit (p, 1, 1);

V tomto příkladu je typ Bod typ objektu, který neobsahuje žádné parametry typu. Když zavolá funkci translate, TypeScript 5.1 se může vyhnout zbytečné instanci typu, což může výrazně urychlit kontrolu typu.

Přijetí TypeScript 5.1

TypeScript 5.1 představuje řadu výkonných funkcí a optimalizací, které revolučním způsobem přinášejí vývoj JavaScriptu. Od zjednodušených návratů funkcí k vylepšením JSX a zvýšení výkonu vám TypeScript 5.1 umožňuje psát čistší a výraznější kód a zároveň zlepšuje kontrolu typu a celkový výkon.

Přijetím TypeScriptu 5.1 můžete odemknout nové možnosti a povýšit své JavaScript projekty na novou úroveň efektivity a inovace. Nechte TypeScript 5.1 být vaší bránou k pokročilejšímu a efektivnějšímu vývoji JavaScriptu.