W listopadzie 2020 wraz z wydaniem TypeScript 4.1, szablony stringów stały się sprawdzalne dzięki wprowadzeniu template literal types.
Prawdopodobnie znasz typowanie stringów w JavaScript. Jest to rodzaj wyrażenia tekstowego w JavaScript, który pozwala na osadzenie wyrażeń w ciągu znaków:
Tak więc zmienna Message zawiera szablon, który ma w sobie dwa wyrażenia, które są zastępowane wartościami zmiennych name i age.
Otypujmy stringa
Aż do wersji 4.1 Typescript nie było możliwości utworzenia własnego typu szablonu stringa w celu późniejszego sprawdzenia, czy łańcuch pasuje do szablonu.
Template literal types pozwala na zdefiniowanie typów stringów na podstawie zawartości szablonu łańcucha. Umożliwia to tworzenie dynamicznych i dokładniejszych typów na podstawie wartości, których oczekujesz.
Aby utworzyć template literal type, możesz zacząć od szablonu stringa, a następnie użyć składni ${} do wstawienia typu.
Typ Greeting jest typem ciągu szablonowego. Opiera się na zawartości ciągu „Hello, ${string}!”, gdzie ${string} reprezentuje wyrażenie dla dowolnej wartości typu string. Dzięki temu możemy wtedy użyć typu Greeting jako typu return dla naszej funkcji greet, która pobiera argument string i zwraca wartość odpowiadającą typowi Greeting.
Przyjrzyjmy się, w jaki sposób możemy wykorzystać template literal types w tailwindzie. Jeśli chcemy stworzyć typ dla kolorów w tej bibliotece, możemy łatwo je utworzyć i przekazać jako parametr komponentu…
W tym przykładzie typ pozwoli na wszystkie warianty BaseColor i Variant, czyli 20 kombinacji (jest limit 100 000 wygenerowanych dozwolonych literałów).
Otypujmy klucze
Template literal types mogą być również używane w połączeniu z mapowaniem kluczy w typach generycznych. Pozwala to na tworzenie bardziej elastycznych i dynamicznych typów na podstawie kluczy obiektu.
Stworzyliśmy typ Prefix, który jest typem generycznym na podstawie kluczy typu T. Używamy template literal types, aby dla każdego klucza T dodać ciąg "prefix_”. Tworzy to nowy typ Prefixed, który ma te same klucze co T, ale z "prefix_" dodanym na początku każdego klucza.
Ale, to nie wszystko!
Oprócz template literal types TypeScript 4.5 wprowadził nową funkcję o nazwie: ,,sumy rozłączne” (discriminated unions). Sumy rozłączne to sposób tworzenia typów, które mogą reprezentować różne powiązane, ale odrębne wartości. Działają poprzez dodanie właściwości rozróżniającej do każdej wartości, co pozwala TypeScript określić typ wartości w czasie kompilacji.
Zdefiniowaliśmy dwa interfejsy, Square i Circle, każdy z właściwością kind, która służy jako rozłącznik. Następnie stworzyliśmy typ Shape, który może reprezentować Square lub Circle. Na koniec zdefiniowaliśmy funkcję calculateArea, która przyjmuje argument Shape i używa instrukcji switch do określenia typu kształtu w czasie kompilacji. Pozwala nam to pisać kod bezpieczny dla typu, który może obsługiwać wiele powiązanych typów.
Podsumowując, template literal types jest potężną funkcją wprowadzoną w TypeScript 4.1 aby tworzyć bardziej ekspresyjne i dynamiczne typy. Można ich używać do tworzenia szablonowych typów ciągów na podstawie zawartości łańcucha szablonu, tworzenia typów warunkowych, a nawet tworzenia bardziej elastycznych i dynamicznych typów na podstawie kluczy obiektu. Włączając dosłowne typy szablonów do kodu TypeScript, możesz uczynić swój kod bardziej precyzyjnym i ekspresyjnym oraz uniknąć wielu typowych błędów programistycznych.
Źródła:
Masz pytania? Koniecznie napisz!
.png)
