Use TypeScript#

Builder supports TypeScript compilation and type checking by default, you can use . ts and `. tsx' files in the project without any configuration.

TypeScript compilation#

Builder has three ways to compile TypeScript files.

Babel

By default, all TypeScript files are compiled by Babel.

You may find some old articles pointing out that Babel cannot handle const enum and namespace alias syntax, however since version 7.15 Babel has supported them. Babel compile is enabled by default.

If you want more Babel plugins

ts-loader

The ts-loader uses TypeScript's official compiler-TSC under the hood. When ts-loader is enabled, TypeScript files will no longer be compiled by Babel, but Babel will still inject polyfill into the TSC output and transform it to the lower version of JavaScript.

Enable ts-loader(with default options):

export default {
  tools: {
    tsLoader: {},
  },
};

More configuration can be found at tools.tsLoader.

If ts-loader is enabled with default configuration, it does not have type checking, we do type checking by fork-ts-checker-webpack-plugin.

SWC

If you want a super fast compiler, and you don't need some custom Babel plugins, then you can use SWC for compilation and minification.

SWC plugin in Builder supports TypeScript, TSX and legacy decorator, you can check SWC plugin.

Why Babel is the default option#

Babel supports TypeScript well. It cannot check types, but we can check types in another process. Babel follows standards more when compiled to lower versions of JavaScript in certain situations. For example, Babel will initialize class members as undefined, and mark class methods as non-enumerable. If TSC is enabled, for better syntax downgrading and Polyfill, the TSC output will still be compiled by Babel, causing unnecessary performance costs.

Type checking#

Currently, the only stable TypeScript type checking tool is TSC, and it usually takes a while to check types in a large project, so Builder by default using tsChecker(fork-ts-checker-webpack-plugin) for asynchronous type checking, it won't block project setup.

Set tsChecker(with default options):

export default {
  tools: {
    tsChecker: {},
  },
};

More configurations can be seen at tsChecker configuration.

Note that if ts-loader is enabled and compileOnly: false is set, please disable tsChecker to avoid duplicate type-checking.