Adding Typescript to Gatsby

08 January, 2020

I've been on a Typescript kick lately and integrating it into all of my projects and workflows. With Gatsby it's honestly as simple as installing a plugin, but I thought I'd document the minimal nuances there are in the process.

  1. Install Typescript, typings for React/Node, ESLint (and default config + prettier integration), and finally the Gatsby plugin for Typescript support:
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
  1. Add the following plugin to your gatsby-config.js:
module.exports = {
// ...,
plugins: [...`gatsby-plugin-typescript`],
}
  1. Add linting and type checking scripts to your package.json:
{
"scripts": {
"lint": "eslint . --ext ts --ext tsx'",
"test": "npm run type-check && npm run lint",
"type-check": "tsc --pretty --noEmit"
},
}
  1. Create a tsconfig.json in the root of your project. I grabbed mine from here, but there are plenty on Github to reference (like this):
{
"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/*"]
}

References

Software Requirements

SoftwareVersion
gatsby-plugin-typescript2.1.26
gatsby2.18.22
react16.12

๐Ÿ”— This post was filed under

Blue square avatar white centered hiragana text reading Ryosuke

@Ryosuke6 months ago