Question

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未捕获的ReferenceError：未定义getAllBooks 在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

Answer 1

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

Browserify非常简单，可以在打字稿工作流程中使用。如果您喜欢冒险，可以查看其他捆绑包，如WebPack，Rollup或SystemJs。

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

Answer 2

将浏览器更新到最新版本（足够支持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

揭露：我是它的作者。

Answer 3

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

Answer 4

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

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

如果我是对的，您是否可以更改此问题的标题，因为这会造成混淆和误导？谢谢。

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

该项目包含我对该主题的研究，并提供了一些工作示例和演示应用程序以及一些工具：https://github.com/cancerberoSgx/typescript-in-the-browser

Answer 5

您可以使用typescript编译器将.ts文件编译为.js文件，然后将其包含在您的页面中。

这样的事情：

typescript my-file.ts

在你的html文件中：

<html>
  <head>
  </head>
  <body>
    <script src="my-file.js"></script>
  </body>
</html>

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

5 个答案: