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

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

はじめに

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

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

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

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

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

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

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

前提条件

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

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

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

mkdir node_project
cd node_project

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

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

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

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

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

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

npm install -D [email protected]
npm install -D [email protected]

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

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

npm install -S [email protected]
npm install -D @types/[email protected]

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ファイルを手動で作成、記入する代わりに次のコマンドを実行することもできます。

このコマンドは、コメント付きの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フォルダを作成します。

次に、そのフォルダ内に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するノードサーバーを作成します。次のコマンドを使用してアプリケーションを実行します。

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

Output
server is listening on 3000

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

Output
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を使用しました。

Source link

Shared

Cloud VPS

Dedicated

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