Co to jest TypeScript?

TypeScript to język, który jest nakładką na JavaScript. Udostępnia on silne typowanie dla tego dynamicznego języka. Dodatkowo wprowadza on klasy, moduły i interfejsy, które pomagają w organizacji kodu aplikacji. Jest to szczególnie użyteczne w dużych projektach z wydzielonymi wieloma częściami aplikacji. Dzięki użyciu mechanizmów obiektowych możemy porządkować kod, a dzięki silnemu typowaniu każdy błąd składniowy zostanie wykryty już podczas kompilacji lub, w niektórych edytorach, nawet podczas pisania. Dobra konfiguracja TypeScript pozwoli nam w dużej mierze zautomatyzować ten proces.

Dużym plusem języka TypeScript jest jego pełna kompatybilność z JavaScript. Każdy plik napisany w JS po zmianie rozszerzenia na .ts jest od razu poprawnym plikiem TypeScriptowym. Pozwala to na stosunkowo łatwą migrację projektu napisanego w JS. Jednak warto też wspomnieć o minusach TypeScriptu. Kłopoty zaczynają się, gdy chcemy skorzystać z biblioteki, do której nie są dostępne pliki typowań (definicje typów dla mechanizmu silnego typowania). Typowania dla wielu bibliotek jesteśmy w stanie znaleźć na https://github.com/DefinitelyTyped/DefinitelyTyped. Niestety, gdy chcemy skorzystać z mniej popularnych bibliotek lub choćby z najnowszych wersji, możemy nie znaleźć odpowiednich definicji. Ponieważ typowania są nam potrzebne głównie do sprawdzania poprawności użytych typów danych, możemy skompilować nasze pliki do JS, licząc się z tym, że będą one generować błędy lub ostrzeżenia kompilacji.

Dalej pokażę jak skonfigurować kompilację TypeScript w różnych środowiskach.

Konsola

Podstawowym miejscem obsługi kompilatora TypeScript jest konsola. Zacznijmy od instalacji, którą najlepiej przeprowadzić za pomocą npm

npm install -g typescript

Następnie potrzebny jest plik konfigurujący dla kompilatora. Definiujemy w nim parametry, mówiące o dialekcie, do którego chcemy skompilować kod (ES4, ES5 lub ES6), kompilowanych plikach lub też generowaniu sourceMap. Dokładny opis parametrów znajduje się w dokumentacji https://github.com/Microsoft/TypeScript/wiki/tsconfig.json. Podstawowym ustawieniem może być:

{
    "compilerOptions": {
        "module": "commonjs",
        "noImplicitAny": true,
        "removeComments": true,
        "preserveConstEnums": true,
        "sourceMap": true
    },
    "exclude": [
        "node_modules",
        "dist"
    ]
}

Powoduje ono kompilacje wszystkich dostępnych plików .ts do plików .js oraz do sourceMap z katalogu bieżącego i katalogów w nim zawartych. Dodatkowo czyści wynikowe pliki z nadliczbowych komentarzy i definicji.

Teraz wystarczy wywołać komendę

tsc

Pozwala ona na kompilowanie wszystkich plików w naszym projekcie. Pliki .ts zostaną przetworzone do plików .js w tym samym folderze. Można skorzystać z ułatwienia kompilacji i założyć czujkę na plikach do kompilacji. To pozwoli na kompilowanie plików w tle przy każdym zapisie.

tsc -w

Gulp

Gdybyśmy chcieli włączyć proces kompilacji do procesu przetwarzania naszego projektu np. przy pomocy Gulp, musimy skorzystać z odpowiedniej biblioteki

npm install gulp-typescript --save-dev

następnie możemy dodać poniższe kroki budowania do naszego pliku konfiguracyjnego gulpfile.js

var gulp = require('gulp');
var ts = require('gulp-typescript');
var tsProject = ts.createProject('tsconfig.json');

gulp.task('scripts', function () {   
    var tsResult = tsProject.src().pipe(ts(tsProject));
    return tsResult.js.pipe(gulp.dest('.'));
});

Dokładniejszy opis można znaleźć w http://blah.winsmarts.com/2015-7-Setting_up_TypeScript_with_Visual_Studio_Code.aspx

VisualStudio Code

Używając Visual Studio Code do edycji projektów w TypeScript, można skonfigurować sposób budowania aplikacji, który wykorzystuje kompilator TypeScript. W tym celu wystarczy dodać w pliku tasks.json, znajdującym się w klatalogu .vscode, odpowiednią konfigurację dla kompilacji

{
    "version": "0.1.0",
    "command": "tsc",
    "isShellCommand": true,
    "showOutput": "silent",
    "problemMatcher": "$tsc"
}

https://code.visualstudio.com/Docs/languages/typescript
https://cmatskas.com/typescript-and-vs-code/

W codziennej pracy pomocne jest uporządkowanie naszego projektu tak, aby nie wyświetlał generowanych plików. Aby to zrobić, należy edytować ustawienia workspace (File | Preferences | Workspace Settings), a następnie dodać ukrycie plików sourcemap i warunkowe ukrycie plików js

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

https://code.visualstudio.com/Docs/languages/typescript#_hiding-derived-javascript-files

Przykładowe kody źródłowe można znaleźć na GitHub:

https://github.com/suvroc/InvestDashboard/releases/tag/v0.0.1