TypeScript - hdknr/gatsby-home GitHub Wiki

Install

% npm i -S gatsby-plugin-typescript typescript ts-node @types/react @types/node @types/react-dom gatsby-plugin-graphql-codegen
npm WARN deprecated @graphql-toolkit/[email protected]: GraphQL Toolkit is deprecated and merged into GraphQL Tools, so it will no longer get updates. Use GraphQL Tools instead to stay up-to-date! Check out https://www.graphql-tools.com/docs/migration-from-toolkit for migration and https://the-guild.dev/blog/graphql-tools-v6 for new changes.
npm WARN @pmmmwh/[email protected] requires a peer of react-refresh@^0.8.2 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of acorn@^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of graphql@^15.0.0 but none is installed. You must install peer dependencies yourself.

+ [email protected]
+ [email protected]
+ @types/[email protected]
+ @types/[email protected]
+ @types/[email protected]
+ [email protected]
+ [email protected]
added 134 packages from 138 contributors, updated 7 packages and audited 2024 packages in 18.823s

Gatsby Recipes: Add TypeScript

Setup TypeScript

This recipe helps you start developing with the popular TypeScript language.

Step 1 / 4
Install necessary NPM packages

Proposed changes

NPMPackage:
 * Install typescript@latest

NPMPackage:
 * Install gatsby-plugin-typescript@latest

NPMPackage:
 * Install @typescript-eslint/parser@latest

NPMPackage:
 * Install @typescript-eslint/eslint-plugin@latest


Step 2 / 4
Install the plugin gatsby-plugin-typescript in your gatsby-config.js.

Proposed changes

GatsbyPlugin:
 * Install gatsby-plugin-typescript in gatsby-config.js
---
- Original  - 7
+ Modified  + 1

@@ -6,13 +6,7 @@
  module.exports = {
    /* Your site config here */
    plugins: [
-     {
-       resolve: `gatsby-plugin-typescript`,
-       options: {
-         isTSX: true,
-         allExtensions: true,
-       },
-     },
+     "gatsby-plugin-typescript",
      {
        resolve: `gatsby-plugin-graphql-codegen`,
        options: {
---

Add a tsconfig.json file to control how TypeScript processes your code.

Proposed changes

File:
 * Write tsconfig.json
---
- Original  -  1
+ Modified  + 13

  {
+   "include": ["./src/**/*"],
    "compilerOptions": {
+     "target": "esnext",
+     "module": "commonjs",
+     "lib": ["dom", "es2017"],
+     // "allowJs": true,
+     // "checkJs": true,
+     "jsx": "react",
      "strict": true,
      "esModuleInterop": true,
-     "jsx": "react"
+     "experimentalDecorators": true,
+     "emitDecoratorMetadata": true,
+     "noEmit": true,
+     "skipLibCheck": true,
+     "noImplicitAny": false,
+     "resolveJsonModule": true
    }
  }

---
Step 3
Add a tsconfig.json file to control how TypeScript processes your code.

✅ Wrote file tsconfig.json

Step 4 / 4
TypeScript is now setup!

You can now add TypeScript code, components, and pages in your sites src directory.


---


The recipe finished successfully!

✅ Installed NPM package [email protected]
✅ Installed NPM package [email protected]
✅ Installed NPM package @typescript-eslint/[email protected]
✅ Installed NPM package @typescript-eslint/[email protected]
✅ Installed gatsby-plugin-typescript in gatsby-config.js
✅ Wrote file tsconfig.json

Links