TypeScript jest językiem open source, opartym na JavaScript, który przyśpiesza i usprawnia pisanie kodu JavaScript oraz redukują ilość powstających błędów. Udostępnia wiele ciekawych funkcjonalności takich jak statyczne typowanie, enumy, interfejsy i wiele więcej.

Dodatkowo pozwala używać funkcji ES6 takich jak funkcja strzałkowe, let/const czy klasy nie rezygnując z wspierania starszych przeglądarek, które nierozpoznaną tych funkcji.

Patrząc na wszystkie pliki w projekcie, które są już napisane w JavaScript, dla wielu osób, które myślą o migracji na TypeScript, cały proces może wydawać się przytłaczający.

Na szczęście migracja na TypeScript nie jest wcale tak skomplikowana. Aby dodać TypeScript do naszego projektu musimy wykonać kilka następujących kroków.

  1. Zmiana rozszerzeń wszystkich plików .js na .ts.
  2. Instalacja TypeScript
  3. Dodanie pliku tsconfig.json do projektu.
  4. Integracja z narzędziem do budowania projektu
  5. Dodanie plików definicji bibliotek zewnętrznych

Rozszerzenia plików

Pierwszym krokiem jest zmiana rozszerzeń istniejących plików, które chcemy zmigrować do TypeScript.

Zmiana rozszerzeń istniejących plików nie wiąże się z żadnymi zmianami w kodzie. Dowolny kod JavaScript jest również prawidłowym kodem TypeScript, co oznacza, że nadal możemy korzystać z kodu JavaScript, nie korzystając z żadnych funkcji oferowanych przez TypeScript. Oznacza to, że nie musisz migrować wszystkich plików jednocześnie, a migracja może odbywać się stopniowo, plik po pliku.

Instalacja TypeScript

Kolejnym krokiem jest instalacja TypeScript. Zakładając, że używamy npm (Node Package Manager) do zarządzania pakietami w projekcie, za jego pomocą możemy zainstalować Typescript lokalnie:

npm install typescript

lub globalnie, co pozwoli używać TypeScript we wszystkich projektach:

npm install -g typescript

Plik tsconfig.json

Plik tsconfig.json zawiera opcje używane podczas konwersji kodu TypeScript na JavaScript.

Aby utworzyć plik tsconfig.json, otwieramy wiersz poleceń i przechodzimy do katalogu projektu, a następnie uruchomiamy następujące polecenie:

tsc --init

Powinieneś otrzymać komunikat wskazujący, że plik tsconfig.json został utworzony.

Integracja z narzędziem do budowania projektu

Większość projektów JavaScript używa narzędzi wspomagających budowanie projektu, takie jak gulp, grunt lub webpack. Nie zależnie, którego używamy w naszym projekcie, każde z tych narzędzi ma gotowe wtyczki, która umożliwiają kompilację kodu TypeScript na kod JavaScript. W tym artykule skupimy się na gulp’ie .

Gulp to zestaw narzędzi do automatyzacji żmudnych lub czasochłonnych zadań związanych z programowaniem, takich jak budowanie projektu, sprawdzanie jakości kodu, uruchamiania testów itp.

Rozpatrzmy następujący przykład pliku gulpfile.js:

const {src, dest} = require('gulp');
const concat = require('gulp-concat');
const inject = require('gulp-inject');

gulp.task('default', function () {
    var js = src(['src/app.js', 'src/home.js'])
    .pipe(concat('app.js'))
    .pipe(dest('./dist/'));

    return src('src/index.html')
    .pipe(inject(js, { ignorePath: 'dist/', addRootSlash: false }))
    .pipe(dest('dist/'));
});

Powyższa konfiguracja łączy dwa pliki src/app.js oraz src/home.js, wynik połączenie zapisuje w pliku dist/app.js, a następnie dodaje tag <script> ładujący plik dist/app.js do pliku index.html.

Do integracji TypeScript z gulpem używamy wtyczki gulp-typescript:

npm install gulp-typescript 

