如何在浏览器中使用打字稿？答案

【问题标题】：How to use typescript in browser?如何在浏览器中使用打字稿？
【发布时间】：2017-05-28 00:25:05
【问题描述】：

utility.ts

let books = [
    { id: 1, title: "the dark window", author: "krishna", available: true },
    { id: 2, title: "naked eye", author: "sydney", available: false },
    { id: 3, title: "half girlfriend", author: "chetan", available: true },
    { id: 4, title: "make my dreams", author: "salam", available: false }
];

export { books };

main-app.ts

import {books} from './utility';

let getAllBooks = (): void => {
    books.filter((val) => {
        console.log(val.author);
    })
}

如何在 Html 页面中访问 getAllBooks 功能？如果我不使用导出和导入，它工作得很好，但我必须使用它而不是将所有内容都写入一个文件。

请建议 [使用 amd 模块] 生成一个 JS 文件作为输出 [main.js]。在 chrome 控制台中出现以下错误。

[(index):13 Uncaught ReferenceError: getAllBooks is not defined 在 HTMLInputElement.onclick ((index):13)]

我的html页面

<html>
<title>Welcome</title>

<head>
    <script data-main="./js/main" src="./js/require.js"></script>
    <script src="./js/main.js"></script>

    <body>
        <div id="mytest"></div>
        <input type="button" value="Click!" id="btnClick" onclick="getAllBooks();" />


        <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    </body>
</head>

</html>

main.js

    define("utility", ["require", "exports"], function (require, exports) {
    "use strict";
    let books = [
        { id: 1, title: "the dark window", author: "krishna", available: true },
        { id: 2, title: "naked eye", author: "sydney", available: false },
        { id: 3, title: "half girlfriend", author: "chetan", available: true },
        { id: 4, title: "make my dreams", author: "salam", available: false }
    ];
    exports.books = books;
});
define("app", ["require", "exports", "utility"], function (require, exports, utility_1) {
    "use strict";
    let getAllBooks = () => {
        utility_1.books.filter((val) => {
            console.log(val.author);
        });
    };
});
//# sourceMappingURL=main.js.map

【问题讨论】：

能否给我们看一下内容输出的 main.js 文件？
我认为直接在 HTML 中混合模块加载器和事件定义是一个相当糟糕的主意...
@Hjort-e 我已经包含了 main.js 文件

标签： node.js typescript

【解决方案1】：

浏览器还不支持 javascript 模块。在他们这样做之前，您需要将 browserify 包含到您的开发工作流程中。 Browserify 将你的模块连接成一个浏览器友好的包。

Browserify 在打字稿工作流程中工作非常简单。如果你喜欢冒险，你可以看看其他打包工具，比如 WebPack、Rollup 或 SystemJs。

请注意，这并非特定于 TypeScript。在开发任何现代 javascript（es6 或 CommonJS modukes）时，您需要为浏览器捆绑模块。

【讨论】：

投反对票，因为问题中的示例已经使用了模块加载器，即 require.js。
@Martin 你能提供一个使用browserify的例子吗？
不是真的。很确定 Chrome 支持 es6 模块。
这个答案写于 2017 年 1 月 12 日，在 Chrome 支持 ES6 模块之前。事实上，这个答案仍然成立。如果你正在为 web 编写 typescript，你应该仔细研究一下 WebPack，或者一个在后台使用 WebPack 的工具。
2021年还是这样吗？

【解决方案2】：

我是 AMD 的新手，但看起来您只定义模块，从不调用/导入它们到站点范围。在本教程中，作者有一个引导文件作为应用程序的入口点，这似乎是您所缺少的：http://www.codebelt.com/typescript/typescript-amd-with-requirejs-tutorial/

【讨论】：

link 不工作

【解决方案3】：

将浏览器更新到最新版本（最新版本足以支持 ES2015 模块）
将 tsconfig.json target 更改为 es2015
将 tsconfig.json module 更改为 es2015
始终将 .js 扩展名添加到您的导入语句中
使用像 live-server 这样的 http 服务器来避免与 file:// 协议有关的 CORS 问题

奖励：将 tsconfig.json moduleResolution 显式设置为 node。如果您不使用外部库或 @types/* 包，则不需要这样做。

全部查看：https://github.com/SalathielGenese/ts-web

披露：我是它的作者。

【讨论】：

【解决方案4】：

我认为标题不正确，您真正想做的是在浏览器中运行 TypeScript 应用程序，这完全不同哟“在浏览器中运行 TypeScript，对吗？

在这种情况下，要开始使用 TypeScript，我建议您不要使用 require.js，而是添加类似打包工具的工具，例如 parcel、webpack、browserify、rollup 等工具。 parcel 超级简单：对于您的示例，1）删除所有脚本标签并仅添加以下内容：<script src="my/app.ts"> 然后使用parcel theFile.html“编译”该html或为生产构建：parcel build theFile.html

如果我是对的，请您更改这个问题的标题，因为它令人困惑和误导？谢谢。

现在，另一方面，如果你真的想像标题所说的那样运行 TypeScript，typescript 与浏览器完全兼容（.js 文件库是 node_modules/typescript/lib/typescript.js ）。只需将其作为另一个模块导入或在脚本标签中加载文件并使用编译器 API..

这个项目包含我对该主题的研究，包括几个工作示例和演示应用程序和一些工具：https://github.com/cancerberoSgx/typescript-in-the-browser

【讨论】：