Member-only story
text/typescript
1 min readJan 5, 2024
You can now 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@5.3.3"></script>
<script defer src="https://cdn.jsdelivr.net/npm/text-typescript@1.3.0"></script>It uses the text/typescript library which was written specifically for the purpose.
Here is a complete working HTML containing TypeScript that you can copy.
<!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@5.3.3"></script>
<script defer src="https://cdn.jsdelivr.net/npm/text-typescript@1.3.0"></script>
</head>
<body>
<div id="root"></div>
</body>
</html>
