Typescriptでノードプロジェクトを設定する方法
序章
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
-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
次に、その中に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 にアクセスすると、次のメッセージが表示されます。
OutputHello 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リンティングを構成できます。 まず、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を実行して、.ts
TypeScript拡張子を持つすべてのファイルをチェックします。
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を使用してプロジェクトをコンパイルして実行しました。