この記事は「恐怖!ねばねばオクラ納豆大好き人間アドベントカレンダー」という有りそうで無かった(今もない)アドベントカレンダーの25日目の記事です。メリークリスマス。

◆結論

タイトルオチなんだが、tsconfig.jsonのcompilerOpsions.types配列に指定しろ。

◆IKISATSU

Webフロント開発してて、.env使おうと思った。いつもはVue CLIくんが勝手にセットアップしてくれるんで何も考えずに使ってたんだけど、「process.env.NODE_ENV」を読もうとして起こられた。

名前 'process' が見つかりません。ノードの型定義をインストールする必要がありますか? npm i --save-dev @types/node を試してから、お客様の tsconfig の型フィールドに node を追加してみてください。

「型フィールド?なんかつよそうだね。」「俺はお客様ではない。」と思って、とりあえず英語版のエラメを見てきた。

TS2591: Cannot find name ‘process’. Do you need to install type definitions for node? Try npm i @types/node and then add node to the types field in your tsconfig.

あぁ。「types」を「型」と訳したんですね。訳すな。あとお客様ってワードどっから出てきた。

だからまぁ「@types/node」パッケージをinstallしてtsconfig.jsonの「compilerOptions」の「types」配列に「"node"」を入れとけ。

◆それから数年後

別の「@types」系ライブラリで盛大にハマった。

@types/chromecast-caf-receiver

▼importしてみた

import * as cast from 'chromecast-caf-receiver';

型解決はされるんだけども、ビルドでコケた。

Cannot resolve dependency 'chromecast-caf-receiver'

▼import typeしてみた

import type * as cast from 'chromecast-caf-receiver';

コンパイラに怒られた。

'import type' を使用してインポートされたため、'cast' は値として使用できません。ts(1361)

※英語

TS1361: 'cast' cannot be used as a value because it was imported using 'import type'.

そらそうだ。

▼tsconfigでincludeしてみた

そもそもの型定義を覗いてみたらdeclare globalされていた。よくわからんからtsconfigでincludeしてみた。

  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "node_modules/@types/**/*.ts"
  ],

node_modules配下の@typesを全部。勝ったな。

~2秒後~

負けました。

▼神の一手

typesに指定したら勝てた。

    "types": [
      "node",
      "chromecast-caf-receiver"
    ],

そっかぁ…

◆結論(にかいめ)

ワシ、こういう細かい話で詰まりたくないんじゃけど。

コンパイラで「tsconfigのtypesに入れてみたら?」みたいに表示できんのかね。クイックフィックスでぶち込んでくれないかね。

オープンソースだしパッチ送ればいいだけなんだけど、いかんせん寝たりゲームしたりで忙しいんですよね。