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:

tsconfig.json
{
"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.config.ts
bud.typescript.typecheck.enable()

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

bud.config.ts
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.config.ts
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.