In Short

  1. Fork, clone and install the Gatsby default starter
  2. Install gatsby-plugin-typescript and TypeScript
  3. Configure tsconfig.json and type-check script
  4. Converting files to TypeScript
  5. Setting up ESLint & Prettier
  6. Setting up VSC

1. Clone and install the Gatsby default starter

So yes just fork the Gatsby default starter to your own Github account and clone it to your local machine from there.

Image for post
Image for post
And you are done with setting you your Gatsby starter and it’s running , on http://localhost:8000/ and we can start to set-up TypeScript now!

2. Install TypeScript & gatsby-plugin-typescript and

TypeScript can be added to the devDependencies whilst Gatsby plugins should be added as a dependency:

npm install gatsby-plugin-typescript & npm install typescript --save-dev
Image for post
Image for post

And we need to enable the plugin gatsby-plugin-typescript in the gatsby-config.js

So I had this issue with using Hook inside Initialize Function of react useReducer Hook, as a third argument to it.

And the problem is that I was getting

Image for post
Image for post
Do not call Hooks inside useEffect(...), useMemo(...), or other built-in Hooks. You can only call Hooks at the top level of your React function.

The problem is that i was using Hook inside of Initialize function of useReducer Hook

And it took me a while to find where I was getting this from.

As a solution I tried to pass that hook value that Im trying to get inside of Initialize function directly from the functional component where I use the useReducer hook but it turns out that init function only accepts only one argument so that was a bummer 🙃 . …

Image for post
Image for post

You can only use Hooks in functional components, and you can use lifecycle methods (componentDidMount, componentDidUpdate, componentWillUnmount etc.) in a class components.

From the React doc:

If you’re familiar with React class lifecycle methods, you can think of useEffect Hook as componentDidMount, componentDidUpdate, and componentWillUnmount combined.

Image for post
Image for post

So you will need to mimic lifecycle methods from class component in a functional components.

Code inside componentDidMount run once when the component is mounted. useEffect hook equivalent for this behavior is:

useEffect(() => {
// Your code here
}, []);

Notice the second parameter here is empty array []. …


Stojan Peshov

Just sharing my perspective of some Web Dev. Technologies. Get in touch by sendig an email to or visit directly.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store