viteで言及されているtsconfigのcompiler optionsについて

viteで言及されているtsconfigのcompiler optionsについて備忘録として情報を残します。

この記事では、Vite.jsに関わるtsconfigの設定について説明していきます。これらの設定は、プロジェクトのビルドプロセスや動作に大きく影響するため、適切に設定することが重要です。

isolatedModules

TypeScriptコンパイラ（tsc）は複数のファイルを考慮したトランスパイルを行うため、全体の型情報を元にトランスパイルを行います。しかし、BabelやSWCなどの他のトランスパイラはシングルファイルのトランスパイルを行うため、全体の型情報を元にトランスパイルすることができません。

isolatedModulesオプションを有効にすると、TypeScriptが正しく解釈できない場合に警告を出すようになります。これは、tsc以外のコンパイラでも正しくコンパイルできるようなコードを書くことを強制するためのオプションです。

例えば

export type User = {
    name: string;
    age: number;
};

という型を定義したファイルがあるが、これを

export { User } from './types';

とexportしていたとします。 この時 export しているファイルのみをみるとこれが実体を持つオブジェクトなのか型なのか判断がつきません。 このように一つのファイルを見ても判断が付くように、この場合は

export { type User } from './types';

と type をつけて対応します。

viteではesbuildを使用しており、esbuildでもファイルを独立してみるためこのオプションは必須になります。

{
  "compilerOptions": {
    "isolatedModules": true
  }
}

useDefineForClassFields

TypeScriptのターゲットをESNextまたはES2022とすると、このオプションは自動的にtrueになります。useDefineForClassFieldsオプションを有効にすることで、ES（ECMAScript）の仕様に沿ったクラスフィールドの初期化が行われます。

例えば下記の様なTypeScriptで書かれたclassがあったとします。

class Sample {
    value1 = ""
    value2?: string
}

このファイルを useDefineForClassFields を false でトランスパイルすると

"use strict";
class Sample {
    constructor() {
        this.value1 = "";
    }
}

となり、 useDefineForClassFields を true でトランスパイルすると

"use strict";
class Sample {
    value1 = "";
    value2;
}

となります。結果から分かるようにTypeScriptでは値を格納していない value2 のプロパティが useDefinedForClassFields の値によって、吐き出されない場合があります。 このオプションを有効化することで、例えば Object.keys(instance)の挙動などが以前と異なる場合があります。MobXなどの多くのライブラリはuseDefineForClassFieldsがtrueであることを前提としていますが、いくつかのライブラリはまだ対応していない場合があるため、注意が必要です。

{
  "compilerOptions": {
    "useDefineForClassFields": true
  }
}

target

Viteを使用する場合、tsconfigに記載したtargetオプションよりも、vite.config.jsに記載したtargetオプションが優先されます。es2022 以上でない場合、静的初期化ブロック（static initialization blocks）などのサポートされなくなります。

静的初期化ブロックの例

class ClassWithStaticInitializationBlock {
  static staticProperty1 = 'Property 1';
  static staticProperty2;
  static {
    this.staticProperty2 = 'Property 2';
  }
}

この場合、ターゲットはESNextやES2022以上のバージョンを指定することが推奨されます。

{
  "compilerOptions": {
    "target": "ESNext"
  }
}

その他の重要なオプション

  • strict: すべての厳格モードのチェックを有効にします。
  • module: Viteではesnextが推奨されます。
  • jsx: Reactを使用する場合は、react-jsxやreact-jsxdevを設定します。
{
  "compilerOptions": {
    "strict": true,
    "module": "esnext",
    "jsx": "react-jsx"
  }
}

これらの設定を正しく行うことで、Vite.jsプロジェクトのビルドプロセスがスムーズに進み、開発体験が向上します。プロジェクトの要件に合わせて、適切にtsconfigの設定を調整しましょう。

©Tsurutan. All Rights Reserved.