Hur kompilera TypeScript-kod i webbläsaren?

Är det möjligt att köra TypeScript-kompilatorn i webbläsaren för att transpila TS till JS 100% i webbläsaren. Användningsfallet skulle vara att implementera en online TypeScript-IDE som körs 100% på klientsidan och den har en "Play"-knapp för att köra projektet. Så jag behöver transpilera projektet till JavaScript för att webbläsaren ska kunna köra koden.

Jag antar att det borde vara så enkelt som att ladda de relevanta TypeScript JS-filerna, skapa en instans av rätt klass (kompilator?) och anropa en eller två metoder.

Vilka medel skulle vara lämpliga för att ladda kompilatorn i webbläsaren? Var finns TypeScript Compiler API-referensdokumentation? Var borde jag börja gräva?

Det här handlar inte om att be om något specifikt verktyg, utan om NÅGOT sätt att göra detta med just detta programspråk, och är därför relevant.

Svar #1

Att transpila ts till js är lika enkelt som att ladda typescript.js-filen från typescript-repot eller npm och använda dess window.ts.transpile(tsCode)

JSFiddle

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

Utdata :

var num = 123;

Du kan också skicka ts-kompilatorns alternativobjekt som andra argument, till exempel:

ts.transpile(tsxCode, { jsx: "react", target: "es2015" });

Men för betydelsen av värden kommer du troligen att behöva dyka in i källkoden.

Eftersom den här frågan öppnades igen (precis som planerat >:D), postar jag också min kommentar här igen.

@basarats lösning var fantastisk; även om hans bibliotek är föråldrat och övergivet, hjälpte det mig mycket att skriva ett annat, självständigt modernt bibliotek med stöd för underberoenden: ts-browser

Användning: (givet att du använder relativa sökvägar i alla dina ts-filer)

<!-- index.html -->
<script type="module">
    import {loadModule} from 'https://klesun.github.io/ts-browser/src/ts-browser.js';
    // language=file-reference
    const entryScriptPath = './index.ts';
    loadModule(entryScriptPath).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());
};

Svar #2

Du kan använda typescript-script : https://github.com/basarat/typescript-script

Men gör inte detta i produktion eftersom det kommer att bli långsamt.

Du kan använda webpack (eller en liknande modulbuntare) för att ladda npm-paket i webbläsaren.

Relaterade artiklar