TypeScript to JavaScript Converter Online

This TypeScript to JavaScript converter compiles or converts TS code into clean ES6 JS right in your browser. Paste, write, or upload TypeScript scripts, select transpilation and formatting settings, and obtain optimized vanilla JavaScript ready for copying or downloading, without any external transmission.

Key Features

  • Transpile TypeScript to JavaScript instantly in the browser
  • Select target ECMAScript version like ES5 or ES6 for compatibility
  • Enable inline source maps or strict mode for enhanced debugging and checks
  • Integrated JS formatter for debugging JavaScript
  • Processes locally in the browser, keeping your TypeScript secure

How to use this TypeScript to JS converter

  1. Enter, paste, or load your TypeScript into the source editor
  2. Choose preferences for module system, JSX mode, and beautification to suit your needs
  3. Press Convert TypeScript button to compile TS to JS code
  4. Review the produced JS in the result panel, format for clarity or compress for use, then duplicate or save the output

Why convert TS to JS

Converting TypeScript to JavaScript guarantees seamless operation across browsers and ecosystems, eases incorporation into current projects, and facilitates smooth upgrades to newer standards while maintaining code integrity and performance.

Key differences: TypeScript source vs compiled JavaScript

  • TypeScript adds types and interfaces for safety, removed in compilation
  • JavaScript runs natively everywhere without type annotations
  • Transpilation strips types and downlevels features to plain JS
  • Output JS can aim at ES3 through ESNext based on settings
  • TypeScript boosts development with checks, JS offers runtime simplicity
  • Source maps link errors back to TypeScript for better troubleshooting

Example 1: Simple typed function

Siple TS Code

Copy
function greet(name: string): string {
  return `Hello, ${name}!`;
}
console.log(greet("World"));

Converted JS Code

Copy
function greet(name) {
    return "Hello, " + name + "!";
}
console.log(greet("World"));

Example 2: Class with constructor

TypeScript Code

Copy
class Person {
    name: string;
    age: number;

    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }

    greet(): string {
        return `Hello, my name is ${this.name} and I am ${this.age} years old.`;
    }
}

const user = new Person("Alice", 25);
console.log(user.greet());

Converted JS Code

Copy
var Person = (function() {
    function Person(name, age) {
        this.name = name;
        this.age = age;
    }
    Person.prototype.greet = function() {
        return "Hello, my name is ".concat(this.name, " and I am ").concat(this.age, " years old.");
    };
    return Person;
}());
var user = new Person("Alice", 25);
console.log(user.greet());

Customization options

Below are the settings you can adjust to get the exact JS output you want after transpilation.

Option Default Description
Remove Comments True Do not emit comments to output.
Downlevel Iteration False Provide full support for iterables in ES5/ES3.
Experimental Decorators False Enable support for experimental decorators.
Incremental Compilation False Enable incremental compilation.
Inline Source Map False Include source maps inside output files.
JSX Mode Preserve Specify JSX code generation mode.
JSX Factory React.createElement Specify the JSX factory function to use when targeting React JSX.
JSX Fragment Factory React.Fragment Specify the JSX fragment factory function to use.
Module System CommonJS Specify module code generation.
Module Detection Auto Control whether a file is treated as a module.
Module Resolution Classic Determine how modules get resolved.
Preserve Const Enums False Do not erase const enum declarations in generated code.
Strict Mode False Enable all strict type-checking options.
ECMAScript Target ES3 Specify ECMAScript target version for output.
Indent Size 4 Number of spaces per indent level.
Indent Char Space Character used for indentation.
Use Tabs False Indent using tabs instead of spaces.
EOL LF End-of-line character for output.
Ending Newline False Add newline at the end of output.
Keep Newlines True Preserve existing line breaks.
Indent Level 0 Initial indentation depth.
Max Newlines 3 Maximum line breaks to preserve.
Space in () False Add space inside parentheses.
Empty () Space False Add space inside empty parentheses.
Anon Fn Space False Space before () in anonymous functions.
Named Fn Space False Space before () in named functions.
Brace Style Collapse Style of code block braces.
Break Chains False Put each method call on a new line.
No Chain Indent False Do not indent chained methods.
Keep Arrays False Preserve original array formatting.
Unescape False Unescape printable xNN strings.
Wrap Length 0 Wrap lines exceeding this length.
Comma First False Place commas at line start.
Operator Pos Before Newline Position of operators in wrapped lines.
Indent Empty Lines False Keep indentation on empty lines.

Best Practices

  • Keep TypeScript files in version control
  • Enable source maps for easier debugging
  • Format for development, minify for production
  • Lint compiled JS before project integration

Conclusion

Utilize this TypeScript to ES6 JavaScript converter to compile your TS to JS efficiently and securely. Set ECMAScript target and module options for tailored results, and retrieve functional vanilla JS instantly.