Skip to main content

@roots/bud-typescript

TypeScript support can be added by installing the @roots/bud-typescript extension.

Installation​

npm install @roots/bud-typescript --save-dev

Usage​

General ts configuration is handled using a standard tsconfig.json in your project root. See the TypeScript docs on tsconfig.json for more information.

There is a base tsconfig available for you to extend:

{
  "extends": "@roots/bud-typescript/tsconfig/tsconfig.json"
}

If you are authoring your config file in TypeScript you must use the ts-bud command instead of bud.

Typechecking​

By default TypeScript files will only be compiled to JS during builds. If you also want typechecking, you can enable it in your bud configuration:

bud.typescript.typecheck.enable()

You may wish to configure typechecking only in production so that your development experience stays snappy:

bud.isProduction && bud.typescript.typecheck.enable()

Babel​

By default, @roots/bud-typescript will pass code to @roots/bud-babel for further transforms.

To disable babel and only use tsc:

bud.typescript.useBabel(false)

If you aren't using babel make sure your tsconfig.json is set up appropriately.

In particular, React users likely want to set jsx to react.

React Fast refresh​

React refresh should work out of the box with zero configuration required.

  • If you are using @roots/bud-react the react-refresh-typescript transformer will automatically be used.
  • If you are using @roots/bud-babel the babel transformer will be used instead of the react-refresh-typescript.