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

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

序章

Nodeはrun-time環境であり、サーバー側のJavaScriptの記述を可能にします。 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

The -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.

利用可能なキー値オプションの詳細については、公式の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

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

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 ディレクトリ。

JavaScript出力を次のコマンドで実行します node:

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を使用したTypescriptLintingの構成

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

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: {},
}

リンターを実行して、すべてのファイルをチェックします。 .ts TypeScript拡張：

npx eslint . --ext .ts

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

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

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

このステップでは、 start TypeScriptコードをトランスパイルし、結果を実行するスクリプト .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 スクリプトセクションへのコマンド。

見ると start コマンド、あなたはそれを最初に見るでしょう tsc コマンドを実行してから、 node 指図。これにより、生成された出力がコンパイルされて実行されます。 node.

The lint コマンドは前のステップで実行したものと同じですが、 npx このコンテキストでは不要なプレフィックス。

結論

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

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

getdocs

13036

序章

前提条件

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

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

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

ステップ4—eslintを使用したTypescriptLintingの構成

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

結論

getdocs

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