vite-plugin-typescript-transform

Applies the TypeScript compiler during Vite transform build phase.

This plugin may allow the use of language features not yet supported by vite's default compiler, esbuild.

Important

• It does not change or disable any of vite compiler/features/options.
• It only transpiles the code using the typescript compiler and lets vite move on with the transpiled code.
• The typescript configuration is what controls the transpilation and its outputs.

Install

npm install --save-dev vite-plugin-typescript-transform

Options

See the Options interface and its inline documentation.

Transform ECMAScript decorators

The new ECMAScript decorators are not supported by esbuild (yet), but they are supported by typescript since v5 (see the announcement). This example down-levels the new decorators into code that is usable in runtimes that do not yet support it.

import ts from 'typescript';
import { defineConfig } from 'vite';
import { vitePluginTypescriptTransform } from 'vite-plugin-typescript-transform';

export default defineConfig({
  // ...your vite configuration
  plugins: [
    vitePluginTypescriptTransform({
      enforce: 'pre',
      filter: {
        files: {
          include: /\.ts$/,
        },
      },
      tsconfig: {
        override: {
          target: ts.ScriptTarget.ES2021,
        },
      },
    }),
  ],
});

Common errors/problems

Sourcemap is likely to be incorrect: a plugin (vite-plugin-typescript-transform) was used to transform files, but didn't generate a sourcemap for the transformation.

This means that the plugin transformed the code but it did not generate sourcemaps for the changes. The detail here is that the plugin is using typescript directly, so its configuration play a crucial role in what happens. More specifically: to generate sourcemaps, sourcemaps need to be enabled in the typescript configuration. This can be achieved in two different ways:

• by setting compilerOptions.sourceMap to true in the tsconfig.json file
• by setting tsconfig.override.sourceMap to true in the plugin configuration