TypeScriptでtypeエイリアスはどこに定義するべき

#Typescript

2023/11/07

kantas-spike/title_url_copierをTypeScript化する際に、型エイリアスを定義した。

この型は2つのファイルで利用するが、その場合、型エイリアスはどこに定義するべきなのか?

type LinkFormatOptions = {
  format: string;
  useHashFormat: boolean;
  hashFormat: string;
};

解決策

型エイリアスを定義した独自の宣言ファイル(./src/types/global.d.ts)を作成し、宣言ファイルをtscのコンパイル対象に含めることで、定義した型エイリアスが各ソースファイルで共用できるようになる。

具体的な手順は以下になる。

宣言ファイル(./src/types/global.d.ts)に、以下のように定義する。また、 ./src/background.tsに定義していた型エイリアスは不要なので削除する。

// ./src/types/global.d.ts

// 強制的にファイルを`モジュール`にする
//
//  ファイルが`スクリプト`であれば、`declare global`を利用しなくても、
//  定義内容が全てグローバルになる。
//  意図せずにグローバルを汚すことがないようにモジュールにしている。
export {};

// 明示的にグローバルの宣言空間に型エイリアスを定義する
declare global {
  type LinkFormatOptions = {
    format: string;
    useHashFormat: boolean;
    hashFormat: string;
  };
}

宣言ファイルをtscのコンパイル対象に含める

今回は、./src/types/global.d.tsに宣言ファイルを作成した。

もともと、tsconfig.jsonの設定でinclude: ["src"]となっているため、自動的に宣言ファイルがコンパイル対象となる。

もし、./srcフォルダー以外に宣言ファイルを作成した場合(例: ./types/global.d.ts)は、 tsconfig.jsonのcompilerOptions内のtypesRootsに、宣言ファイルを格納したフォルダーを指定すれば良い。
```
{
  // ..略..
  "compilerOptions": {
    // ..略..
    "typeRoots": ["./node_modules/@types", "./types"]
  }
  // ..略..
}
```

念のため確認

以下のコマンドを実行し、表示されるfiles設定内に宣言ファイルが含まれていることを確認する。

$ npx tsc --showConfig
{
 "compilerOptions": {
     "target": "es2021",
     "module": "esnext",
     "rootDir": "./src",
     "outDir": "./dist",
     "esModuleInterop": true,
     "forceConsistentCasingInFileNames": true,
     "strict": true,
     "skipLibCheck": true
 },
 "files": [
     "./src/background.ts",
     "./src/options.ts",
     "./src/types/global.d.ts"
 ],
 "include": [
     "src/**/*"
 ],
 "exclude": [
     "dist",
     "node_modules"
 ]
}

あとはtscでトランスパイルする
```
npx tsc
```

参考

作成日: 2023/11/07