Gatsby のサイトを TypeScript で作成する方法を記述します。 現時点の主な環境は以下です。
| プロジェクト | バージョン |
|---|---|
| Gatsby | 2.7.20 |
| TypeScript | 3.5.3 |
| yarn | 1.17.0 |
主な流れは以下のようになります。
ここでは、tsdemo というプロジェクト名で作成します。
スターターは特に指定せず、デフォルトのまま作成します。
$ gatsby new tsdemo作成されたディレクトリに移動し、TypeScript で開発するのに必要なパッケージを追加します。
まずは TypeScript をインストールします。
$ yarn add --dev typescriptReact に関連する TypeScript 用型定義ファイルを追加します。
$ yarn add --dev @types/react @types/react-dom @types/node @types/react-helmetGatsby の TypeScript 用プラグインをインストールします。
$ yarn add gatsby-plugin-typescriptTypeScript 用の linter を入れます。 tslint ではなく、eslint に TypeScript 用プラグインを追加する形で使用します。
$ yarn add --dev eslint eslint-config-prettier eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-hooks @typescript-eslint/eslint-plugin @typescript-eslint/parser.eslintrc.js というファイルを作成し、eslint の定義を記述します。
// .eslintrc.js
module.exports = {
parser: '@typescript-eslint/parser', // Specifies the ESLint parser
extends: [
'eslint:recommended',
'plugin:react/recommended',
'plugin:@typescript-eslint/recommended',
'prettier/@typescript-eslint',
'plugin:prettier/recommended'
],
settings: {
react: {
version: 'detect'
}
},
env: {
browser: true,
node: true,
es6: true
},
plugins: ['@typescript-eslint', 'react'],
parserOptions: {
ecmaFeatures: {
jsx: true
},
ecmaVersion: 2018, // Allows for the parsing of modern ECMAScript features
sourceType: 'module' // Allows for the use of imports
},
rules: {
'react/prop-types': 'off', // Disable prop-types as we use TypeScript for type checking
'@typescript-eslint/explicit-function-return-type': 'off',
"semi": ["error", "always"],
"semi-spacing": ["error", {"after": true, "before": false}],
"semi-style": ["error", "last"],
"no-extra-semi": "error",
"no-unexpected-multiline": "error",
"no-unreachable": "error"
},
overrides: [
// Override some TypeScript rules just for .js files
{
files: ['*.js'],
rules: {
'@typescript-eslint/no-var-requires': 'off' //
}
}
]
};Gatsby が TypeScript ファイルを扱えるように、定義ファイルへ記述を追加します。 gatsby-config.js に上記プラグインの記述を追加します。
plugins: [
`gatsby-plugin-react-helmet`,
`gatsby-plugin-typescript`, :
],生成された .prettierrc に対して、自分のスタイルに従い設定を変更します。 セミコロンの付加と文字列リテラルの定義をシングルクオートに変更しました。
{
"endOfLine": "lf",
"semi": true, "singleQuote": true, "tabWidth": 2,
"trailingComma": "es5"
}以下のように設定しています。
{
"compilerOptions": {
"module": "commonjs",
"target": "esnext",
"jsx": "preserve",
"lib": ["dom", "esnext"],
"strict": true,
"noEmit": true,
"isolatedModules": true,
"esModuleInterop": true,
"noUnusedLocals": true,
"skipLibCheck": true,
"incremental": true,
"tsBuildInfoFile": "./buildcache/front-end",
"outDir": "./lib"
},
"exclude": ["node_modules", "public", ".cache"],
"include": ["./src"]
}コマンド類を追加します。 以下では TypeScript のコンパイル用のものと Lint で使用するものを追加しています。
"scripts": {
...,
"tsc": "tsc",
"eslint": "eslint -c ./.eslintrc.js 'src/**/*.{ts,tsx}'",
"eslint:fix": "eslint --fix -c ./.eslintrc.js 'src/**/*.{ts,tsx}'",
...,
},この時点で一回サーバーを起動し動作を確認します。 まだ TypeScript ファイルは存在しないので、何も問題なく動作するはずです。
これで TypeScript で開発してゆく環境が整いました。
次は jsx ファイルを tsx ファイルに変換する作業に移ります。
長くなったので、別の記事にします。