TypeScript to JavaScript: When and How to Strip Types

Why Strip Types from TypeScript?

TypeScript's static typing enhances code quality and developer productivity, but there are scenarios where stripping types becomes necessary:

• Node Scripts: Many Node.js applications may not require TypeScript, especially if they are small scripts or utilities.
• Browsers without Bundler: If you're targeting browsers that do not support TypeScript directly, you'll need to convert your TypeScript files to standard JavaScript.
• Legacy Consumers: Older applications or libraries may only accept plain JavaScript, making type conversion essential.

Using the TypeScript Compiler (tsc)

The most straightforward way to convert TypeScript to JavaScript is by using the TypeScript compiler, known as tsc. Here’s how to do it:

Setup TypeScript Compiler

First, ensure you have TypeScript installed in your project:

npm install -D typescript

Basic Conversion Command

To convert a TypeScript file (for example, script.ts) to JavaScript, run:

npx tsc script.ts

This will generate a script.js file in the same directory.

Configure TypeScript Options

You can customize the behavior of tsc by creating a tsconfig.json file. Here’s a basic configuration:

{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "outDir": "./dist"
    }
}

This configuration specifies that TypeScript should compile to ES5 and output files in a dist directory.

Using esbuild for Fast Conversion

esbuild is known for its speed and efficiency in building JavaScript projects. It can also handle TypeScript conversion seamlessly.

Installing esbuild

Install esbuild using npm:

npm install esbuild --save-dev

Conversion Command

To convert a TypeScript file to JavaScript, run the following command:

npx esbuild script.ts --outfile=script.js

This command will quickly compile the TypeScript file into JavaScript.

Configuration Options

You can also configure esbuild to handle various scenarios. For example, to set the target environment:

npx esbuild script.ts --outfile=script.js --target=es6

Using SWC for Optimized Builds

SWC (Speedy Web Compiler) is another excellent tool for converting TypeScript to JavaScript, offering high performance and a rich feature set.

Installing SWC

To use SWC in your project, install it via npm:

npm install @swc/core @swc/cli --save-dev

Basic Conversion Command

Convert a TypeScript file to JavaScript with SWC using:

npx swc script.ts -o script.js

SWC Configuration File

You can create a configuration file named .swcrc to manage your settings:

{
    "jsc": {
        "parser": {
            "syntax": "typescript"
        },
        "target": "es6"
    }
}

Examples of Output

Here are some examples of how the output might look after conversion:

TypeScript Example

const greet = (name: string): string => {
    return `Hello, ${name}`;
};

JavaScript Output

const greet = (name) => {
    return `Hello, ${name}`;
};

The type annotations are removed, resulting in cleaner JavaScript suitable for any environment.

Additional Conversion Tools

Aside from TypeScript to JavaScript, JS2TS provides a suite of other tools that can assist in different conversion needs:

• JavaScript to TypeScript
• JSON to TypeScript
• JS object to JSON
• JSON to Zod schema