NodeJS: Podpięcie TypeScript

W tym wpisie zakładam, że masz już stworzony plik: package.json. Jeśli nie to wywołaj komendę:

npm init

Żeby dodać obsługę TypeScript, po stronie NodeJS wystarczy:

Zainstaluj TypeScript

Zainstaluj lokalnie TypeScript za pomocą:

npm i typescript

Wygeneruj plik tsconfig.json

Jak sama nazwa wskazuje plik tsconfig.json służy do przechowywania konfiguracji TypeScripta. O samej konfiguracji będzie za chwilę, ale najpierw stwórzmy sam plik.

Do stworzenia tego pliku użyjemy npx. Jeśli masz zainstalowany npm minimum w wersji 5.2.0 powinieneś mieć do tego dostęp.

Wywołujemy:

npx tsc --init

Otwórz plik tsconfig.json. Będzie tam wiele zakomentowanych linijek. Znajdź taką:

// "outDir": "./",

I zmień ją na:

"outDir": "dist",

Możesz wykasować wszystkie zakomentowane linijki. Powinieneś mięć coś takiego:

{
  "compilerOptions": {
    "target": "es5", 
    "module": "commonjs",  
    "outDir": "dist",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true
  }
}

Instalacja zależności

Żeby sprawdzić, czy to rzeczywiście działa zainstalujmy bibliotekę Express:

npm i express

Jeśli chcemy używać TypeScript, po stronie NodeJS będziemy potrzebować także definicji typów. Dla większości bibliotek te definicje są instalowane domyślnie z biblioteką, ale niektóre nie. Dlatego warto zainstalować brakujące.

Zainstalujmy te:

npm i @types/express @types/node

Uruchomienie

Zostało nam sprawdzenie, czy wszystko działa.

Zanim uruchomimy skrypt, edytujmy plik package.json i dodajmy do sekcji scripts taką zawartość:

"scripts": {
	"build": "tsc",
	"preserve": "npm run build",
	"serve": "node dist/index.js",
},

Skrypt build kiedy zostanie wywołany przekompiluje nam kod z postaci w wersji .ts na .js i umieści, w folderze dist.

Skrypt preserve jest zawsze wywoływany przed wywołaniem skryptu serve. Czyli skompiluje nam kod, ponieważ skryptu build sami jawnie nie wywołujemy.

Skrypt serve uruchomi nam już skompilowany kod.

Zaraz uruchomimy kod, ale najpierw musimy mieć, co uruchomić.

Stwórz plik o nazwie: index.ts i wrzuć taką zawartość:

import express from 'express';
const app = express();

app.listen(3000, () => console.log('Powered by NodeJS and TypeScript!'));

Mamy już wszystko!

Uruchom komendę:

npm run serve

Zauważ, że zostanie uruchomiona sekwencja skryptów, które definiowaliśmy wcześniej. Najpierw zostanie uruchomiony: preserve potem: build a na koniec: serve.