Reactでスタイリングを行う時はstyled-componentsを使う人が増えてきた印象があります。
styled-componentsをTypeScriptで動かそうとすると、Node.jsのtypeがないと言われてしまいました。

発生環境

styled-components : v3.3.3
TypeScript : v2.9.2
React : 16.4.0

エラーメッセージ


ERROR in [at-loader] ./node_modules/styled-components/typings/styled-components.d.ts:117:44
    TS2503: Cannot find namespace 'NodeJS'.

解決策

いくつか解決する方法があるみたいです。

解決策①

@types/nodeをインストール

npm install --save-dev @types/node

or

yarn add -D @type/node

tsconfig.jsonにtypeRootsを記述


{
  "compilerOptions": {
    "typeRoots": [
      "node_modules/@types"
    ]
  }
}

解決策②

@types/nodeをインストール

省略

tsconfig.jsonにtypesを記述


{
  "compilerOptions": {
    "types": ["node"]
  }
}

これがCannot find namespace 'NodeJS'を解決するセオリーみたいです。
ただ、これでも筆者はエラーを解決することができませんでした。

解決策③

styled-componentsのバージョンを固定する

yarn remove styled-components
yarn add styled-components@3.1.6

これでNodeJSのエラーは解決しましたが


ERROR in [at-loader] ./node_modules/styled-components/typings/styled-components.d.ts:75:48
    TS2344: Type 'keyof T' does not satisfy the constraint 'string'.
  Type 'string | number | symbol' is not assignable to type 'string'.
    Type 'number' is not assignable to type 'string'.

という別のエラーがでてきてしまいました。。。
styled-components@3.3.3ではこのエラーは発生しなくなっています。

解決策④

'NodeJS'をdeclearする

最終手段です。
node_modules/styled-components/typings/styled-components.d.tsを直接編集します。


declare namespace NodeJS {
  export interface ReadableStream {

  }
}

これを適当な箇所に入れることでエラーがでなくなりました。

styled-componentsとTypeScriptの相性はあまり良くなさそうに感じる・・・。