typescript 如何在浏览器中使用打字稿？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/41620921/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to use typescript in browser?
提问by KrishOnline
utility.ts
实用程序.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);
})
}
How can I access the getAllBooks functiion in a Html page? If I don't use export and import it works perfectly fine but I have to use it instead of writing everything into one file.
如何在 Html 页面中访问 getAllBooks 功能？如果我不使用导出和导入，它工作得很好，但我必须使用它而不是将所有内容都写入一个文件。
Please advice [using amd module] to generate one JS file as output [main.js]. Getting the below error in the chrome console.
请建议[使用amd模块]生成一个JS文件作为输出[main.js]。在 chrome 控制台中出现以下错误。
[(index):13 Uncaught ReferenceError: getAllBooks is not defined at HTMLInputElement.onclick ((index):13)]
[(index):13 Uncaught ReferenceError: getAllBooks is not defined at HTMLInputElement.onclick ((index):13)]
My html page
我的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
回答by Salathiel Genèse
- Update browser to recent one (recent enough to support ES2015 module)
- Change tsconfig.json
targettoes2015 - Change tsconfig.json
moduletoes2015 - Always add .jsextension to your import statements
- Use an http server like live-server to avtheitroad CORS concerns with file:// protocol
- 将浏览器更新到最近的（最近足以支持 ES2015 模块）
- 将tsconfig.json更改
target为es2015 - 将tsconfig.json更改
module为es2015 - 始终在导入语句中添加.js扩展名
- 使用像 live-server 这样的 http 服务器来避免使用 file:// 协议的 CORS 问题
BONUS:Explicitly set tsconfig.jsonmoduleResolutionto node. This is not necessary if you don't use external libraries or @types/* packages.
奖励：将tsconfig.json显式设置moduleResolution为node. 如果您不使用外部库或 @types/* 包，则这不是必需的。
See it altogether at : https://github.com/SalathielGenese/ts-web
请在以下位置完全查看：https: //github.com/SalathielGenese/ts-web
Disclosure : I'm its author.
披露：我是它的作者。
回答by Martin
Browsers do not yet support javascript modules. Until they do you will need to include browserify into your development workflow. Browserify concatenates your modules into a browser friendly bundle.
浏览器尚不支持 javascript 模块。在他们这样做之前，您需要将 browserify 包含到您的开发工作流程中。Browserify 将您的模块连接成一个浏览器友好的包。
Browserify is very simple to get working in a typescript workflow. If you are feeling adventurous you can look at other bundlers like WebPack, Rollup or SystemJs.
Browserify 在打字稿工作流中工作非常简单。如果您喜欢冒险，您可以查看其他打包工具，如 WebPack、Rollup 或 SystemJs。
Note, this is not specific to TypeScript. When developing any modern javascript (es6 or CommonJS modukes) you will need to bundle modules for the browser.
请注意，这不是 TypeScript 特有的。在开发任何现代 javascript（es6 或 CommonJS modukes）时，您需要为浏览器捆绑模块。
回答by Hjort-e
Im new to AMD but it looks like you only define the modules, never invoke/import them to the sites scope. In this tutorial the author has a bootstrapping file that acts as entry point for an app which seems to be what you're missing: http://www.codebelt.com/typescript/typescript-amd-with-requirejs-tutorial/
我是 AMD 的新手，但看起来您只定义了模块，从不调用/将它们导入到站点范围。在本教程中，作者有一个引导文件，它充当应用程序的入口点，这似乎是您所缺少的：http: //www.codebelt.com/typescript/typescript-amd-with-requirejs-tutorial/
回答by cancerbero
I think the title is incorrect and what you really trying to do is running TypeScript applications in te browser which is totally different yo "Run TypeScript in the browser, right?
我认为标题不正确，您真正想做的是在浏览器中运行 TypeScript 应用程序，这与“在浏览器中运行 TypeScript 完全不同，对吧？
In that case to get started with TypeScript I recommend you to not use require.js add instead a bundler-like tool like a tool like parcel, webpack, browserify, rollup. parcel is super easy : For your example, 1) remove ALL script tags and add only the following: <script src="my/app.ts">then "compile" that html with parcel theFile.htmlor build for production : parcel build theFile.html
在这种情况下，要开始使用 TypeScript，我建议您不要使用 require.js，而是添加一个类似打包器的工具，例如 Parcel、webpack、browserify、rollup 之类的工具。包裹非常简单：对于您的示例，1）删除所有脚本标签并仅添加以下内容：<script src="my/app.ts">然后“编译”该 htmlparcel theFile.html或构建用于生产：parcel build theFile.html
if I was right, could you please change the title of this question since is confusing and misleading ? thanks.
如果我是对的，您能否更改这个问题的标题，因为它令人困惑和误导？谢谢。
Now, on the other side, If you really want to run TypeScript as the title say, typescript is fully compatible with the browser (the .js file library is node_modules/typescript/lib/typescript.js ). just import it as another module or load the file in a script tag and use the Compiler API..
现在，另一方面，如果你真的想像标题所说的那样运行 TypeScript，那么 typescript 与浏览器完全兼容（.js 文件库是 node_modules/typescript/lib/typescript.js）。只需将其作为另一个模块导入或将文件加载到脚本标记中并使用编译器 API..
This project contains my research on the topic with several working examples and demo apps and some tools: https://github.com/cancerberoSgx/typescript-in-the-browser
该项目包含我对该主题的研究以及几个工作示例和演示应用程序以及一些工具：https: //github.com/cancerberoSgx/typescript-in-the-browser
