【Angular11】Cannot find namespace 'NodeJS'. にハマった話

環境

• Angular CLI: 11.0.4
• Node: 10.13.0
• TypeScript: 2.9.2

やろうとしてたこと

setInterval を使ったタイマを作成し、タイマーを止めるために返り値のNodeJS.Timeout 型のプロパティで保持しようとしていました。ただ、この型宣言で、「NodeJSっていう名前空間が見つからんよ！」って怒られちゃいました。

sample.component.ts

private timer: NodeJS.Timeout; // Cannot find namespace 'NodeJS'.

public setTimer() {
    this.timer = setInterval(()=>{});
}

ハマったこと

修正方法を日本語・英語の両方で調べると、結構ヒットします。ただ、そのほとんどがtsconfig.json を修正する記事ばかりで、知識のない私が意味も理解せずに、その通りに修正しても直りませんでした。

解決策

src/tsconfig.app.json がある場合は、そちらのcompilerOptions のtypes にnode を追加で解決できました。

src/tsconfig.app.json

{
  "extends": "./tsconfig.json",
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "types": [
      "node"   // 追加
    ],
  },
}

@types/node をインストールしていなければ、下記コマンドでインストールします。

npm install --save-dev @types/node

何が違ったのか

よくよく自分のプロジェクト構成をみると、継承したtsconfig.app.json がありました。いくらtsconfig.json を修正しても、そちらで上書きされてしまっていたようです。

なお、調べたサイトをちゃんと見返すとtsconfig.app.jsonって書いてありました。。。先入観で記事を見てはダメですね。。。

参考

• styled-componentsの「Cannot find namespace 'NodeJS'.」 - Qiita
• Cannot find namespace 'NodeJS' - Stack Overflow