text-typescript
v1.3.0
Published
Use TypeScript directly in HTML Script tags
Downloads
14
Readme
text/typescript
You can use TypeScript directly in HTML Script tags.
<script type="text/typescript">
// Your TypeScript code here
</script>And to make it work, also load the dependencies.
<script src="https://cdn.jsdelivr.net/npm/typescript@latest"></script>
<script defer src="https://cdn.jsdelivr.net/npm/text-typescript@latest"></script>Example,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>"text/typescript" example</title>
<meta name="description" content="Transpiling and executing TypeScript in the browser" />
<style>
body {
overflow: hidden;
margin: 0px;
font-size: 15vw;
}
</style>
<script type="text/typescript">
function foo(bar: string) {
return "Hello " + bar;
}
let baz = "World!";
document.getElementById("root").innerHTML = foo(baz);
</script>
<script src="https://cdn.jsdelivr.net/npm/typescript@latest"></script>
<script defer src="https://cdn.jsdelivr.net/npm/text-typescript@latest"></script>
</head>
<body>
<div id="root"></div>
</body>
</html>Working Example : editor.sbcode.net
Functionality Supported
CTRL+click to open links in new tab/window
| | | | | ------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------ | | Common Types | Working Example | ✅ | | Classes | Working Example | ✅ | | Interfaces | Working Example | ✅ | | Extending Classes | Working Example | ✅ | | Abstract Classes | Working Example | ✅ | | Access Modifiers | Public Private Protected | ✅✅❌ | | Static Members | Working Example | ✅ | | ES6 Imports/Exports | Working Example | ✅* |
* : Caveat. ES6 Imports and Exports work if you follow some rules.
- Create multiple
text/typscripttags, with theidof the module name. - Order the
text/typscripttags in compilation order. - The final
text/typscripttag will be the entry point. Don't name it with anyid. Any precedingtext/typscripttags that have been id'd will be setup as modules in memory via animportmapcontaining multiple data URLs. - See the working example below.
ES6 Import/Export Working Example : https://editor.sbcode.net/433fc06b2282985f8bca604aa4dd58688510ca16
For anything marked as ❌, it is better to use TypeScript in a desktop IDE, e.g., VSCode, since you get working intellisense, ability to import types, and type checking as you type.
Compiling/transpiling TypeScript in the browser is just for fun. Don't treat it too seriously.