TypeScript ボイラープレートメモ

TypeScript環境を手軽に構築すること目的としたリポジトリです。

name	description
ts-config-latest	最新の tsconfig.json 確認用
ts-node-eslint-prettier	`Node`, `TypeScript`
ts-browser-webpack-eslint-prettier	`Browser`, `Webpack`, `TypeScript`
ts-jsx-webpack-eslint-prettier	`React`, `Webpack`, `TypeScript`
ts-jsx-vite-eslint-prettier	`React`, `Vite`, `TypeScript`
ts-next-eslint-prettier	`Next`, `TypeScript`
ts-sass-static-vite-eslint-stylelint-prettier	`Browser`, `Vite`, `Sass`, `TypeScript`
ts-orm-sqlite3	`SQLite3`, `TypeScript`
ts-electron-react	`Electron`, `React`, `TypeScript`

Webpack 関連メモ

webpack.config の TypeScript 化

公式ドキュメント

必須パッケージインストール

$ yarn add --dev webpack ts-node

最新バージョンでは @types/webpack や @types/webpack-dev-server などの定義は不要

tsconfig.json の修正

{
  "compilerOptions": {
    "module": "ESNext",
  },
  "ts-node": {
    "compilerOptions": {
      "module": "CommonJS"
    }
  }
}

webpackDevServer を利用する場合

import type { Configuration } from 'webpack';
import type { Configuration as DevServerConfiguration } from 'webpack-dev-server';

export default {
  // ...
  // devServerConfig
  devServer: {
    // ...
  } satisfies DevServerConfiguration
} satisfies Configuration;