Gdy już mamy niezbędną wtyczkę zabieramy się za aktualizację pliku gulpfile.js:

const {src, dest} = require('gulp');
const concat = require('gulp-concat');
const inject = require('gulp-inject');
const ts = require('gulp-typescript');
const tsProject = ts.createProject('tsconfig.json');

gulp.task('default', function () {
    var js = src(['src/app.ts', 'src/home.ts'])
    .pipe(tsProject())
    .pipe(concat('app.js'))
    .pipe(dest('./dist/'));

    return src('src/index.html')
    .pipe(inject(js, { ignorePath: 'dist/', addRootSlash: false }))
    .pipe(dest('dist/'));
});

Powyższy przykład kompiluje kod TypeScript znajdujący się w katalogu src/ na kod JavaScript oraz zapisuje wynik tej kompilacji w katalogu dist/.

Po pomyślnej kompilacji kodu z TypeScript na JavaScript, kompilator może zwrócić kilka lub kilkanaście błędów związanych z projektem. Wiele z nich można wyłączyć za pomocą odpowiedniej konfiguracji flag w pliku tsconfig.json lub po prostu naprawić np. dodając adnotacje typu any.

Definicje typów

Teraz, gdy kompilacja z TypeScript na JavaScript działa bez zarzutów, warto rozważyć dodanie definicji typów bibliotek zewnętrznych, z których korzystamy np. angular, lodash, jquery itp. Definicje typów ułatwiają pisanie kodu w TypeScript poprzez podpowiadanie składni. Wiele plików definicji typów TypeScript jest już dostępnych w witrynie DefinitelyTyped.

npm install @types/angular
npm install @types/lodash

Mapy kodu źródłowego

W projektach używających TypeScript, kod JavaScript wykonywany przez przeglądarkę jest inny od oryginalnego kodu stworzonych przez programistę. W takich sytuacjach dużo łatwiej jest debugować oryginalny kod TypeScript niż przekształcony kod JavaScript. Source maps to nic innego jak mapy kodu źródłowego.

Do wygenerowania source maps użyjemy gulp-sourcemaps:

npm install gulp-sourcemaps

Aby wygenerować source maps należy użyć dwóch metod init() i write():

const {src, dest} = require('gulp');
const concat = require('gulp-concat');
const inject = require('gulp-inject');
const ts = require('gulp-typescript');
const tsProject = ts.createProject('tsconfig.json');
const sourcemaps = require('gulp-sourcemaps');

gulp.task('default', function () {
    var js = src(['src/app.ts', 'src/home.ts'])
    .pipe(sourcemaps.init())
    .pipe(tsProject())
    .pipe(concat('app.js'))
    .pipe(sourcemaps.write())
    .pipe(dest('./dist/'));

    return src('src/index.html')
    .pipe(inject(js, { ignorePath: 'dist/', addRootSlash: false }))
    .pipe(dest('dist/'));
});

Podsumowanie

  • TypeScript jest rozszerzeniem JavaScript, które dodaje dodatkowe funkcje takie jak statyczne typowanie, interfejsy czy enumy oraz umożliwia korzystanie z funkcji ES6
  • migracja na TypeScript wiąże się z kilkoma krokami:
    • Zmiana rozszerzeń wszystkich plików .js na .ts.
    • Instalacja TypeScript
    • Dodanie pliku tsconfig.json do projektu.
    • Integracja z narzędziem do budowania projektu
    • Dodanie plików definicji bibliotek zewnętrznych
  • Plik tsconfig.json zawiera opcje używane podczas konwersji kodu TypeScript na JavaScript
  • Do integracji TypeScript z gulpem można użyć wtyczki gulp-typescript
  • Definicje typów ułatwiają pisanie kodu w TypeScript poprzez podpowiadanie składni
  • Mapy kodu źródłowego (source maps) umożliwiają debugowanie oryginalnego kodu TypeScript pomimo, że przeglądarka korzysta z przekształconego kodu JavaScript

0 Comments

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *