TypeScript i jQuery w Visual Studio Code – krok po kroku

Postanowiłem się nauczyć „nowego” języka – TypeScript. To język zaprojektowany przez Duńczyka Anders Hejlsberg współtwórcę C#.

A tak przy okazji języki programowania stworzone przez Duńczyków:

• Anders Hejlsberg
  • Delphi
  • C#
  • TypeScript
• Bjarne Stroustrup – C++
• Rasmus Lerdorf – PHP

Dlaczego TypeScript?

TypeScript jest językiem opierającym się o JavaScript i tłumaczonym na JavaScript. Wynikiem pliku app.ts jest plik z kodem app.js.

TypeScript został wprowadzony po to, aby wprowadzić sprawdzanie poprawności typów. Świetnym bonusem jest lepsze podpowiadanie kodu przez InteliSense, przy wsparciu JSDoc otrzymujemy kawałki dokumentacji przy pisaniu kodu.

Istniejący kod JavaScript można uzbroić o same definicje typów, dzięki czemu Visual Studio Code będzie podpowiadać nam kod mimo, że nie został napisany w TypeScript.

Cel: Stworzenie środowiska pracy z TypeScript i jQuery

Skupię się na mimimum bez tysiąca bibliotek do z budowania projektu, wspierania EcmaScript 2015, wykorzystywania Sassa etc.

Bazuje na tym tutorialu, ale zauważyłem, że posiada kilka dziur w opisie oraz nie opisuje jak połączyć TypeScript z najpopularniejszą biblioteką JavaScript.

Wymagania software przed rozpoczęciem:

• Node – u mnie jest wersja 6.8.1
• Visual Studio Code – u mnie jest werjsa 1.6.1
• TypeScript instalacja poprzez npm – npm install -g typescript wersja 2.0.3

Odpal konsole i wykonaj takie komendy (zakładam, że katalog c:\dev istnieje)

cd c:\dev
mkdir helloworldts
cd helloworldts
code .
npm init
npm install @types/jquery --save-dev

Utworzyliśmy katalog helloworldts dla naszego środowiska pracy. Potem odpaliśmy Visual Studio Code podając, że obecny katalog był użyty jako środowisko pracy.

Następnie wygenerowaliśmy plik package.json który będzie przechowywał informacje o pakietach, które będziemy wykorzystywać. W następnej linii instalujemy taki pakiet @types/jquery, który zawiera definicje funkcji w jQuery.

„Uzbrajamy” jQuery o definicje typów, aby kompilator TypeScript wiedział jakie funkcje są dostępne w bibliotece.

Kolejnym krokiem jest utworzenie pliku tsconfig.json w katalogu głównym.

{
    "compilerOptions": {
        "target": "es5", 
        "sourceMap": true
    }
}

Tutaj ustawiamy jak kompilator ma postępować z kodem TypeScript i jak ma wyglądać wynik kompilacji.

Co ustawiliśmy:

• target – z którą wersją EcmaScript ma być kompatybilny kod wynikowy. EcmaScript 5 (es5) jest obsługiwany przez wszystkie przeglądarki internetowe.
• sourceMap – kod pisany przy użyciu TypeScript wygląda inaczej niż kod obsługiwany przez przeglądarkę. Jeżeli zdarzy się błąd w linii 125, to nie będzie 125 linia kodu TypeScript. Dlatego wykonuje się mapowania, które przekładają błąd w linii 125 na przykład błąd w linii 73. Przydatne.

Czas utworzyć pierwszy plik app.ts:

class Greeter {
    public static Greet(name: string): void {
        console.log('Hello ' + name);
    }
}

Greeter.Greet('Pawel');

Teraz trzeba stworzyć polecenie do kompilacji. W tym celu skorzystaj z Ctrl+Shift+P i wpisz Configure Task Runner i wciśniij Enter, aby wybrać.

z listy wybierz TypeScript - tsconfig.json. Zostanie utworzony plik tasks.json w katalogu .vscode o takiej treści

{
    // See https://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    "version": "0.1.0",
    "command": "tsc",
    "isShellCommand": true,
    "args": ["-p", "."],
    "showOutput": "silent",
    "problemMatcher": "$tsc"
}

Aby zbudować czyli zamienić pliki TypeScript na pliki JavaScript, które mogą być wykorzystane przez przeglądarkę należy zastosować kombo Ctrl+Shift+B.

Pojawią się dwa nowe pliki w katalogu.

• app.js – plik, który możemy użyć w przeglądarce
• app.js.map – plik, który informuje przeglądarkę, że ten kod który teraz przetwarza u programisty wygląda trochę inaczej.

Prawdopodobnie chcesz ukryć te pliki w edytorze, aby ich przez przypadek nie zedytować, bo ich zawartość podczas kolejnej kompilacji zostanie zastąpiona przez wygenerowany kod JavaScript.

Aby je ukryć trzeba skonfigurować środowisko pracy w Visual Studio Code. Należy wybrać File->Preferences->Workspace settings

i dodać

"files.exclude": {
    "**/.git": true,
    "**/.svn": true,
    "**/.hg": true,
    "**/.DS_Store": true,
    "**/*.js": { "when": "$(basename).ts"},
    "**/*.map" : { "when": "$(basename)"}
}

Wykluczenie plików *.js.map opiera się na małym hack’u. Obsługa wykluczania .js.map „jest na backlogu”

Więcej informacji o konfigurowaniu środowiska znajdziesz w innym poście.

Uruchomienie skompilowanego kodu

Tworzymy plik index.html o takiej zawartości:

<html>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script type="text/javascript" src="app.js"></script>
</html>

Jedyne co robimy to podłączamy jQuery oraz nasz plik który został skompilowany z kodu TypeScript.

jQuery

Obsługę jQuery już mamy. Dodaliśmy ją w tym kroku npm install @types/jquery --save-dev

Po prostu zacznij pisać kod wykorzystujący jQuery.

Obsługa błędów – mapowanie

Do naszej klasy dodajmy funkcję MakeError()

public static MakeError(): never {
    throw new Error("This is an Error!")
}

gdy uruchomimy tą funkcję w przeglądarce i zajrzymy do konsoli JavaScript. Zobaczymy coś takiego.

kliknięcie na app.ts:7 wskaże miejsce, w którym wystąpił błąd.