Typescriptでノードプロジェクトをセットアップする方法

はじめに

Nodeは、サーバーサイドJavaScriptの記述を可能にするランタイム環境です。2011年のリリース以来、広く採用されています。サーバーサイドJavaScriptの記述は、JavaScript言語の性質上、動的で弱い型付けなので、コードベースが肥大化していき、困難な作業です。

他の言語をからJavaScriptを始める開発者は時に、静的で強い型付けに欠けている面に不満を感じますが、TypeScriptはそのギャップを埋めてくれます。

TypeScriptは、大規模なJavaScriptプロジェクトの構築・管理に役立つ型付け(オプション)スーパーセットです。静的で強い型付け、コンパイル、オブジェクト指向プログラミングなどの追加機能を持つJavaScriptとして考えられます。

注: TypeScriptは、技術的にはJavaScriptのスーパーセットです。つまりJavaScriptコードはすべて、有効なTypeScriptコードであるといえます。

以下にTypeScriptを使用するメリットを挙げます。

  1. オプションの静的型付け。
  2. 型推論。
  3. インターフェースが利用可能。

このチュートリアルでは、NodeプロジェクトとTypeScriptをセットアップします。TypeScriptを使用してExpressアプリケーションを構築し、それを整然とした信頼性の高いJavaScriptコードにトランスパイルします。

前提条件

このガイドを始める前に、Node.jsをマシンにインストールします。ガイドNode.jsをインストールしてローカル開発環境を整えるを参照して、これを実施してください。

ステップ1 — npmプロジェクトの初期化

まず、node_projectという新しいフォルダを作成し、そのディレクトリに移動します。

  • mkdir node_project
  • cd node_project

次に、npmプロジェクトとしてそのフォルダを初期化します。

  • npm init

npm initを実行した後、プロジェクトに関する情報をnpmに提供します。npmに妥当なデフォルトを推論させたければ、yフラグを付けて追加情報のプロンプトをスキップできます。

  • npm init -y

プロジェクトスペースがセットアップされ、必要な依存関係をインストールする準備が整いました。

ステップ2 — 依存関係をインストールする

最小限のnpmプロジェクトが初期化されると、次のステップは、TypeScriptの実行に必要な依存関係のインストールです。

プロジェクトディレクトリから次のコマンドを実行して、依存関係をインストールします。

-Dフラグは、 --save-devのショートカットです。このフラグの詳細についてはnpmjsドキュメントを参照してください。

それではExpressフレームワークをインストールしましょう。

2つ目のコマンドは、TypeScriptをサポートするExpressのタイプをインストールします。TypeScriptのタイプはファイルで、通常は.d.tsという拡張子が付きます。これらのファイルはAPIに関するタイプ情報(この場合はExpressフレームワーク)の提供に使用します。

TypeScriptと Expressは独立したパッケージなので、このパッケージが必要です。@type/expressパッケージがなければ、TypeScriptがExpressクラスのタイプを知る方法はありません。

ステップ3 — TypeScriptの設定

このセクションでは、TypeScriptをセットアップしてTypeScriptのLintチェックを設定します。TypeScriptは、tsconfig.jsonというファイルを使用して、プロジェクトのコンパイラオプションを設定します。プロジェクトのrootディレクトリにtsconfig.jsonファイルを作成し、次のスニペットを貼り付けます。

tsconfig.json

{   "compilerOptions": {     "module": "commonjs",     "esModuleInterop": true,     "target": "es6",     "moduleResolution": "node",     "sourceMap": true,     "outDir": "dist"   },   "lib": ["es2015"] } 

上記JSONスニペットの重要部分を見ていきしょう。

  • module: モジュールコード生成方法を指定します。Nodeはcommonjsを使用します。
  • target:出力言語レベルを指定します。
  • moduleResolution: インポートが参照するものをコンパイラに理解させます。値nodeは、Node module resolution機構を模倣します。  
  • outDir: トランスパイル後の.jsファイルの出力先です。このチュートリアルでは、distとして保存します。

tsconfig.jsonファイルを手動で作成、記入する代わりに次のコマンドを実行することもできます。

  • tsc --init

このコマンドは、コメント付きのtsconfig.jsonファイルを生成します。

利用可能なキー値オプションの詳細について詳しく知るには、公式TypeScriptドキュメントを参照してください。

これで、プロジェクトのTypeScript Lintチェックを設定できます。プロジェクトのrootディレクトリで稼働しているターミナル、つまりこのチュートリアルがnode_projectとして確立したターミナルで、次のコマンドを実行してtslint.jsonファイルを生成します。

  • ./node_modules/.bin/tslint --init

