Dość teorii, czas przyszedł na praktykę.
Zmigrowałem prosty przykład z aplikacją Angular.js zawierającą prostą listę i szczegóły.
Czynności, jakie wykonałem:
1. Biblioteki (jQuery, Angular.js) - poprzednie wersje *.d.ts przestały się kompilować. Inna sprawa że plik jquery.d.ts dystrybowany z TypeScript jest dla jQuery 1.7.x podczas, gdy od pewnego czasu mamy już wersje powyżej 2. Całość rozwiązują pliki *.d.ts dystrybowane przez społeczność na stronce https://github.com/borisyankov/DefinitelyTyped (podanej także na oficjalnej stronie TypeScript). Wszystkie pliki deklaracyjne działają z najnowszymi wersjami jQuery i Angular.js.
2. Kod. Najpierw kilka drobnych poprawek w stylu niepotrzebny przecinek, nieodpowiedni rodzaj dostępu (public, private). Dawniej kompilator pozwalał na pewne nieścisłości, dziś jest restrykcyjny. Zmieniła się też nazwa typu TypeScript dla serwisu w Angularze. Z nowych rzeczy wprowadziłem do kodu generyki (m.in do kontrolerów)
Przykład można pobrać tutaj.
Wszystko pięknie działa!
Oprócz migracji przykładu z aplikacją, bawiłem się przez chwilę nowo wprowadzonymi konstrukcjami. Kilka zdań podsumowania:
1. Generyki mogą być definiowane warunkowo np.
class DetailsController<T extends Entity> {
data: T;
}
2. Definicje przeładowań na stałych są możliwe przy definicjach funkcji bez implementacji. Jeśli zdefiniuję interfejs z takimi przeładowaniami, a potem klasę, która go implementuje, to zmienna o typie tej klasy nie pokaże w IDE przeładowań o stałe. Dopiero zrzutowanie zmiennej na interfejs daje taką możliwość.
3. Z definicji enum (ze stałymi bądź wyliczanymi elementami) generują się w JavaScript funkcje. Przykładowo:
TS
enum Color { Red, Green, Blue };
JS
var Color;
(function (Color) {
Color[Color["Red"] = 0] = "Red";
Color[Color["Green"] = 1] = "Green";
Color[Color["Blue"] = 2] = "Blue";
})(Color || (Color = {}));
TS
enum Test { A, B, C = 10, D, E = Math.floor(Math.random() * 1000) };
JS
var Test;
(function (Test) {
Test[Test["A"] = 0] = "A";
Test[Test["B"] = 1] = "B";
Test[Test["C"] = 10] = "C";
Test[Test["D"] = 0] = "D";
Test[Test["E"] = Math.floor(Math.random() * 1000)] = "E";
})(Test || (Test = {}));
Brak komentarzy:
Prześlij komentarz