Switch branches/tags
AnushPatel-patch-1 JanoshRiebesell-patch-1 KyleAMathews-patch-1 LekoArts-patch-1 Partner-program add-depn add-escalade-sports-case-study add-mobile-performance-post add-plugin-documentation alter-blog-post-date amberleyromo-7730-starter-showcase-sourcing amberleyromo-patch-1 array-doclets berrak-responsive-layout calcsam-patch-1 ccustom-algolia-index change-hacktoberfest-title config-api coreyward-patch-1-1 cypress-timeouts docs-rename-starter docs/gatsby-remark-images-sharp documentation-project-blogpost-new-title drop-alpha-support filter-css fix-broken-link fix-doc fix/starter-detail-dependency-grid fix/typescript-reach-router fixes-to-plugin-library gatsby-ssr-silent-fail graphql-filter-sort gvarandas-patch-1 hu0p-patch-1 imagentleman-patch-1 link-container m-allanson-patch-1 marisamorby-swag-store-post master neo/move-prefixPath old-master-3 old-master-4 old-master-6 old-master-7 page-metadata-splitting plugin-blogpost-edit plugin-cli pr/8963 revert-4254-blog-documentation-project revert-5047-update-remark revert-workspaces rfbotto-patch-1 sample-branch-example sebastienfi-wp-orderby-date-asc sharp-images-no-ext sort-chunks starterShowcase2 style-guide-update styled-components-babelrc-config-doc test-builds topics/gatsby-plugin-sharp-tracesvg-fluid topics/inconsistent-accordian-behavior-docs-sidebar topics/using-gatsby-image-design-refresh topics/www-bump-remark-autolink-headers topics/www-sidebar-move-expand-all-down tryzniak-patch-1 update-imagemin-deps v1 v2 valse-disable-default-pageview valse-resolve-env worker
Nothing to show
Find file History
pieh chore(release): Publish
 - gatsby-plugin-sass@2.0.6
 - gatsby-plugin-typescript@2.0.3
 - gatsby-source-contentful@2.0.18
Latest commit bf5c3e2 Dec 5, 2018



Provides drop-in support for TypeScript and TSX.


npm install gatsby-plugin-typescript

How to use

  1. Include the plugin in your gatsby-config.js file.
  2. Write your components in TSX or TypeScript.
  3. You're good to go.


module.exports = {
  // ...,
  plugins: [...`gatsby-plugin-typescript`],


When adding this plugin to your gatsby-config.js, you can pass in options to override the default @babel/preset-typescript config.

// gatsby-config.js
module.exports = {
  plugins: [
      resolve: `gatsby-plugin-typescript`,
      options: {
        isTSX: true, // defaults to false
        jsxPragma: `jsx`, // defaults to "React"
        allExtensions: true, // defaults to false

For more detailed documentation on the available options, visit https://babeljs.io/docs/en/babel-preset-typescript#options.


This plugin uses babel-plugin-transform-typescript to transpile typescript. It does not do type checking. Also since the TypeScript compiler is not involved, the following applies:

Does not support namespaces. Workaround: Move to using file exports, or migrate to using the module { } syntax instead.

Does not support const enums because those require type information to compile. Workaround: Remove the const, which makes it available at runtime.

Does not support export = and import =, because those cannot be compiled to ES.next. Workaround: Convert to using export default and export const, and import x, {y} from "z".


Type checking

First of all you should set up your IDE so that type errors are surfaced. Visual Studio Code is very good in this regard.

In addition, you can see the instructions in TypeScript-Babel-Starter for setting up a type-check task.