How to set up GatsbyJS with TypeScript

First things

Install TypeScript as dependency:

  • npm:
1
npm i typescript --save-dev
  • yarn
1
yarn add typescript -D

After installing, you should initialize TypeScript project by generating tsconfig.json file

1
tsc --init

Because in GatsbyJS you are using React components that includes JSX you should set specific parameter in tsconfig.json:

1
2
3
4
5
6
{
  	"compilerOptions": {
  		....
	    "jsx": "react",
	}
}

If you want to use TypeScript for your src/ files you can easily just rename all files in src/ from .js to .ts or .tsx. Gatsby support TypeScript out of the box.

TypeScript for gatsby-* files

If you want to write files gatsby-browser.js, gatsby-node.js, and others using TypeScript you should install and setup plugin gatsby-plugin-ts-config

Steps:

Installation:

  • npm

npm install -D gatsby-plugin-ts-config

  • yarn
1
yarn add gatsby-plugin-ts-config -D

Add gatsby-plugin-ts-config into gatsby-config.js

1
2
3
4
5
module.exports = {
	plugins: [
	  `gatsby-plugin-ts-config`,
	]
}

Using types in gatsby-node.ts

Read more here (GitHub Gist)

1
2
3
4
5
6
7
import { GatsbyNode } from "gatsby"

const createPages: GatsbyNode["createPages"] = ({ graphql, actions }) => {
	// something important
}

exports.createPages = createPages

Subscribe to the newsletter

Get a once-per-week email with my latest content. By subscribing to this newsletter you will also be the first to receive last updates of my eBooks and courses.

Comments πŸ’¬