やっぱりタイプチェックが必要
個人的にTypescriptはあまり好きではなのですが、ソースコードが大きくなるにつれ、扱うデータが複雑になるにつれ、背に腹はかえられない状況になってくるんですよね。 Reactの提供するPropTypesとかもありますが、ビルド時にエラーを吐いてくれるわけじゃないので、どうせやるならTypescript一択です。
動的型付け独特の気持ちの良い書き心地があるのですが、今回は素直にGatsbyにTypescriptを導入することにしました。
Typescriptの導入
Gatsbyで何かを導入したい時、大抵の場合プラグインがあります。 Typescript導入のプラグインもあるので、それを使っていきます。
パッケージをインストールして
npm install --save gatsby-plugin-typescript
もしくは
yarn add gatsby-plugin-typescriptgatsby-config.jsに追記
plugins: [
`gatsby-plugin-typescript`,
]tsconfig.jsonをルートディレクトリに追加
{
"include": ["./src/**/*"],
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"lib": ["dom", "es2017"],
"allowJs": true,
"jsx": "react",
"strict": true,
"esModuleInterop": true,
"experimentalDecorators": true,
"emitDecoratorMetadata": true,
"noEmit": true,
"skipLibCheck": true,
"moduleResolution": "node"
}
}おしまい
だったら良かったのですが、タイプチェック…してる…? してなくない？
プラグインのページをよく読むとこう書かれています。
Allows Gatsby to build TypeScript and TSX files. Does NOT run type checking during build (see Caveats).
GatsbyにTypescriptとTSXファイルをビルドさせることができます。ビルド時にタイプチェックは実行されません
普段あまりTypescriptを使ってない分、知識が浅いのですが、ビルド時にタイプチェックしてエラーとかを吐いてくれないならTypescript使う意味…なくね？
このプラグインで十分な人ってどういう用途でTypescript使ってるんでしょうか。
解決策
時間をかけて調査していると良さそうなプラグインを発見しました。
なんでも誰かが作ってるもんですね、感謝しかございません。
さきほどインストールしたプラグインに追加する形で使っていきます。
インストール
npm install --save gatsby-plugin-typescript-checker
もしくは
yarn add gatsby-plugin-typescript-checkergatsby-config.jsに追記
plugins: [
`gatsby-plugin-typescript`,
`gatsby-plugin-typescript-checker`, // new
]@typesをインストール
npm install --save-dev typescript @types/node @types/react @types/react-dom @types/react-helmet @types/styled-components
もしくは
yarn add -D typescript @types/node @types/react @types/react-dom @types/react-helmet @types/styled-componentsこれでビルド時にタイプチェックが行われ、間違った型でデータを扱っているとエラーを吐いてくれます。
