型定義ファイル自作時のおく場所について

Question

今回react-lazyloadというパッケージの型定義ファイルを作りました。
型定義ファイル自作時のおく場所に関して相談させて下さい

tsconfigを以下のように記載してます

"compilerOptions": {
    "outDir": "build/dist",
    "module": "commonjs",
    "target": "es5",
    "lib": ["es6", "dom"],
    "jsx": "react",
    "rootDir": "src",
    //一部省略
    "traceResolution": true,
    "typeRoots" : ["./mytypes","./node_modules/@types"]
  },

上記のようにtypeRootsに自作した定義ファイルを置く場所を作り以下のように格納しました。

<sampleproject>/mytypes/react-lazyload/index.d.ts

更にtraceResolutionをtrueに設定して

tsc | grep react-lazyload を実行すると

esolving real path for ‘xxxx/mytypes/react-lazyload/index.d.ts', result ‘xxxx/mytypes/react-lazyload/index.d.ts'.
======== Type reference directive 'react-lazyload' was successfully resolved to ‘xxxx/mytypes/react-lazyload/index.d.ts', primary: true. ========

という風にちゃんと解決したようにみえるのですが

最終的に以下のようなエラーが出ます

src/App.tsx(3,22): error TS7016: Could not find a declaration file for module 'react-lazyload'. 
'xxxx/node_modules/react-lazyload/lib/index.js' implicitly has an 'any' type.

また自作ファイル自体を疑いましたが自作した定義ファイルを

xxxx/node_modules/@types/react-lazyload/index.d.ts

に格納するとエラーが出ず上手く動作します。

どこか手順が間違えているのでしょうか？ご教授お願い致します。

Answer 1

自己解決しました。

結論としては以下のように修正します。

{
  "compilerOptions": {
    // "typeRoots" : ["./mytypes","./node_modules/@types"]
    "baseUrl": ".",
    "paths": {
     "*": ["mytypes/*"]
  }

"typeRoots" は/// <reference types=".." /> directivesを使う時に利用するものだそうです。
今は殆ど使うことはないので、 "baseUrl" と"paths" を使うべきですね。

参考：https://github.com/Microsoft/TypeScript/issues/12222#issuecomment-260417733