Table of Contents
URL: https://www.progressiverobot.com/setting-up-a-node-project-with-typescript-ja/
はじめに
Nodeは、サーバーサイドJavaScriptの記述を可能にするランタイム環境です。2011年のリリース以来、広く採用されています。サーバーサイドJavaScriptの記述は、JavaScript言語の性質上、動的で弱い型付けなので、コードベースが肥大化していき、困難な作業です。
他の言語をからJavaScriptを始める開発者は時に、静的で強い型付けに欠けている面に不満を感じますが、TypeScriptはそのギャップを埋めてくれます。
TypeScriptは、大規模なJavaScriptプロジェクトの構築・管理に役立つ型付け（オプション）スーパーセットです。静的で強い型付け、コンパイル、オブジェクト指向プログラミングなどの追加機能を持つJavaScriptとして考えられます。
注: TypeScriptは、技術的にはJavaScriptのスーパーセットです。つまりJavaScriptコードはすべて、有効なTypeScriptコードであるといえます。
以下にTypeScriptを使用するメリットを挙げます。
- オプションの静的型付け。
- 型推論。
- インターフェースが利用可能。
このチュートリアルでは、NodeプロジェクトとTypeScriptをセットアップします。TypeScriptを使用してExpressアプリケーションを構築し、それを整然とした信頼性の高いJavaScriptコードにトランスパイルします。
ステップ1 — npmプロジェクトの初期化
まず、<^>node_project<^>という新しいフォルダを作成し、そのディレクトリに移動します。
mkdir <^>node_project<^>
cd <^>node_project<^>
次に、npmプロジェクトとしてそのフォルダを初期化します。
npm init
npm initを実行した後、プロジェクトに関する情報をnpmに提供します。npmに妥当なデフォルトを推論させたければ、yフラグを付けて追加情報のプロンプトをスキップできます。
npm init -y
プロジェクトスペースがセットアップされ、必要な依存関係をインストールする準備が整いました。
ステップ2 — 依存関係をインストールする
最小限のnpmプロジェクトが初期化されると、次のステップは、TypeScriptの実行に必要な依存関係のインストールです。
プロジェクトディレクトリから次のコマンドを実行して、依存関係をインストールします。
npm install -D typescript@3.3.3
npm install -D tslint@5.12.1
-Dフラグは、 --save-devのショートカットです。このフラグの詳細についてはnpmjsドキュメントを参照してください。
それではExpressフレームワークをインストールしましょう。
npm install -S express@4.16.4
npm install -D @types/express@4.16.1
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ファイルを作成し、次のスニペットを貼り付けます。
[label 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ルールを追加します。
[label 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ファイルを開き、適宜更新します。
[label 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ファイルを任意のテキストエディタで開き、次のコードスニペットを貼り付けます。
[label 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
実行が成功すると、メッセージがターミナルに表示されます。
[secondary_label Output]
server is listening on 3000
これで、ブラウザでhttp://localhost:3000にアクセスできます。次のメッセージが表示されます。
[secondary_label Output]
The sedulous hyena ate the antelope!
dist/app.jsファイルを開くと、TypeScriptコードのトランスパイル版が表示されます。
[label 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を使用しました。
