How to use typescript transformers like typescript-is with esbuild?

[Fuzzyma]

I am using vite and would like to leverage the capabilities of typescript-is. typescript-is usually requires a patched typescript because typescript does not allow to specify custom transforms in the tsconfig.
However, esbuild does not do any typechecking so I assume that using a transformer that needs type information is not easily written - hence my question.

How would I go about this task to enable esbuild to create code that runs through a transform that takes type information and emits code based on that information?

[hyrious]

TypeScript in esbuild is nothing but erasing types during parsing, it does not integrate the real tsc. But a typescript transformer does require the real tsc to do its work. So your chance is to write a plugin that totally take over the loading part of typescript files with the real tsc and transformers. It may look like this:

const ts = require('ttypescript')
const fs = require('fs')
const tsconfig = require('./tsconfig.json')
onLoad({ filter: /*\.ts$/ }, async args => {
  let code = await fs.promises.readFile(args.path, 'utf8')
  let res = ts.transpileModule(code, tsconfig)
  return { contents: res.outputText }
})

[Fuzzyma]

But that would mean that I replace the ultra fast esbuild with a rather slow typescript, right?

[hyrious]

@Fuzzyma yes.

[Fuzzyma]

seems like their is no good solution then beside maybe using ts-auto-guard which will do the same thing but add the required transpiled files in an extra build step

[evanw]

Yes, it's true that doing this that way would likely be a big performance hit. The core of esbuild is only designed to make standard behavior fast. If you deviate from the standard way things work and still want to use esbuild, then the responsibility of making sure your modifications are fast is up to you.

You could potentially check to see if it's possible to implement this in SWC with some custom Rust code: https://swc.rs/. My understanding is that it has a TypeScript AST that is more intended for custom transformations like this. If you do this then you might be able to drop esbuild and use their bundler, or you could potentially use SWC as a preprocessing step to esbuild.

[Fuzzyma]

@evanw i wasn't aware that swc is doing more in that regard. I will definitely have a look. Thanks for the insight!

[evanw]

Closing because this question was answered.