Deno 允许在浏览器中直接运行 TypeScript-JavaScript中文网-JavaScript教程资源分享门户

最近，我看到了一个令开发者们兴奋的消息——Deno 终于允许在浏览器中直接运行 TypeScript 了。这一篇文章会为大家详细介绍 Deno 和 TypeScript 在浏览器中的运行以及如何使用他们。

什么是 Deno？

Deno 是一个安全的运行时环境，用来运行 JavaScript 和 TypeScript。Deno 不同于 Node.js，它不依赖于 npm，而是拥有自己的模块管理系统。此外，Deno 还支持多种 HTTP 标准库和测试工具，更加方便使用。

为什么要在浏览器中使用 TypeScript？

TypeScript 是 JavaScript 的超集，提供了强类型和更加易于维护、更加可读的代码。使用 TypeScript 可以大大减少在生产环境中出现的错误。同时，TypeScript 还具有更加严格的类型检查和更好的 IDE 集成。在浏览器中使用 TypeScript，可以提高代码的可读性和可维护性。

在浏览器中使用 Deno 和 TypeScript

在浏览器中使用 Deno 和 TypeScript，只需要在 HTML 中添加以下代码：

<script type="module">
    import { example } from "https://example.com/example.ts";
    example();
</script>

这里的 example() 函数是在 TypeScript 中编写的，它可以直接在浏览器中执行。需要注意的是，这种方式需要在服务器上运行 TypeScript，并通过 deno bundle 命令生成一个可引用的 JavaScript 文件。如果需要使用 TypeScript 的模块依赖管理，也可以使用 Module Worker API。

通过这种方式，我们可以通过 Deno 在浏览器中运行 TypeScript，将后端代码直接应用到前端，提高了代码重用率和开发效率。

使用 Deno 和 TypeScript 实现一个计算器

下面以一个计算器为例，演示 Deno 和 TypeScript 在浏览器中的应用。计算器具有加、减、乘、除四种运算方式。

首先，需要通过 Deno 安装必要的依赖：

deno install --allow-read --allow-net --allow-env https://deno.land/std/examples/welcome.ts

然后，我们创建一个 calculator.ts 文件：

// javascriptcn.com code example
// calculator.ts

export function add(a: number, b: number): number {
    return a + b;
}

export function subtract(a: number, b: number): number {
    return a - b;
}

export function multiply(a: number, b: number): number {
    return a * b;
}

export function divide(a: number, b: number): number {
    return a / b;
}

最后，我们可以在 HTML 中引用这个 calculator.ts 文件并调用内部的函数：

// javascriptcn.com code example
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Calculator</title>
    </head>
    <body>
        <h1>Calculator</h1>
        <input type="number" id="a">
        <input type="number" id="b">

        <button onclick="add()">Add</button>
        <button onclick="subtract()">Subtract</button>
        <button onclick="multiply()">Multiply</button>
        <button onclick="divide()">Divide</button>

        <p id="result"></p>
        <script type="module">
            import { add, subtract, multiply, divide } from "./calculator.ts";

            function getNumber(id: string): number {
                return parseInt((document.getElementById(id) as HTMLInputElement).value);
            }

            function setResult(result: number): void {
                document.getElementById("result")!.textContent = String(result);
            }

            function add(): void {
                setResult(add(getNumber("a"), getNumber("b")));
            }

            function subtract(): void {
                setResult(subtract(getNumber("a"), getNumber("b")));
            }

            function multiply(): void {
                setResult(multiply(getNumber("a"), getNumber("b")));
            }

            function divide(): void {
                setResult(divide(getNumber("a"), getNumber("b")));
            }
        </script>
    </body>
</html>

通过这个例子，我们可以看到 Deno 和 TypeScript 在浏览器中的应用，可以方便地使用后端代码，提高代码重用率和开发效率。

结论

在浏览器中使用 Deno 和 TypeScript，可以方便地将后端代码应用到前端，提高代码重用率和开发效率。通过本文的介绍和实例，相信大家已经了解了 Deno 和 TypeScript 在浏览器中的运行以及如何使用他们。\

更多详情请参阅 Deno 官网。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6737f472317fbffedf0d5b81