Typescriptでノードプロジェクトを設定する方法

投稿日: 2022-04-20 2022-04-20
タグ: DigitalOcean App Platform, Node.js

序章

Node は、サーバー側のJavaScriptの書き込みを可能にするrun-time環境です。 2011年の発売以来、広く採用されています。サーバーサイドJavaScriptの記述は、JavaScript言語の性質（動的および弱い型）のために、コードベースが大きくなるにつれて困難になる可能性があります。

他の言語からJavaScriptを利用する開発者は、強力な静的型付けがないことに不満を言うことがよくありますが、このギャップを埋めるためにTypeScriptが登場します。

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

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

TypeScriptを使用する利点は次のとおりです。

オプションの静的型付け。
型推論。
インターフェイスを使用する機能。

このチュートリアルでは、TypeScriptを使用してNodeプロジェクトを設定します。 TypeScriptを使用してExpressアプリケーションを構築し、JavaScriptコードにトランスパイルします。

前提条件

このガイドを開始する前に、システムにNode.jsをインストールする必要があります。これを実現するには、オペレーティングシステムのNode.jsのインストール方法とローカル開発環境の作成ガイドに従ってください。

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

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

mkdir node_project
cd node_project

次に、それをnpmプロジェクトとして初期化します。

npm init -y

-yフラグは、npm initにデフォルトに対して自動的に「はい」と言うように指示します。この情報は、後でpackage.jsonファイルでいつでも更新できます。

ステップ2—TypeScriptコンパイラの設定

npmプロジェクトが初期化されたので、TypeScriptをインストールしてセットアップする準備が整いました。

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

npm install --save-dev typescript

Outputadded 1 package, and audited 2 packages in 1s

found 0 vulnerabilities

TypeScriptは、tsconfig.jsonというファイルを使用して、プロジェクトのコンパイラオプションを構成します。プロジェクトディレクトリのルートにtsconfig.jsonファイルを作成します。

nano tsconfig.json

次に、次のJSONを貼り付けます。

tsconfig.json

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

上記のJSONスニペットのいくつかのキーを見てみましょう。

module：モジュールコードの生成方法を指定します。ノードはcommonjsを使用します。
target：出力言語レベルを指定します。
moduleResolution：これは、コンパイラがインポートが何を指しているのかを理解するのに役立ちます。値nodeは、ノードモジュールの解決メカニズムを模倣しています。
outDir：これは、トランスパイル後に.jsファイルを出力する場所です。このチュートリアルでは、distとして保存します。

利用可能なKeyValueオプションの詳細については、公式のTypeScriptドキュメントにすべてのオプションの説明が記載されています。

ステップ3—最小限のTypeScriptExpressサーバーを作成する

次に、 Express フレームワークをインストールして、最小限のサーバーを作成します。

npm install --save [email protected]
npm install -save-dev @types/[email protected]

2番目のコマンドは、TypeScriptをサポートするためにExpress typesをインストールします。 TypeScriptのタイプはファイルであり、通常は拡張子が.d.tsです。これらのファイルは、API（この場合はExpressフレームワーク）に関するタイプ情報を提供するために使用されます。

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

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

mkdir src

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

nano src/app.ts

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

src / app.ts

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

app.get('/', (req, res) => {
  res.send('Hello World!');
});

app.listen(port, () => {
  return console.log(`Express is listening at http://localhost:${port}`);
});

上記のコードは、ポート3000でリクエストをリッスンするノードサーバーを作成します。アプリを実行するには、最初に次のコマンドを使用してアプリをJavaScriptにコンパイルする必要があります。

npx tsc

これは、前の手順で作成した構成ファイルを使用して、コードのコンパイル方法と結果の配置場所を決定します。この場合、JavaScriptはdistディレクトリに出力されます。

nodeを使用してJavaScript出力を実行します。

node dist/app.js

正常に実行されると、メッセージが端末に記録されます。

OutputExpress is listening at http://localhost:3000

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

Output
Hello World!

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 = (0, express_1.default)();
const port = 3000;
app.get('/', (req, res) => {
    res.send('Hello World!');
});
app.listen(port, () => {
    return console.log(`Express is listening at http://localhost:${port}`);
});
//# sourceMappingURL=app.js.map

この時点で、TypeScriptを使用するようにNodeプロジェクトを正常に設定できました。次に、TypeScriptコードにエラーがないかチェックするためにeslintlinterを設定します。

ステップ4—eslintを使用したTypescriptリンティングの構成

これで、プロジェクトのTypeScriptリンティングを構成できます。まず、npmを使用してeslintをインストールします。

npm install --save-dev eslint

次に、eslintの初期化コマンドを実行して、プロジェクトをインタラクティブにセットアップします。

npx eslint --init

これにより、一連の質問が表示されます。このプロジェクトでは、次のように回答します。

ESLintをどのように使用しますか？： 構文をチェックして問題を見つけるには
プロジェクトで使用しているモジュールのタイプは何ですか？： JavaScriptモジュール（インポート/エクスポート）
プロジェクトで使用しているフレームワークはどれですか？： どれでもない
プロジェクトはTypeScriptを使用していますか？： はい
コードはどこで実行されますか？： ノード
設定ファイルをどのような形式にしますか？： JavaScript

最後に、いくつかの追加のeslintライブラリをインストールするように求められます。 Yesを選択します。プロセスが終了し、次の構成ファイルが残ります。

eslintrc.js

module.exports = {
  env: {
    es2021: true,
    node: true,
  },
  extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended'],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaVersion: 13,
    sourceType: 'module',
  },
  plugins: ['@typescript-eslint'],
  rules: {},
}

linterを実行して、.tsTypeScript拡張子を持つすべてのファイルをチェックします。

npx eslint . --ext .ts

これで、TypeScript構文をチェックするためのeslintlinterが設定されました。次に、npm構成を更新して、プロジェクトをリントして実行するための便利なスクリプトを追加します。

ステップ5—`package.json`ファイルを更新する

一般的に実行されるコマンドラインタスクをnpmスクリプトに配置すると便利な場合があります。 npmスクリプトは、package.jsonファイルで定義されており、コマンドnpm run your_script_nameで実行できます。

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

また、lintスクリプトを追加して、TypeScriptファイルでeslintlinterを実行します。

package.jsonファイルを開き、それに応じて更新します。

package.json

{
  "name": "node_project",
  "version": "1.0.0",
  "description": "",
  "main": "dist/app.js",
  "scripts": {
    "start": "tsc && node dist/app.js",
    "lint": "eslint . --ext .ts",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@types/express": "^4.17.1",
    "@typescript-eslint/eslint-plugin": "^5.4.0",
    "@typescript-eslint/parser": "^5.4.0",
    "eslint": "^8.3.0",
    "typescript": "^4.5.2"
  },
  "dependencies": {
    "express": "^4.17.1"
  }
}

上記のスニペットでは、mainパスをコンパイル済みアプリ出力に更新し、startおよびlintコマンドをscriptsセクションに追加しました。

startコマンドを見ると、最初にtscコマンドが実行され、次にnodeコマンドが実行されていることがわかります。これにより、生成された出力がコンパイルされ、nodeで実行されます。

lintコマンドは、前の手順で実行したものと同じですが、このコンテキストでは不要なnpxプレフィックスを使用している点が異なります。

結論

このチュートリアルでは、TypeScriptが信頼できるJavaScriptコードを書くのに役立つ理由を学びました。また、TypeScriptを使用することの利点についても学びました。

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

getdocs

8682

序章