How is typescript automatically 'included'

[MathiasKandelborg]

Summary

How do I control how Typescript is included? How does one incorporate typings into the developer experience, and why can one not have globals? E.g., React as global so one won't have to import it everywhere.

Relevant information

Typescript is 'included', but there's no information on how to control versions or what the default configuration is, or how one would go about changing it.

Also, please add information on the Typescript page to direct people towards using @types/my-package, especially for react and react-dom. There's no reason not to include the very first and essential steps you need to use TS with gatsby. Installing Typescript, then the vital types; you can't just install Typescript and go. You need the react types for starters.

[wardpeet]

I agree that our https://www.gatsbyjs.com/docs/typescript/ doesn't explain well what the requirements are. We love getting PRs to improve our documentation. If you encountered this problem, others would have too.

Typescript conversion is done by babel, not by the typescript compiler. It means no actual type checking is done. Sadly, npm does not enable us to add optional peerDependencies that show proper warnings that you might need @types/react, @types/react-dom and typescript. These should be documented in the linked document.

You can change "typescript configuration" by adding a tsconfig file like you normally would with any typescript project.

Why do you need to include React each time? Well, it's how react wants it. This changes inside react@17, where you'll be able to omit it completely. Another option is to add a customBabelrc file and enable a plugin like https://www.npmjs.com/package/babel-plugin-jsx-imports to do it for you.

[MathiasKandelborg]

Oh, I got confused about configuration because of how TS is compiled with Gatsby.

I didn't run into any issues personally, I just expected there to be a oneliner to copy.

One builds react applications with GatsbyJS right? Essentially, you could say that React should be available in files in a React project right?

Gatsby already has a default babel configuration, why does anyone have to enable something that should be a default?

[MathiasKandelborg]

There might also be a whole tutorial section to be had on TS.

There's already a bunch of available types, why not disclose that and give some examples on when to use them? Really get people started with safer coding!

[MathiasKandelborg]

I needed a few more plugins for babel to work. Here's a working example, and damn am I happy it works!

yarn add -D / npm install --dev babel-plugin-jsx-imports @babel/preset-react @babel/plugin-syntax-jsx @babel/plugin-class-properties

module.exports = {
  presets: ['@babel/preset-react'],
  plugins: [
    '@babel/plugin-proposal-class-properties',
    'babel-plugin-jsx-imports',
    '@babel/plugin-syntax-jsx'
  ]
}

There is absolutely no point in importing React all over the place when you got babel. It should be the default in a React application that React is present. Make sure it is present in all jsx files once, and we're good to go. There's no real point to importing React everywhere or choosing to make that the default.