[TypeScript] Expressをやってみる（10分で？）

はじめに

typescriptでAPIを作ってみたいなぁと思い、expressを始めてみました。そこで、めっちゃ初期のところは簡単だったので、書いてみる

Step1: フォルダの作成

最初に、プロジェクト用の新しいフォルダを作成します。任意の名前をつけてください。
今回はexpress-ts-app を使用します。

bash

mkdir express-ts-app
cd express-ts-app

Step2: npmプロジェクトの初期化

プロジェクトフォルダ内で、以下のコマンドを実行してnpmプロジェクトを初期化します。
これにより、package.jsonファイルが作成されます。

bash

npm init -y

ちなみにこのときの -yは、yesの略です。すべての質問に自動的に「はい」と回答します。npm initだけを実行した場合には、プロジェクト名、バージョン、説明、エントリポイント、テストコマンド、gitリポジトリ、キーワード、ライセンスなどについて、入力や回答を求められますが、-yオプションによって、デフォルトのpackage.jsonファイルを生成します。

3. TypeScriptとExpressのインストール

ExpressとTypeScript、およびTypeScriptの型定義ファイルをインストールします。

bash

npm install express
npm install --save-dev typescript @types/express @types/node

4. TypeScriptの設定ファイルの作成

プロジェクトフォルダの中にtsconfig.jsonを作成します。以下のような形で十分だと思います。

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "rootDir": "./src",
    "outDir": "./dist",
    "esModuleInterop": true,
    "strict": true,
    "skipLibCheck": true
  },
  "include": ["src/**/*"]
}

5. ソースファイルのディレクトリ構造

src ディレクトリを作成し、TypeScriptで書かれたソースファイルをこのディレクトリに配置します。

mkdir src

例として、srcディレクトリ内にindex.tsという名前のファイルを作成し、以下の内容を記述します。

import express from 'express';

const app = express();
const port = 3000;

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

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

6. ビルドスクリプトの設定

package.jsonファイルにビルドスクリプトを追加して、TypeScriptコードをJavaScriptにコンパイルできるようにします。

"scripts": {
  "build": "tsc",
  "start": "node dist/index.js"
}

7. アプリケーションのビルドと実行

以下のコマンドでアプリケーションをビルドします。

npm run build

ビルドが完了したら、アプリケーションを以下のコマンドで起動します。

npm start

これで、ブラウザからhttp://localhost:3000にアクセスすると、"Hello World!"が表示されます。

以上で、TypeScriptを使用したExpress.jsプロジェクトの基本的なセットアップが完了しました。これを基に、さらに機能を追加していくことができます。

いえーい！！

続きもまた別の記事で書きます！！