TypeScript 独自の型ファイルを作るときのためのメモ

ちょっと苦戦したので忘れないようにメモです。

やりたいこと

・グローバルな独自の型定義ファイルをプロジェクト内に作りたい

やったこと

・src/@types にindex.d.tsを配置。
・tsconfig.jsonにて、typeRootsを追加。

tsconfig.json

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "noImplicitAny": true,
    "module": "es6",
    "target": "es5",
    "allowJs": true,
    "typeRoots": ["src/@types", "node_modules/@types"]
  },
  "files": [
    "src/index.ts"
  ]
}

すると、型が読み込まれなかった...🤔
下記のように、指定のディレクトリの階層を一つあげるとうまくいった。

tsconfig.json

 "typeRoots": ["src", "node_modules/@types"]

どうなったか？？
↓
コンパイルエラー‹•.•›

[tsl] ERROR
      TS2688: Cannot find type definition file for 'css'.

[tsl] ERROR
      TS2688: Cannot find type definition file for 'modules'.

そもそも、src以下の型定義が全てグローバルになるのは嬉しくないです。

typesRootsの注意点

https://github.com/microsoft/TypeScript/issues/27956
こちらのgithubのissueに解答を見つけた。

When types is not specified (this seems to be the case that mystifies the most users): Subdirectory '{0}' of 'typeRoots' directory '{1}' is not a valid types package. If the presence of this subdirectory is intentional, change the 'typeRoots' or 'types' option. See https://www.typescriptlang.org/docs/handbook/tsconfig-json.html#types-typeroots-and-types .
When types is specified: Could not find a types package named '{0}' (specified in the 'types' option) in any directory specified by the 'typeRoots' option. See https://www.typescriptlang.org/docs/handbook/tsconfig-json.html#types-typeroots-and-types .
(Of course, the long link could be replaced with an aka.ms link.)

typesオプションが指定されていないと、typeRoots以下に型定義ファイル以外があると混乱してしまうようです。
でも src/@typesだとエラーが起きちゃうし...

解決方法

typeRootsで指定するフォルダの中に、直で型定義ファイルをおいちゃダメでした。
src/@types/global/index.d.tsという配置にして、

"typeRoots": ["src/@types", "node_modules/@types"]

にすればいけました。
本来パッケージ単位で扱うものだからですね。
めでたしめでたし。