feat(packages/sui-js-compiler): typescript poc

[andresz1]

TypeScript Support Experiment

This PR is an experiment to enable TypeScript support in sui-js-compiler.

• Do not cause any breaking change
• You will be able to keep working as you are
• Not forcing anyone to use TypeScript
• Keep the same compilation time if TypeScript is not used

Try it out

# Install beta package
npm i @s-ui/[email protected]

# Use the compiler as always
sui-js-compiler ./index.js

# Support TypeScript but won't generate type declarations
sui-js-compiler ./index.tsx

# Support TypeScript and generate type declarations
sui-js-compiler --ts ./index.tsx

TSC

The TypeScript Compiler (also known as tsc) is the backbone of many bundlers, plugins, and tools that work with TypeScript. The TypeScript Compiler can work in two ways. It either transpile the code to a specific target and checks types or only checks types.

SWC

SWC stands for Superfast JavaScript/TypeScript Compiler. It is a tool, created in Rust, that has one job – to transpile the code from TS/ES to a specific target. It won’t check the types (at least not yet), but because of that, it is much faster than tsc.

function foo(): string {
  return 1;
}

foo();

The code shown above will not throw any error during compilation time (see https://github.com/swc-project/swc/issues/126).

The SWC creator kdy1 announced that he will be leading an effort to create a faster alternative to tsc to perform Type Checking known as tsc-go written in GO backed by Vercel. tsc-go will be incorporated to swc when is ready.

Libraries

Since we do not want to cause any breaking change and keep our libraries working as they were JavaScript files need to be exposed in our library folder (/lib). However, in order to provide TypeScript support to the users of our libraries type declarations need to provided. Type Declarations are normally defined in equivalent .d.ts files. For example, for a index.tsx file, a index.js and a index.d.ts will need to be generated.

In the package.json as we have use main field points to the entry point of our application or library the types fields tells where to find the type declarations.

{
  "name": "ts-example",
  "version": "1.0.0",
  "description": "This is just an example",
  "main": "lib/index.js",
  "types": "lib/index.d.ts",
  "files": [
    "/lib"
  ]
}

Approaches

SWC

Enable TypeScript support for SWC

Pros:

• Fast ⚡
• Types could be used by Text Editor or IDE

Cons:

• No type checking during build time
• No type declarations

SWC + tsc

Enable TypeScript support for SWC and generate type declarations using TypeScript Compiler. Execution is made in parallel

Pros:

• Types could be used by Text Editor or IDE
• Type checking during build time
• Type declarations

Cons:

• Slow

tsc

Use TypeScript Compiler to transpile and generate type declarations

Pros:

• Types could be used by Text Editor or IDE
• Type checking during build time
• Type declarations

Cons:

• Slow
• Different compiler to the one we are already using

Conclusions

We believe that the right approach would be to use SWC + tsc since:

• We are already using SWC to transpile our code. Even this point is not that important, in the past changing from babel to swc generated some bugs
• We want type checking and declarations
• SWC is fast and in the long run will have tsc-go integrated

Sources

• https://tsh.io/blog/how-to-speed-up-your-typescript-project/
• https://engineering.telia.no/blog/we-exchanged-babel-tsc-for-swc-and-it-was-worth-it