How to compile TypeScript code in the browser?

Question

Is it possible to run the TypeScript compiler in the browser for transpiling TS to JS 100% in the browser. The use case would be implementing an online TypeScript IDE that runs 100% client side and it has a "Play" button to execute the project. So I need to transpile the project to JavaScript in order for the browser to execute the code.

I presume it should be as simple as loading the relevant typescript JS files, creating an instance of the right class (compiler?) and calling a method or two.

What would be the means suitable to load the Compiler in the browser? Where is the TypeScript Compiler API Reference Documentation ? Where should I start digging in ?

This isn't asking for any specific tool, but ANY way to do this with this particular computer language, and thus is on topic.

Why would you want to do that? You should use TypeScript for development only, have a file watcher (or have a build script) to compile the ts file to js file when the files is changed, and load the compiled js to the browser (both in development and production). Since the compiler adds reference to the source map (compile it using the `--sourcemap` option) you'll be able to debug in the browser on the TypeScript file, so you get it all... — Nitzan Tomer, Apr 16 '14 at 10:18
For many reasons, but yes for production code you wouldn't normally want to. But some reasons could be building a playground like that on typescriptlang.org, or in building a web IDE, or web based compiler, or maybe a compiler than then copies files to servers via cloud services. In my case i'm just looking for a pithy example without the full burden of TSC to do compilation of a single file. My scenario wasn't actually in the browser, but in a PowerShell script hosting the Chakra JS engine, but the simplest way to get there was a simple browser based script. — klumsy, Apr 17 '14 at 04:30
A comment, because the Q is closed: You're looking for the transpile() method on the default exported module of the Typescript npm package. import * as TS from 'typescript'; TS.transpile(sourceTS) -> returns transpiled JS. https://github.com/Microsoft/TypeScript/blob/master/lib/typescript.d.ts#L4548 — NiloCK, Oct 15 '17 at 20:04
It's sad so many useful questions are closed as off-topic. You may ask about a string manipulation function as long as it is simple, like how to reverse a string. As soon as it is a complex function like transpile, it is off topic. — zupa, Aug 21 '18 at 09:20
This is what I have: a typescript playground in the browser https://cancerberosgx.github.io/typescript-in-the-browser/typescript-compiler/ BTW I'm sad you have closed this question, since this kind of questions, although incorrect, are one of the few places when beginers can get started with compiler API which has insufficient high level docs, yet, i hope. thanks — cancerbero, Oct 25 '18 at 03:02
@NitzanTomer are you 100% sure codepen compiles your ts code server side ? Now that IDEs in the web are more common I think this question is relevant given that ts is a language service and given editors like monaco :) — cancerbero, Oct 25 '18 at 03:41
I tried to answer this question here: https://stackoverflow.com/questions/46059313/dynamic-execution-of-typescript-in-the-browser/52981107#52981107 hope we can share more experiences and don't close that one too — cancerbero, Oct 25 '18 at 04:05
To @JeremyJStarcher and other voters, I don't understand why this is considered a library recommendation question, can you explain? — jrh, Dec 03 '18 at 19:16
@NiloCK I think you mean [this](https://github.com/Microsoft/TypeScript/blob/8ddb2b61d2c996ab442b282ab9b36195ed697c13/lib/typescript.d.ts#L5533)? Remember to specify a specific commit / tag when you link to Github, because as the source code changes the function, etc. you're talking about might not still be line 3,343 or whatever you linked to. — jrh, Dec 03 '18 at 19:19

basarat · Accepted Answer · 2020-01-16T22:20:15.873

26

You can use typescript-script : https://github.com/basarat/typescript-script

However do not do this in production as it is going to be slow.

You can use webpack (or a similar module bundler) to load npm packages in the browser.

edited Jan 16 '20 at 22:20

answered Apr 15 '14 at 07:08

basarat

261,912
58
460
511

Why would it be unsafe? – David Given Jan 17 '15 at 12:35
@DavidGiven I don't know why I thought that he will be serving TypeScript *input by the user*. So removed. Thanks! – basarat Jan 18 '15 at 00:05
4

For transpiling in the browser you don't need to do any hack - just include node_modules/typescript.js in your html file will allow you to use the COmpiler API. Here is a playground that transpile to js 100% in the browser : https://cancerberosgx.github.io/typescript-in-the-browser/typescript-compiler/#example=tsTranspilingProject1 – cancerbero Oct 25 '18 at 03:56
I re-wrote it to a working [up-to date lib](https://github.com/klesun/ts-browser) last night for same cause. It also resolves `import` dependencies now. – Klesun Jan 13 '20 at 15:15
Haha, @ArturKlesun, I [did the same thing](https://github.com/Hashbrown777/typescript-native)! Yours looks a bit more elegant (I flat-out did not allow circular dependencies), but how do you handle lib imports like `lib.dom.d.ts`? Is yours able to have [typescript embedded in the html](https://hashbrown777.github.io/typescript-native/react.html) as you would js too? It's so funny we did this a week apart on a topic that hadn't been touched for over a year – Hashbrown Jan 23 '20 at 04:00
Lol indeed =-D. And the question got re-opened, seems like it was my birthday yesterday... Answering your questions here: https://github.com/klesun/ts-browser/issues/1 – Klesun Jan 23 '20 at 09:01

score 24 · Answer 2 · edited Jun 08 '23 at 11:56

Transpiling ts to js is as simple as loading the typescriptServices.js file from typescript repo or npm, and using it's window.ts.transpile(tsCode)

JSFiddle

<script src="https://unpkg.com/typescript@4.9/lib/typescriptServices.js"></script>
<script>
const tsCode = 'let num: number = 123;';
const jsCode = window.ts.transpile(tsCode);
document.write(jsCode);
</script>

Outputs:

var num = 123;

You can also pass the ts compiler options object as second argument to ts.transpile() to specify whether output js should be es2020, es5, es6, and other stuff, though for meaning of values you'll likely have to dive into the source code.

Since this question got re-opened (just as planned >:D), I'm also re-posting my comment here.

@basarat's solution was great; even though his lib is outdated and abandoned, it helped me a lot in writing another, self-sufficient modern lib with support for sub-dependencies: ts-browser

Usage: (given you use relative paths in all your ts files)

<!-- index.html -->
<script type="module">
    import {loadModule} from 'https://klesun.github.io/ts-browser/src/ts-browser.js';
    loadModule('./index.ts').then(indexModule => {
        return indexModule.default(document.getElementById('composeCont'));
    });
</script>

// index.ts
import {makePanel} from './utils/SomeDomMaker'; // will implicitly use file with .ts extension

export default (composeCont) => {
    composeCont.appendChild(makePanel());
};

I couldn't find the compiler options that does type check. `window.ts.transpile('let num : number= "1232";', {noEmitOnError: true, strict: true})` But it wouldn't fail — viebel, Apr 04 '21 at 18:34
Looks like `ts.transpile`/`ts.transpileModule` only does transpilation without type checking [by design](https://github.com/microsoft/TypeScript/issues/29651#issuecomment-478782974). There are possibly some other methods in `window.ts` that would allow type checking, but finding that out would require [some research](https://github.com/microsoft/TypeScript/blob/3b919e2ab1ba5546141e6677b44211de6f7e8d11/lib/typescriptServices.d.ts#L2631)... — Klesun, Apr 05 '21 at 14:44

How to compile TypeScript code in the browser?

2 Answers2

Linked