如果我想使用像 jQuery 这样的 js 库,在了解 TypeScript 模块的工作原理之前,我会简单地添加一个引用该库的 script
标签,但现在我正在使用 TypeScript我经常找到这样的例子:
import * as $ from 'jquery'
但是 jQuery 不是 TypeScript 模块,那么它是如何工作的呢?我应该如何向我的模块添加外部非 typescript 库?
编辑#1
tsconfig.json
明确告诉 typescript 使用 AMD 格式(我选择这个而不是 commonjs
因为我读到因为 AMD 异步加载模块,它更适合 web 应用程序)
{
"compilerOptions": {
"sourceMap": false,
"target": "es5",
"module": "amd",
"outDir": "Scripts"
},
"exclude": [
"node_modules",
"wwwroot"
]
}
要安装类型定义,我使用 typings
typings install dt~jquery --global --save
在提到我实际使用的内容之后,我不明白的是,当我在 require.js
加载
<script data-main="Scripts/app/app" src="Scripts/require.js"></script>
我尝试在 require.js
的脚本标签之前和之后为 jquery.js
文件添加脚本标签,但没有成功。那么我应该如何告诉 require.js
“我需要这个 x 文件,去帮我加载它”?
我问这个是因为如果我正确理解类型定义的目的,它们的存在只是为了给我们提供类型检查,仅此而已,我们仍然需要添加我们想要使用的实际库。
编辑 #2
所以最后这就是我最终做的:
I) 根据此页面 http://requirejs.org/docs/api.html#data-main , data-main
仅适用于页面只有一个主入口点的情况,当你需要其他js文件时它会失败,所以应该使用以下配置:
<script src="~/Scripts/require.js"></script>
<script>
require.config({
paths: {
"lodash": "Scripts/lodash"
}
});
require(["Scripts/app/js/app"]);
</script>
在这里,我明确告诉 require.js 在哪里可以找到我想使用的库的源代码,在本例中是 lodash.js
。只有完成所有路径映射后,我才指示 require 加载 app.js
二) app.ts
/// <reference path="../../typings/index.d.ts" />
import * as _ from "lodash";
console.log('Using Lodash: ' + _.snakeCase("For Whom the Bells Toll");
要使类型定义正常工作,您必须包含一个reference
标记
就是这样。
要测试是否一切正常,我所要做的就是检查控制台并查看一切是否按预期工作:
有一件事我还不是很清楚,所有的魔法是如何在幕后运作的,但是看看为 app.js 生成的 js 代码,我猜第三个依赖 "lodash " 在 require.config
define(["require", "exports", "lodash"], function (require, exports, _) {
"use strict";
console.log('Using Lodash: ' + _.snakeCase("For Whom the Bells Toll"));
});
哦,还有最后一件事,如果您不想在需要使用 d.ts
时在 ts 文件中包含 reference
标签文件,您可以在 tsconfig.json
文件中添加 index.d.ts
的路径,如下所示:
{
"compilerOptions": {
"sourceMap": false,
"target": "es5",
"module": "amd",
"outDir": "js"
},
"include": [
"src/**/*.ts",
"../typings/index.d.ts"
]
}
最佳答案
首先,我要指出 TypeScript 不会强制您将 jQuery 用作模块。从技术上讲,您可以将其用作全局。
你说得对,jQuery 不是作为 TypeScript 模块编写的。但有两点需要注意:
- jQuery 是以一种格式编写的,因此它可以在 CommonJS、AMD/Require.js 等模块系统中使用。由于 TypeScript 覆盖了 ES6 模块以抽象出这些系统,因此它更易于使用。
- 不是用 TypeScript 编写的库可以使用 TypeScript 声明文件(也称为
.d.ts
文件)来描述。这些文件告诉 TypeScript 已经存在的 JavaScript 代码,以便您可以获得更好的工具和错误检测。
(2) 即使您不决定使用模块也适用。但是通过这种组合,您可以使用 TypeScript 以您指定的方式使用 jQuery。
首先,让我们获取 jQuery 的声明文件:
npm install -S @types/jquery
马上,您应该能够在 TypeScript 中引用 jQuery。如果没有,请添加 "jquery"
到 "types"
在你的字段 tsconfig.json
如下:
{
"compilerOptions": {
"types": ["jquery"]
}
}
此时,只要您的文件不使用任何导入/导出,您就可以像以前一样使用 jQuery。
如果您这样做,请确保您仍然使用 <script>
在 HTML 中为 jQuery 标记。
现在,您仍然可以决定使用模块 - 在这种情况下,这会变得更加复杂,您需要选择要使用的模块系统。
一般来说,在新的 JavaScript 中使用模块被认为是最佳实践,但它可能让人感觉有点不知所措。这不是 TypeScript 的问题,而是生态系统中的实践如何围绕模块浮出水面的问题。
如果您使用的是 Webpack 或 Browserify,则添加 "module": "commonjs"
到你的编译器选项 tsconfig.json
.然后你就可以写了
npm install -S jquery
Webpack 使用 ts-loader
会处理剩下的事情。参见 our guide here了解如何设置 Webpack。请注意,在链接设置中,您仍然需要使用 <script>
您决定添加到 externals
的任何库的标签字段。
如果您使用的是 Require.js,请添加 "module": "amd"
tsconfig.json
中的编译器选项. Require.js 需要一些配置才能开始,但我们有 a guide here使用 AMD 模块。
你必须让 Require.js 知道应该将 jQuery 的导入重定向到哪里:
这可以自己写.ts
名为 require-config.ts
的文件
declare var require: any;
require.config({
paths: {
"jquery": "Scripts/externals/jquery-3.1.1",
}
});
然后您可以将适当的脚本标签添加到您的页面:
<script src="./Scripts/externals/require.js"></script>
<script src="./Scripts/app/require-config.js"></script>
<script>
require(["Scripts/app/app"]);
</script>
关于typescript - 如何正确地将 .js 库添加到我的应用程序,以便我可以将它们导入 TypeScript 模块,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40443088/