Great article. There’s a lot going on indeed. :)

There are two things that I want to mention, which are not obvious yet are important.

  1. Creating TypeScript / TSLint configurations

From the perspective of TypeScript newbie (which is me currently), it didn’t seem clear how you arrived at having tsconfig with all these variables.

So, I think it would be useful if you mentioned that tsconfig.js can be generated using tsc — init (two dashes before init; Medium converts it to one long dash), after installing TypeScript globally with npm install -g typescript.

Same goes for tslint.js: install tslint globally using npm install -g tslint, then execute tslint — init (again, two dashes before init) to create tslint.js. Then edit values to whatever suits you.

For anybody that doesn’t know it, installing module globally (-g) means it’s available from anywhere, e.g. when you hit tslint in the command line, it will always work no matter which folder you have currently opened and you won’t get “unknown command” type of error. If you don’t install it globally (i.e. without -g), then you need to use something like ./node_modules/typescript/bin/tsc to access it, which can get convoluted.

2. Converting .js(x) to .ts(x) files — it’s not enough to just change template files extensions (i.e. index.js to index.tsx), gatsby-node.js needs to be changed too!

After changing the extensions and running gatsby develop, you will be “greeted” with an error because Gatsby still expects to find .js files under src/templates. What needs to be done is to open gatsby-node.js, and change all occurences of “.js” in paths to “.tsx” (assuming that you decide to use .tsx and not .ts). Note the bolded parts.

gatsby-node.js

(…)
createPage({
path: edge.node.fields.slug,
tags: edge.node.frontmatter.tags,
component: path.resolve(
`src/templates/${String(edge.node.frontmatter.templateKey)}.tsx`
),

(…)

createPage({
path: tagPath,
component: path.resolve(`src/templates/tags.tsx`),
context: {
tag,
},
(…)

Now everything’s all right. :-)

Marino Guerieri (marinoguerieri.com)

Written by

Web developer & tech. support specialist. Find more about me and my work at marinoguerieri.com.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade