typescriptのvim pluginとgatsby-plugins-typescriptを一緒に使う

gatsby-plugins-typescriptで GatsbyJS を typescript で使えるようしていた。 で今日、typescript だから VSCode を使うみたいな状況を避けたかったので、tsuquyomiという便利な Vim の typescript プラグインを入れてみた。

すると、以下のようなエラーで怒られた。

src/templates/blog-post.tsx:1:8 - error TS1192: Module '"/home/hitochan/developer/me/node_modules/@types/react/index"' has no default export.

1 import React from 'react'

エラーが言っていることは文字通りで、react には default export がないのにそれを import しようとしてるよ！というエラーだ。

具体的には以下のコード。

import React from 'react'

なんで今更こんなエラーが出るようになったかというと、 gatsby-plugins-typescript は型チェックなどはせずに js にトランスパイルするだけなので気づかなかっただけ。

解決策は 2 つ。tsconfig.jsonを追加すれば他のファイルの変更はいらないので今回は 2 にした。 ちなみにgatsby-plugins-typescriptはtsconfig.jsonに全く影響されないっぽいので、設定は gatsby-config.js でやる必要がある。

1. import * as React from 'react'で全てのexportをReactとしてimport
2. tsconfig.jsonのcompileOptionsに以下のように"esModuleInterop": trueを設定。

{
  "compilerOptions": {
    ...
    "esModuleInterop": true,
    ...
  },
  ...
}