TypeScript, popularny język programowania firmy Microsoft, nadal imponuje swoją najnowszą wersją, TypeScript 5.1. Ta wersja, pełna ekscytujących nowych funkcji i ulepszeń, obiecuje nowe doświadczenie w programowaniu wysokości.

Uproszczone zwroty funkcji i typy akcesorów

W JavaScript, kiedy tworzysz funkcję i wykonać go bez napotkania instrukcji return, automatycznie zwraca wartość nieokreślony.

TypeScript 5.1 wprowadził nową funkcję, która umożliwia funkcjom zwracającym undefined całkowite pominięcie instrukcji return. To udoskonalenie poprawia czytelność i zwięzłość kodu.

funkcjonowaćlogWiadomość(wiadomość: strunowy): nieokreślony{
konsola.log (wiadomość);
// Instrukcja return nie jest tutaj potrzebna
}

W tym przykładzie użyto funkcji logWiadomość aby wyświetlić komunikat na konsoli. Jednak funkcja nie zwraca jawnie żadnej wartości.

TypeScript 5.1 wprowadza nową funkcję, która pozwala na użycie niepowiązanych typów dla metod pobierających i ustawiających, o ile zapewnisz jawne adnotacje typu.

To ulepszenie okazuje się bardzo korzystne w sytuacjach, w których trzeba wymusić odrębne typy w celu uzyskania dostępu do właściwości i jej modyfikowania.

klasa Użytkownik {
prywatny _nazwa: strunowy | zero = zero;
ustawić nazwa (nowa nazwa: strunowy) {
Ten._nazwa = nowa nazwa;
 }
Dostawać nazwa(): strunowy {
powrótTen._nazwa?? 'Nieznany';
 }
}

W tym przykładzie klasa User ma private _nazwa właściwość, która może być albo a strunowy Lub zero. The nazwa seter bierze ciąg nowe imie i przypisuje go _nazwa. Moduł pobierający nazwę zwraca wartość _nazwa jeśli nie zero, Lub Nieznany Jeśli to jest.

Pozwala to wymusić, że właściwość name może być ustawiona tylko za pomocą ciągu znaków, ale przy pobieraniu właściwości name może to być albo ciąg znaków, albo Nieznany jeśli nie została jeszcze ustawiona.

Ta funkcja umożliwia bardziej elastyczne i wyraziste definicje typów, jak pokazano w poniższym przykładzie.

interfejs CSSStyleReguła {
// Zawsze odczytywane jako `CSSStyleDeclaration`
Dostawać style(): CSSStyleDeclaration;
// Można tu wpisać tylko `string`.
ustawić styl (nowaWartość: strunowy);
}

W powyższym przykładzie właściwość style ma moduł pobierający, który zwraca CSSStyleDeclaration, oraz element ustawiający, który akceptuje ciąg znaków. Te typy nie są ze sobą powiązane, ale TypeScript 5.1 pozwala na tego rodzaju definicje typów.

Ulepszenia JSX

TypeScript 5.1 wprowadza kilka ulepszeń dla JSX. Umożliwia teraz oddzielone sprawdzanie typów między elementami JSX i typami tagów JSX, co może być przydatne dla bibliotek takich jak redux które pozwalają komponentom zwracać więcej niż tylko elementy JSX.

import * Jak Reagować z"reagować";
asynchronicznyfunkcjonowaćSkładnik asynchroniczny() {
powrót
Załadowano</div>;
}
// To jest teraz dozwolone:
pozwalać element = ;

W tym przykładzie Składnik asynchroniczny function jest funkcją asynchroniczną, która zwraca element JSX. TypeScript 5.1 pozwala używać tego rodzaju funkcji jako komponentu JSX, co nie było możliwe w poprzednich wersjach.

TypeScript 5.1 wprowadza również obsługę nowego JSX Transform wprowadzonego w React 17. Dzięki temu możesz używać JSX bez importowania React.

// Zanim
import Reagować z"reagować";
funkcjonowaćCzęść() {
powrót
Witaj świecie!</h1>;
}
// Po
funkcjonowaćCzęść() {
powrót
Witaj świecie!</h1>;
}

W powyższym przykładzie funkcja Component zwraca element JSX. W TypeScript 5.1 i React 17 nie musisz już importować Reacta, aby używać JSX.

Wzrost wydajności i znaczące zmiany w TypeScript 5.1

TypeScript 5.1 wprowadza kilka optymalizacji w celu poprawy wydajności, w tym optymalizacje szybkości, pamięci i rozmiaru pakietu, unikanie niepotrzebnego tworzenia instancji typu, negatywnej kontroli wielkości liter dla literałów unii i zredukowanych wywołań skanera dla JSDoc rozbiór gramatyczny zdania.

Oto przykład unikania niepotrzebnego tworzenia instancji typów w typach obiektów, o których wiadomo, że nie zawierają odniesień do zewnętrznych parametrów typu, oraz szybszego sprawdzania literałów unii.

typ Unia = 'A' | 'B' | 'C';
funkcjonowaćsprawdzać(wartość: Unia) {
// ...
}

W tym przykładzie TypeScript 5.1 może szybko sprawdzić, czy wartość należy do typu unii, bez konieczności sprawdzania każdego typu w unii.

Oto kolejny przykład:

typ Punkt = {x: numer, y: numer };
funkcjonowaćTłumaczyć(punkt: Punkt, dx: numer, dy: numer): Punkt{
powrót { x: punkt.x + dx, y: punkt.y + dy };
}
pozwalać p: Punkt = {x: 1, y: 2 };
p = przetłumacz (p, 1, 1);

W tym przykładzie typ Point jest typem obiektu, który nie zawiera żadnych parametrów typu. Kiedy wywołuje funkcję translate, TypeScript 5.1 może uniknąć niepotrzebnego tworzenia instancji typu, co może znacznie przyspieszyć sprawdzanie typu.

Obejmując TypeScript 5.1

TypeScript 5.1 wprowadza szereg zaawansowanych funkcji i optymalizacji, które rewolucjonizują rozwój języka JavaScript. Od uproszczonych funkcji powracających do ulepszeń JSX i zwiększenia wydajności, TypeScript 5.1 umożliwia pisanie czystszego, bardziej wyrazistego kodu przy jednoczesnym poprawieniu sprawdzania typów i ogólnej wydajności.

Przyjmując TypeScript 5.1, możesz odblokować nowe możliwości i wznieść swoje projekty JavaScript na nowy poziom wydajności i innowacyjności. Pozwól, aby TypeScript 5.1 był Twoją bramą do bardziej zaawansowanego i usprawnionego programowania w języku JavaScript.