TypeScriptを使ときの自己流な準備(備忘録)

たまに、TypeScriptでブラウザアプリを作成するときに、HelloWorldするまでの準備に手間取る（というか手順を忘れる）ので備忘録のために書いとく。私は、IntellJ派ですが、TypeScriptの時だけはVSCodeを使うので今回もそれに習った手順でHelloWordがブラウザに出力されるまで。あくまでも我流です。

1 シェルプロジェクトフォルダ等、初期設定
2 VSCodeで残りの設定
3 package.jsonを編集
4 tsconfig.json を編集
5 webpack.config.js を作成
6 初期ソースの配置
7 実行 (ブラウザで動作確認)
8 ビルド

シェルプロジェクトフォルダ等、初期設定

mkdir ts-sample  #プロジェクトフォルダの作成
cd ts-sample
mkdir src
mkdir dist
npm init  #ひたすらリターン. 最後にyes
npm install --save-dev webpack webpack-cli ts-loader html-webpack-plugin webpack-dev-server
tsc --init  # npm install typescript されている前提

VSCodeで残りの設定

上のシェルでの作業が終わったら $ code . にてVSCodeを作成 (codeで起動できない場合は単にVSCodeを立ち上げてプロジェクトフォルダを開けばOK

package.jsonを編集

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",   # <---追加
    "build:serve": "webpack serve"  # <---追加
  },

tsconfig.json を編集

{
  "compilerOptions": {
    ...
    "sourceMap": true,
    ...
    "outDir": "./dist",
    ...
  },
  "include": ["./src/**/*.ts"]
}

compilerOptions の中の sourceMap, outDir をコメントアウトして編集, include を追加.

webpack.config.js を作成

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  mode: 'development',
  entry: './src/Main.ts',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  devtool: 'source-map',

  module: {
    rules: [
      {
        test: /\.ts$/,
        use: "ts-loader",
        include: path.resolve(__dirname, 'src'),
        exclude: /node_modules/
      }
    ]
  },
  resolve: {
    modules: [
    "node_modules",
    ],
    extensions: [
    '.ts',
    '.js'
    ]
  },

  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ],

  devServer: {
    contentBase: path.resolve(__dirname, 'dist'),
    index: "index.html",
    port: 9223,
    historyApiFallback: true,
    }
};

プロジェクト直下に webpack.confg.js を作成してこのままコピペ

初期ソースの配置

src/index.htmlを配置します。サンプルなのでシンプルなものでOK. コンパイルして出力されるbundls.jsは HtmlWebpackPlugin の方で自動でheaderタグの末尾に defer付きで読み込むコードを自動挿入してくれるので書く必要はありません。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>TypeScript Sample</title>
</head>
<body>
    <div id="hello"></div>
</body>
</html>

src/Main.tsを配置します。せっかくなのでモジュールもサンプルとして用意します

import Hello from "./Hello"

window.onload = (e: any) => {
    console.log("Hello TypeScript World")
    
    const hello = new Hello("hiyuzawa")
    document.getElementById("hello")!.innerHTML = hello.get_hello()
}

export default class Hello {
    name: string
    constructor(name: string) {
        this.name = name
    }

    get_hello(): string {
        return "hello " + this.name + " from Hello Module"
    }
}