ぼくの TypeScript

毎回調べるのが面倒なので備忘録。src 内のソースを呼んで dist に吐き出す nodejs 向けの設定例。

インストール

npm install typescript --save-dev

参考: https://www.typescriptlang.org/

tsconfig の作成

tsconfig.json とは tsc を入力ファイル無しで実行すると参照する設定ファイル。環境ごとのおすすめ設定を https://github.com/tsconfig/bases/ の中から選んで extends に指定するとおすすめを元に細かく設定できる。

npm install --save-dev @tsconfig/node16-strictest

tsconfig.json の内容例:

{
  "extends": "@tsconfig/node16/tsconfig.json",
  "compilerOptions": {
    "incremental": true,
    "noEmitOnError": true,
    "outDir": "dist"
  },
  "include": ["src/**/*"]
}

• extends: おすすめ設定ファイルの名前。
• files: コンパイルするファイルを一つ一つ指定する。
• include: コンパイルするファイルやディレクトリをまとめて指定する。拡張子が指定しなければ ts, tsx, d.ts などを選んだ事にする。
• exclude: include の中で除外するファイルやディレクトリ。
• compilerOptions.outDir: .js ファイル出力先。無ければ .ts ファイルと同じ場所に出力する。
• compilerOptions.incremental: ビルドが速くなるらしい。
• compilerOptions.noEmitOnError: true だとエラー時 .js を出力しない。デフォルトは false

参考:

• https://www.typescriptlang.org/docs/handbook/tsconfig-json.html
• https://www.typescriptlang.org/tsconfig

構文検査ツール ESLint の設定

npm install eslint --save-dev
npm init @eslint/config

質問に答えると設定完了 (airbnb guide を選んでいます)

✔ How would you like to use ESLint? · style
✔ What type of modules does your project use? · esm
✔ Which framework does your project use? · none
✔ Does your project use TypeScript? · Yes
✔ Where does your code run? · browser
✔ How would you like to define a style for your project? · guide
✔ Which style guide do you want to follow? · airbnb
✔ What format do you want your config file to be in? · YAML

参考:

• https://eslint.org/docs/latest/user-guide/getting-started

TypeScript ESLint の設定

上記質問に Does your project use TypeScript? · Yes と答えたので typescript-eslint はインストールされている。.eslintrc.yml の extends に追加。これをやらないと TypeScript と ESLint が喧嘩する。

  - plugin:@typescript-eslint/recommended
  - plugin:@typescript-eslint/recommended-requiring-type-checking

参考:
https://typescript-eslint.io/docs/

コード整形ツール Prettier の設定

npm install --save-dev --save-exact prettier eslint-config-prettier
echo {}> .prettierrc.json

.prettierignore ファイルを作成して整形したくないディレクトリを書く。

.serverless/
node_modules/
dist/

.eslintrc.yml に extends: [ prettier ] を追加すると、ESLint と prettier が喧嘩しなくなる。最終的にぼくの .eslintrc.yml はこんな風になった。

env:
  browser: true
  es2021: true
extends:
  - airbnb-base
  - plugin:@typescript-eslint/recommended
  - plugin:@typescript-eslint/recommended-requiring-type-checking
  - prettier
parser: "@typescript-eslint/parser"
parserOptions:
  ecmaVersion: latest
  sourceType: module
plugins:
  - "@typescript-eslint"
rules:
  no-console: off

todo: monorepo で husky を使う方法

参考

• https://prettier.io/docs/en/install.html

package.json に登録する

あとは実行しやすいように package.json の script に書く。

  "scripts": {
    "watch": "tsc --watch",
    "lint": "eslint . --fix",
    "prettier": "prettier --write ."
  },