TypeScript環境構築メモ

自分用のTypeScript環境構築メモです。

環境構築

インストール


yarn add -D typescript ts-loader webpack webpack-cli webpack-dev-server

プロジェクトを始める


yarn init -y

webpackの設定


const path = require('path');

module.exports = {
  entry: './src/index.ts',
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  resolve: {
    extensions: ['.ts', '.js']
  },
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    open: true,
  },
  module: {
    rules: [
      {
        loader: 'ts-loader',
        test: /\.ts$/,
        exclude: /node_modules/,
      }
    ]
  }
}

package.jsonのscriptsを追加


{
  ...
  "scripts": {
    "build": "webpack --mode=production",
    "start": "webpack-cli serve --mode development"
  },
  ...
}

tsconfig.jsonの設定


{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "outDir": "./dist",
    "strict": true,
    "baseUrl": "./src",
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  }
}

ESLint&Prettierの設定

インストール


yarn add -D prettier eslint-config-prettier eslint @typescript-eslint/parser
@typescript-eslint/eslint-plugin

package.jsonのscriptsに追加


{
  ...
  "scripts": {
    "build": "webpack --mode=production",
    "start": "webpack-cli serve --mode development",
    "lint": "eslint --fix './src/**/*.{js,ts}' && prettier --write './src/**/*.{js,ts}'",
  },
  ...
}

必要なフォルダ&ファイルを作成

srcフォルダ&.tsファイルを作成


src
└── index.ts

distフォルダ&.htmlファイルを作成


dist
└── index.html


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>  
  <div id="root"></div>
  <script src="./bundle.js"></script>
</body>
</html>

実行

srcフォルダ内のTypeScriptファイルにコードを記述し、yarn startでブラウザが自動で立ち上がる。

TypeScript