TypeScript with Nodejs and Express 初期設定


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/654025/da8a26d3-7713-d4a2-f555-cabe61ad30e5.png)

# 開発環境
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/654025/53e7ecd1-74ee-fec6-8b8b-729bf1e4f6af.png)

https://nodejs.org/ja


# ディレクトリ作成
```terminal:terminal
    mkdir typescript-with-nodejs-andexpress
    cd typescript-with-nodejs-andexpress
```

# NPM 初期設定
```terminal:terminal
    npm init -y
    
    {
      "name": "typescript-with-nodejs-andexpress",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
      },
      "keywords": [],
      "author": "",
      "license": "ISC"
    }

```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/654025/1db67e65-2020-0943-25b6-6d29b2122f42.png)

# 必要なモジュールのインストール
```terminal:terminal
    npm i -D typescript @types/express @types/node
    npm i -D nodemon concurrently
    npm i express rimraf dotenv
```

```json:package.json
    {
        "devDependencies": {
            "@types/express": "^4.17.17",
            "@types/node": "^18.15.9",
            "concurrently": "^7.6.0",
            "dotenv": "^16.0.3",
            "nodemon": "^2.0.22",
            "typescript": "^5.0.2"
        },
            "dependencies": {
            "express": "^4.18.2",
            "rimraf": "^4.4.1"
        }
    }
```

# TypeScript 初期設定
```terminal:terminal
    npx tsc --init
```
この、コマンドを入力するとtsconfig.jsonが作成されます。下記の様に設定すると、自動でtsファイルの読み込みとコンパイル先のディレクトリとjsファイルが自動生成されます。
index.tsはsrcディレクトリ内に作成します。
```json:tsconfig.json
    {
      "compilerOptions": {
        "target": "es2016", 
        "module": "commonjs",
        "rootDir": "./src",
        "outDir": "./dist",
        "esModuleInterop": true,
        "forceConsistentCasingInFileNames": true,
        "strict": true,
        "skipLibCheck": true,
      },
      "include": ["./src/**/*"]
    }
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/654025/9b6f65e2-15d8-20e3-51f5-d891be370f64.png)

# package.jsonの"scripts"の追記
```json:package.json
    {
        "scripts": {
            "build": "rimraf dist && npx tsc",
            "predev": "npm run build",
            "dev": "concurrently -p \"[{name}]\" -n \"TipeScript,JavaScript\" -c \"bgBlue.bold,bgMagenta.bold\" \"npx tsc -w\" \"nodemon -q ./dist/index.js\""
  },
    }
```

# index.ts
```javascript:index.ts
    import express, { Express, Request, Response } from "express";
    import dotenv from "dotenv";

    dotenv.config();

    const app: Express = express();
    const port = process.env.PORT; //.envファイルにPORT:3000を記述

    app.get("/", (req: Request, res: Response) => {
      res.send("Express + TypeScript Server");
    });

    app.listen(port, () => {
      console.log(`⚡️[server]: Server is running at http://localhost:${port}`);
    });

```

# コンソール
表示もカラーリングされていて見やすいですね！このカラーリングは、npm i concurrentlyを利用しています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/654025/963e17fe-33b5-2908-6574-3fedbc6fa78b.png)

https://www.npmjs.com/package/concurrently


![demo.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/654025/712e5975-2236-dcc4-f481-5746524e0f77.gif)

# ソースコード
https://github.com/iwasaki-hub/typescript-with-nodejs-and-express

# 参考資料
https://blog.logrocket.com/how-to-set-up-node-typescript-express/