【初心者向け】Node.js + TypeScript + npmでWebサーバーを作る方法

Node.js、TypeScript、npm における NPM モジュールの利用方法

前提知識

このチュートリアルを始める前に、以下の点について理解している必要があります。

• Node.js の基本的な知識
• TypeScript の基本的な知識
• npm の基本的な知識

手順

1. プロジェクトの初期化

   まず、新しい Node.js プロジェクトを初期化します。

   npm init -y
   

   これにより、package.json ファイルが作成されます。

2. 次に、TypeScript をプロジェクトに設定します。

   npm install typescript --save-dev
   npx tsc --init
   

3. NPM モジュールのインストール

   npm install <module_name>
   

   例:

   npm install express
   

4. TypeScript モジュールを作成します。

   // index.ts
   import * as express from 'express';
   
   const app = express();
   
   app.get('/', (req, res) => {
       res.send('Hello from TypeScript!');
   });
   
   app.listen(3000, () => {
       console.log('Server listening on port 3000');
   });
   

5. npx tsc
   

6. アプリケーションの実行

   コンパイルされた JavaScript ファイルを実行します。

   node dist/index.js
   

   これにより、Hello from TypeScript! というメッセージが表示されます。

詳細

• NPM モジュールを TypeScript モジュールにインポートするには、import キーワードを使用します。

  import * as express from 'express';
  

• 型宣言の利用

  NPM モジュールが型宣言を提供している場合は、それらの型宣言を利用することができます。

  import { Request, Response } from 'express';
  
  app.get('/', (req: Request, res: Response) => {
      // ...
  });
  

このチュートリアルでは、Node.js、TypeScript、npm を使って、NPM モジュールを TypeScript プロジェクトでどのように利用するかを説明しました。

この知識を使って、独自の TypeScript モジュールを作成したり、既存の NPM モジュールを利用して複雑なアプリケーションを開発したりすることができます。

サンプルコード：NPM モジュール express を使用して Web サーバーを作成

ファイル構成

project/
├── package.json
├── src/
│   ├── index.ts
│   └── router.ts
└── tsconfig.json

package.json

{
  "name": "typescript-npm-example",
  "version": "1.0.0",
  "description": "Example of using NPM modules with TypeScript",
  "main": "dist/index.js",
  "scripts": {
    "start": "node dist/index.js"
  },
  "devDependencies": {
    "express": "^4.17.1",
    "typescript": "^4.3.2"
  }
}

tsconfig.json

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "outDir": "./dist",
    "strict": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "skipLibCheck": true,
    "esModuleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "resolveJsonModule": true,
    "declaration": false
  },
  "include": ["./src/**/*.ts"]
}

src/router.ts

import { Router } from 'express';

const router = Router();

router.get('/', (req, res) => {
  res.send('Hello from TypeScript!');
});

export default router;

import express from 'express';
import router from './router';

const app = express();

app.use('/', router);

app.listen(3000, () => {
  console.log('Server listening on port 3000');
});

実行方法

2. npx tsc
   

3. node dist/index.js
   

4. Web ブラウザを開き、http://localhost:3000 にアクセスします。

説明

• package.json: このファイルは、プロジェクトの依存関係とスクリプトを定義します。
• tsconfig.json: このファイルは、TypeScript コンパイラの設定を定義します。
• src/router.ts: このファイルは、Web サーバーのルーティングロジックを定義します。
• src/index.ts: このファイルは、Express アプリケーションを作成し、ルーティングロジックを登録し、サーバーを起動します。

このサンプルコードは、NPM モジュールを TypeScript プロジェクトで利用する方法を理解するための出発点として役立ちます。

NPM モジュールを TypeScript で利用するその他の方法

TypeScript でグローバルなモジュール宣言を使用する

グローバルなモジュール宣言を使用すると、NPM モジュールの型宣言を TypeScript プロジェクトで使用できます。これにより、コードの補完機能と型チェックが向上します。

/// <reference types="express" />

import express from 'express';

const app = express();

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

app.listen(3000, () => {
  console.log('Server listening on port 3000');
});

NPM モジュールの型定義ファイル (.d.ts) を手動でインストールする

一部の NPM モジュールは、型定義ファイルを提供していない場合があります。このような場合は、型定義ファイルを手動でインストールする必要があります。

2. 型定義ファイルをプロジェクトにインストールします。

   npm install --save-dev <module_name>@types
   

   npm install --save-dev express@types
   

3. tsconfig.json ファイルで型定義ファイルを宣言します。

   {
     "compilerOptions": {
       // ...
       "typeRoots": [
         "./node_modules/@types"
       ]
     }
   }
   

NPM リンクを使用すると、ローカルの開発環境から NPM モジュールにアクセスできます。これにより、モジュールの変更をすぐに反映することができます。

1. NPM モジュールをプロジェクトにリンクします。

   npm link <module_name>
   

   npm link express
   

2. npx tsc
   

pnpm を使用する

pnpm は、NPM の代替となるパッケージマネージャーです。pnpm は、より高速で、より信頼性の高い、より安全なパッケージ管理を提供します。

pnpm を使用して NPM モジュールをインストールするには、以下のコマンドを使用します。

pnpm install <module_name>

NPM モジュールを TypeScript で利用するには、さまざまな方法があります。それぞれの方法には、長所と短所があります。プロジェクトのニーズに合った方法を選択することが重要です。

上記の方法に加えて、以下のリソースも参考にしてください。