How to incrementally migrate a Gatsby app to TypeScript

Steps

1. Install a Gatsby project but do not select TypeScript as language
2. Install the dependencies and generate tsconfig.json as stated in Gatsby docs
3. Make sure to add "jsx": "react" in tsconfig.json
4. [OPTIONAL] Install prop-types and use InferProps to guarantee runtime erros will still be caught. Read more here.
5. In order to import JS files in components, set allowJs: true in tsconfig.json. Source.
6. You also need to set outDir: "./dist" after setting the above config. Source.
7. [OPTIONAL] If you want to use CSS Modules in .tsx files, then you need to create globals.d.ts in /src. Source
8. [OPTIONAL] If ESLint is enabled, it may raise a parsing error on the *.d.ts files. A possible workaround is to disable the linter on those files. Source
9. [OPTIONAL] If importing .svg files as React components, you also will need to add it to globals.d.ts. Source

Good Resources:

• https://blog.logrocket.com/comparing-typescript-and-proptypes-in-react-applications/
• https://dillionmegida.com/p/convert-blog-to-typescript/
• [BEST PRACTICES] Refer to this website for great React + TS best practices