新たに生成されたtslint.jsonファイルを開いて、no-consoleルールを追加します。

tslint.json

{   "defaultSeverity": "error",   "extends": ["tslint:recommended"],   "jsRules": {},   "rules": {     "no-console": false   },   "rulesDirectory": [] } 

TypeScript Lintツールはデフォルトでコンソールステートメントを使用したデバッグを妨げるため、Lintツールにデフォルトのno-consoleルールを無効にするよう明示的に指示する必要があります。

ステップ4 — package.jsonファイルの更新

この時点で、ターミナルで関数を個別に実行するか、npmスクリプトを作成して実行することができます。

このステップでは、TypeScriptコードをコンパイルしてトランスパイルするstartスクリプトを作成し、結果の.jsアプリケーションを実行します。

package.jsonファイルを開き、適宜更新します。

package.json

{   "name": "node-with-ts",   "version": "1.0.0",   "description": "",   "main": "dist/app.js",   "scripts": {     "start": "tsc && node dist/app.js",     "test": "echo "Error: no test specified" && exit 1"   },   "author": "",   "license": "ISC",   "devDependencies": {     "@types/express": "^4.16.1",     "tslint": "^5.12.1",     "typescript": "^3.3.3"   },   "dependencies": {     "express": "^4.16.4"   } } 

上記のスニペットでは、mainパスを更新し、startコマンドをscriptsセクションに追加しています。startコマンドを見ると、最初にtscコマンドが、続いてnodeコマンドが実行されるのがわかります。このコマンドは、nodeで生成された出力をコンパイルし、実行します。

tscコマンドは、tsconfig.jsonファイルの設定通り、アプリケーションをコンパイルし、生成された.js出力を指定したoutDirディレクトリに配置するよう、TypeScriptに指示します。

ステップ5 — Basic Expressサーバーの作成と実行

TypeScriptとそのlintツールが設定されたので、次はNode Expressサーバーを構築しましょう。

まず、プロジェクトのrootディレクトリにsrcフォルダを作成します。

  • mkdir src

次に、そのフォルダ内にapp.tsという名前のファイルを作成します。

  • touch src/app.ts

この時点で、フォルダ構造は次のように見えるはずです。

├── node_modules/ ├── src/   ├── app.ts ├── package-lock.json ├── package.json ├── tsconfig.json ├── tslint.json 

app.tsファイルを任意のテキストエディタで開き、次のコードスニペットを貼り付けます。

src/app.ts

import express from 'express';  const app = express(); const port = 3000; app.get('/', (req, res) => {   res.send('The sedulous hyena ate the antelope!'); }); app.listen(port, err => {   if (err) {     return console.error(err);   }   return console.log(`server is listening on ${port}`); }); 

上記のコードは、ポート3000でリクエストをlistenするノードサーバーを作成します。次のコマンドを使用してアプリケーションを実行します。

  • npm start

実行が成功すると、メッセージがターミナルに表示されます。

Output
  • server is listening on 3000

これで、ブラウザでhttp://localhost:3000にアクセスできます。次のメッセージが表示されます。

Output
  • The sedulous hyena ate the antelope!

メッセージ「The sedulous hyena ate the antelope!」を表示するブラウザウィンドウ

dist/app.jsファイルを開くと、TypeScriptコードのトランスパイル版が表示されます。

dist/app.js

"use strict";  var __importDefault = (this && this.__importDefault) || function (mod) {     return (mod && mod.__esModule) ? mod : { "default": mod }; }; Object.defineProperty(exports, "__esModule", { value: true }); const express_1 = __importDefault(require("express")); const app = express_1.default(); const port = 3000; app.get('/', (req, res) => {     res.send('The sedulous hyena ate the antelope!'); }); app.listen(port, err => {     if (err) {         return console.error(err);     }     return console.log(`server is listening on ${port}`); });  //# sourceMappingURL=app.js.map 

この時点で、ノードプロジェクトがTypeScriptを使用するように、正常にセットアップされました。

まとめ

このチュートリアルでは、TypeScriptが信頼性の高いJavaScriptのコードを作成するのに役立つ理由について学びました。さらに、TypeScriptで作業するメリットについても学びました。

最後に、NodeプロジェクトのセットアップにはExpressフレームワークを使用しましたが、プロジェクトのコンパイル・実行にはTypeScriptを使用しました。