Categories ProgramowaniePosted on

TypeScript dzielenie kodu na wiele plików, moduły i WebPack – Krok po kroku

Paweł SołtysiakLeave a Comment on TypeScript dzielenie kodu na wiele plików, moduły i WebPack – Krok po kroku

Ostatnio skończyliśmy na HelloWorld, teraz skupimy się jak można podzielić nasz kod na wiele plików.

Kod TypeScript tak jak JavaScript dzieli się na moduły.

Aby umożliwić korzystanie z modułów w TypeScript należy z edytować tsconfig.json i dodać

"compilerOptions": {
    "module": "commonjs"
}

Określając module określamy jaki wzorzec, akceptowany przez popularne ładowarki-pakietów. Zmiana ustawienia module zmienia kod, który jest generowany przez słowa kluczowe export i import

commonjs to wzorzec wykorzystywany standardowo wykorzystywany przez Node.js. Wykorzystanie CommonJS sprowadza się do napisania w JavaScript:

var calc = require('./calc');

require to funkcja definiowana przez Node.js, która pozwala na załadowanie plików. W powyższym przykładzie ładujemy wyeksportowane funkcje z biblioteki calc. Aby zrobić coś podobnego w TypeScript trzeba napisać:

import calc from './calc';

Kompilator (a raczej transpiler – to kompilator tłumaczący kod źródłowy na inny kod źródłowy) TypeScript zmieni linijkę z import na linijkę z require.

Utwórz nowy plik o nazwie „`calc.ts„ i wprowadź taki kod.

export default class Calc {
    public static add(lhs: number, rhs: number): number {
        return lhs + rhs;
    }

    public static mul(lhs: number, rhs: number): number {
        return lhs * rhs;
    }
}

export oznacza, że następująca po nim przedmiot będzie dostępna poprzez import w innym pliku. Taką przedmiotem może być zmienna, funkcja, klasa itp.

default oznacza, że następująca po nim przedmiot będzie dostępny w sposób domyślny. import pozwala na definiowanie jakie przedmioty chcemy wyciągnąć z pliku jeżeli default nie jest definiowany. Zazwyczaj default jest zdefiniowany na najważniejszym przedmiocie w pliku.

Sam kod przedstawia klasę z dwoma funkcjami statycznymi (czyli nie musimy tworzyć obiektu danej klasy).

Przejdź z powrotem to do głównego pliku app.ts.

na górze wpisz

import calc from './calc';

Zapis ./calc oznacza że plik calc znajduje się w obecnym katalogu, gdybyśmy pomnieli ./ to TypeScript szukałby tego pliku w katalogu node_modules.

gdy zaczniemy pisać kod calc.add powiniśmy zauważyć że Visual Studio Code podpowiada nam kod.

simpleCalcAdd

Możesz uzbroić podpowiadacza o dodatkowe informacje korzystając z JSDoc, aby to zrobić na funkcję add dodaj

/**
* Adds two number together
* 
* @static
* @param {number} lhs first number 
* @param {number} rhs second number
* @returns {number} result of addition
* 
* @memberOf Calc
*/

Dzięki czemu Visual Studio Code będzie podpowiadał tak:

addWithJsDoc

Wiele plików a przeglądarka

Przeglądaki nie potrafią ładować plików przy użyciu require. Dlatego programiści JavaScript (i TypeScript) wyręczają przeglądarki tworząc jeden plik .js który posiada wklejony kod z wszystkich plików, które są wymagane.

Zazwyczaj robi się to przy użyciu automatów takich jak browserify lub webpack.

Opiszę wykorzystanie webpack jako staje się coraz bardziej popularny i jest prawdziwym kombajnem. Potrafi znacznie więcej niż tylko łączenie plików JavaScript/TypeScript w jeden.

Instalacja webpack wygląda tak: npm install -g webpack

No i potrzebujemy nauczyć webpack jak obsługiwać TypeScript: npm install ts-loader --save to polecenie wykonujemy w katalogu, w którym mamy nasz kod TypeScript.

webpack konfiguruje się tworząc plik webpack.config.js, na nasze potrzeby będziemy potrzebować coś takiego:

module.exports = {  
  entry: './app.ts',
  output: {
    filename: 'bundle.js'
  },
  resolve: {
    extensions: ['', '.webpack.js', '.web.js', '.ts', '.js']
  },
  module: {
    loaders: [
      { test: /\.ts$/, loader: 'ts-loader' }
    ]
  }
}

Definiujemy jaki plik jest plikiem początkowym ./app.ts definiujemy też jak ma nazywać się plik wyjściowy bundle.js.

Jeżeli teraz w konsoli uruchomimy polecenie webpack to powinniśmy dostać błąd, że TypeScript nie został znaleziony. Przestajemy korzystać z kompilatora dołączonego do Visual Studio Code, będziemy korzystać z wersji dostępnej z npm.

Aby przejść na wersję z npm trzeba zainstalować TypeScript: npm install typescript --save. Visual Studio Code może się oburzyć, że wersję jego TypeScripta (VS Code jest napisany w TypeScript) i dostępnego w środowisku są różne. Aby uciszyć krzyk edytora trzeba zmodyfikować plik .vscode/settings.json i dodać:

"typescript.tsdk": "./node_modules/typescript/lib"

I ostatnia rzecz do zrobienia w Visual Studio Code to skonfigurowanie go aby skrót Ctrl+Shift+B uruchamiał webpack

Aby tak ustawić Visual Studio Code trzeba zmienić zawartość pliku .vscode/tasks.json na:

{
    "version": "0.1.0",
    "command": "webpack",
    "isShellCommand": true
}

Ostateczny test

Aby przetestować działanie kompilacji + łączenie plików w pliku app.ts kod zamień na:

import calc from './calc';

console.log(calc.add(42, 8));

Skompiluj przy wciskając Ctrl+Shift+B w Visual Studio Code.

W pliku index.html odnieść się do pliku bundle.js czyli:

Jeżeli otworzysz plik index.html w przeglądarce i przejdziesz do konsoli deweloperskiej (F12) to powinieneś zobaczyć wynik dodawania 50.

Kod Źródłowy

Źródła