sobota, 22 czerwca 2013

TypeScript 0.9 (4)

Dość teorii, czas przyszedł na praktykę.

Zmigrowałem prosty przykład z aplikacją Angular.js zawierającą prostą listę i szczegóły.

image

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: