Typescript

Typescript works out of the box with Parcel, but there ...

¶ Babel

Babel can strip TypeScript type annotations using @babel/preset-typescript, this is the default way in which Parcel transpiles TypeScript because it is generally faster in our pipeline. There are however a few downsides to this:

• No type checking
• tsconfig.json is ignored, so language features like class properties, decorators need to be provided by a Babel plugin.
• const enum isn't supported

For a full list, take a look at the Babel documentation.

¶ TypeScript's tsc

If you are using more advanced TypeScript features that include custom config settings in tsconfig.js, you can use the @parcel/transformer-typescript-tsc transformer which uses the offical TypeScript compiler:

{
  "extends": "@parcel/config-default",
  "transformers": {
    "*.{ts,tsx}": ["@parcel/transformer-typescript-tsc"]
  }
}

Because Parcel processes each file individually, it implicitly sets isolatedModules: true in the tsc options, this comes with limitations as well, namely constant const enums not being supported either.

• No type checking
• const enum isn't supported
• Some tsconfig.json options (such as paths) aren't currently not respected with the default config.

¶ Type Checking

Neither the Babel transformer nor the tsc transformer perform type checking, they merely strip the type annotations. The only builtin way to validate the types is to use the tsc validator which runs after the bundles are generated. You need to add a tsconfig.json file that includes your source files (although the validator still only runs on the assets that Parcel processed). TODO

{
  "extends": "@parcel/config-default",
  "validators": {
    "*.{ts,tsx}": ["@parcel/validator-typescript"]
  }
}

{
  "include": ["src/**/*"]
}

¶ Generating Typings

Parcel can extract the typings of your entry point by specifying package.json#types (an automatic target like main)

{
  "source": "src/index.ts",
  "module": "dist/index.js",
  "types": "dist/index.d.ts"
}

(This functionality is provided by @parcel/transformer-babel or @parcel/transformer-typescript-tsc.)