В последнее время я увлекаюсь Typescript и интегрирую его во все свои проекты и рабочие процессы. Честно говоря, с Gatsby это так же просто, как установить плагин, но я подумал, что задокументирую минимальные нюансы, которые есть в этом процессе.
- Установите Typescript, типизацию для React/Node, ESLint (и конфигурацию по умолчанию + красивую интеграцию) и, наконец, плагин Gatsby для поддержки Typescript:
npm i typescript gatsby-plugin-typescript npx install-peerdeps --dev eslint-config-airbnb npm install --save-dev @types/react @types/react-dom @types/node eslint eslint-config-prettier eslint-plugin-prettier
- Добавьте следующий плагин в свой
gatsby-config.js:
module.exports = {
// ...,
plugins: [...`gatsby-plugin-typescript`],
}
- Добавьте скрипты линтинга и проверки типов в свой
package.json:
{
"scripts": {
"lint": "eslint . --ext ts --ext tsx'",
"test": "npm run type-check && npm run lint",
"type-check": "tsc --pretty --noEmit"
},
}
- Создайте
tsconfig.jsonв корне вашего проекта. Я взял свой отсюда, но на Github полно ссылок (вот так):
{
"compilerOptions": {
"allowJs": true,
"allowSyntheticDefaultImports": true,
"baseUrl": "./src",
"jsx": "react",
"lib": ["dom", "esnext", "es2015", "es2016", "es2017"],
"moduleResolution": "node",
"noImplicitAny": false,
"noUnusedLocals": true,
"noUnusedParameters": true,
"plugins": [
{
"name": "typescript-styled-plugin"
}
],
"target": "es2015"
},
"include": ["**/*.ts", "**/*.tsx"],
"exclude": ["node_modules/*", "public/*"]
}
