- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用?
- database - RESTful URI 是否应该公开数据库主键?
如果我想使用像 jQuery 这样的 js 库,在了解 TypeScript 模块的工作原理之前,我会简单地添加一个引用该库的 script
标签,但现在我正在使用 TypeScript我经常找到这样的例子:
import * as $ from 'jquery'
但是 jQuery 不是 TypeScript 模块,那么它是如何工作的呢?我应该如何向我的模块添加外部非 typescript 库?
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 文件,去帮我加载它”?
我问这个是因为如果我正确理解类型定义的目的,它们的存在只是为了给我们提供类型检查,仅此而已,我们仍然需要添加我们想要使用的实际库。
所以最后这就是我最终做的:
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 模块编写的。但有两点需要注意:
.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/
我正在通过 labrepl 工作,我看到了一些遵循此模式的代码: ;; Pattern (apply #(apply f %&) coll) ;; Concrete example user=> (a
我从未向应用商店提交过应用,但我会在不久的将来提交。 到目前为止,我对为 iPhone 而非 iPad 进行设计感到很自在。 我了解,通过将通用PAID 应用放到应用商店,客户只需支付一次就可以同时使
我有一个应用程序,它使用不同的 Facebook 应用程序(2 个不同的 AppID)在 Facebook 上发布并显示它是“通过 iPhone”/“通过 iPad”。 当 Facebook 应用程序
我有一个要求,我们必须通过将网站源文件保存在本地 iOS 应用程序中来在 iOS 应用程序 Webview 中运行网站。 Angular 需要服务器来运行应用程序,但由于我们将文件保存在本地,我们无法
所以我有一个单页客户端应用程序。 正常流程: 应用程序 -> OAuth2 服务器 -> 应用程序 我们有自己的 OAuth2 服务器,因此人们可以登录应用程序并获取与用户实体关联的 access_t
假设我有一个安装在用户设备上的 Android 应用程序 A,我的应用程序有一个 AppWidget,我们可以让其他 Android 开发人员在其中以每次安装成本为基础发布他们的应用程序推广广告。因此
Secrets of the JavaScript Ninja中有一个例子它提供了以下代码来绕过 JavaScript 的 Math.min() 函数,该函数需要一个可变长度列表。 Example:
当我分别将数组和对象传递给 function.apply() 时,我得到 NaN 的 o/p,但是当我传递对象和数组时,我得到一个数字。为什么会发生这种情况? 由于数组也被视为对象,为什么我无法使用它
CFSDN坚持开源创造价值,我们致力于搭建一个资源共享平台,让每一个IT人在这里找到属于你的精彩世界. 这篇CFSDN的博客文章ASP转换格林威治时间函数DateDiff()应用由作者收集整理,如果你
我正在将列表传递给 map并且想要返回一个带有合并名称的 data.frame 对象。 例如: library(tidyverse) library(broom) mtcars %>% spl
我有一个非常基本的问题,但我不知道如何实现它:我有一个返回数据框,其中每个工具的返回值是按行排列的: tmp<-as.data.frame(t(data.frame(a=rnorm(250,0,1)
我正在使用我的 FB 应用创建群组并邀请用户加入我的应用群组,第一次一切正常。当我尝试创建另一个组时,出现以下错误: {"(OAuthException - #4009) (#4009) 在有更多用户
我们正在开发一款类似于“会说话的本”应用程序的 child 应用程序。它包含大量用于交互式动画的 JPEG 图像序列。 问题是动画在 iPad Air 上播放正常,但在 iPad 2 上播放缓慢或滞后
我关注 clojure 一段时间了,它的一些功能非常令人兴奋(持久数据结构、函数式方法、不可变状态)。然而,由于我仍在学习,我想了解如何在实际场景中应用,证明其好处,然后演化并应用于更复杂的问题。即,
我开发了一个仅使用挪威语的应用程序。该应用程序不使用本地化,因为它应该仅以一种语言(挪威语)显示。但是,我已在 Info.plist 文件中将“本地化 native 开发区域”设置为“no”。我还使用
读完 Anthony's response 后上a style-related parser question ,我试图说服自己编写单体解析器仍然可以相当紧凑。 所以而不是 reference ::
multicore 库中是否有类似 sapply 的东西?还是我必须 unlist(mclapply(..)) 才能实现这一点? 如果它不存在:推理是什么? 提前致谢,如果这是一个愚蠢的问题,我们深表
我喜欢在窗口中弹出结果,以便更容易查看和查找(例如,它们不会随着控制台继续滚动而丢失)。一种方法是使用 sink() 和 file.show()。例如: y <- rnorm(100); x <- r
我有一个如下所示的 spring mvc Controller @RequestMapping(value="/new", method=RequestMethod.POST) public Stri
我正在阅读 StructureMap关于依赖注入(inject),首先有两部分初始化映射,具体类类型的接口(interface),另一部分只是实例化(请求实例)。 第一部分需要配置和设置,这是在 Bo
我是一名优秀的程序员,十分优秀!