HTMLファイルでもTypeScriptを実行する方法

TypeScript

Posted at 2024-07-30

実行時にコンパイルするようにします。
ただしちょっとコンパイルに時間かかるので、実用的ではないです。開発用では使えるかも。


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TypeScript CDN Example</title>
    <!-- TypeScript CDN -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/typescript/4.5.5/typescript.min.js"></script>
</head>
<body>
    <h1>TypeScript CDN Example</h1>
    <!-- TypeScriptコードを記述 -->
    <script id="ts-code" type="text/typescript">
        // TypeScriptコードをここに書く
        const message: string = "Hello, TypeScript with CDN!";
        document.body.innerHTML += `<p>${message}</p>`;
    </script>
    <!-- TypeScriptをJavaScriptに変換して実行 -->
    <script>
        window.onload = () => {
            const tsCode = document.getElementById('ts-code').textContent;
            const jsCode = ts.transpile(tsCode);
            eval(jsCode);
        };
    </script>
</body>
</html>

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up