Javascript 如何将 JQuery 导入 Typescript 文件？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/43783307/
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 import JQuery into a Typescript file?
提问by Tim Hutchison
Update
更新
No import was required. Instead, I needed to add a reference to the top of the file. So the first line of my WebAPI.js should have been /// <reference path ="../typings/jquery/jquery.d.ts"/>instead of import { $ } from '../jquery-3.1.1';
不需要导入。相反，我需要添加对文件顶部的引用。所以我的 WebAPI.js 的第一行应该是/// <reference path ="../typings/jquery/jquery.d.ts"/>而不是import { $ } from '../jquery-3.1.1';
I am trying to import jQuery to use in a Typescript file, but I am receiving a variety of errors with everything I try. I followed the solutions hereand here, but without any luck.
我正在尝试导入 jQuery 以在 Typescript 文件中使用，但是我尝试的所有操作都收到了各种错误。我在这里和这里遵循了解决方案，但没有任何运气。
tsconfig.json
配置文件
{
"compilerOptions": {
"removeComments": true,
"preserveConstEnums": true,
"out": "Scripts/CCSEQ.Library.js",
"module": "amd",
"sourceMap": true,
"target": "es5",
"allowJs": true
}
WebAPI.js
WebAPI.js
import { $ } from '../jquery-3.1.1';
export class ExpenseTransaction extends APIBase {
constructor() {
super();
}
Get(): void {
let expenses: Array<Model.ExpenseTransaction>;
let self = this;
$.ajax({
url: this.Connection,
type: "GET",
contentType: "application/json",
dataType: "json",
success: function (data: any): void {
expenses = self.ConvertToEntity(data.value);
},
error: function (data: any): void { console.log(data.status); }
});
};
}
I have also tried import * as $ from '../jquery.3.1.1'
我也试过 import * as $ from '../jquery.3.1.1'
Errors
错误
Module jquery-3.1.1 has no exported member $Property ajax does not exist on type (selector: any, context: any) => any
Module jquery-3.1.1 has no exported member $Property ajax does not exist on type (selector: any, context: any) => any
采纳答案by Tim Hutchison
An import is not required. Instead, add a reference to the Typescript definition file the top of the file. So the first line of the WebAPI.jsshould be
不需要导入。相反，在文件顶部添加对 Typescript 定义文件的引用。所以第一行WebAPI.js应该是
/// <reference path ="../typings/jquery/jquery.d.ts"/>
instead of
代替
import { $ } from '../jquery-3.1.1';
According to the DefinitelyTypedwiki:
根据绝对类型维基：
A TypeScript declaration file is way of defining the types, functions and parameters in an external third-party JavaScript library. By using a declaration file in your TypeScript code will enable Intellisense and type checking against the external library you are using.
TypeScript 声明文件是在外部第三方 JavaScript 库中定义类型、函数和参数的方式。通过在您的 TypeScript 代码中使用声明文件，将启用 Intellisense 并针对您正在使用的外部库进行类型检查。
jquery.d.tsis a part of the DefinitelyTyped Libraryfound on GitHub. Definitely Typed can be include in Visual Studio projects via the NuGet Package Manager.
jquery.d.ts是在 GitHub 上找到的绝对类型库的一部分。绝对类型可以通过 NuGet 包管理器包含在 Visual Studio 项目中。
回答by Marco Maldonado
You have to import it as import * as $ from "jquery";, according to typescript's documentation, and jquery's definition filethe module is defined as an ambient module:
import * as $ from "jquery";根据 typescript 的文档和jquery 的定义文件，您必须将其导入为，该模块被定义为环境模块：
declare module "jquery" {
export = $;
}
According to this:
根据这个：
Ambient declarations is a promise that you are making with the compiler. If these do not exist at runtime and you try to use them, things will break without warning.
环境声明是您对编译器做出的承诺。如果这些在运行时不存在并且您尝试使用它们，则事情将毫无预警地中断。
回答by zahafyou
do this :after installing jquery with npm or used with cdn
这样做：在使用 npm 安装 jquery 或与 cdn 一起使用之后
first:
第一的：
npm install @types/jquery --save-dev
and after:
之后：
import * as $ from 'jquery';
import * as $ from 'jquery';
回答by Brian MacKay
Tim's solution using the reference compiler directive works, however there is an easier way now.
Tim 使用参考编译器指令的解决方案有效，但现在有一种更简单的方法。
In tsconfig.json, if you set typeRoots, you don't need to do anything at all in your .ts files. TypeScript does the work for you.
在 tsconfig.json 中，如果你设置了 typeRoots，你就不需要在你的 .ts 文件中做任何事情。TypeScript 为您完成工作。
How does it work?
它是如何工作的？
In my solution, I pull in all my @types via npm, so those are placed at ./node_modules/@types. I also have a few types I created by hand at ./@types.
在我的解决方案中，我通过 npm 拉入我所有的 @types，因此它们被放置在 ./node_modules/@types 中。我也有一些我在 ./@types 上手工创建的类型。
In my tsconfig.json, I added:
在我的 tsconfig.json 中，我添加了：
"compilerOptions": {
// lots of other config here
"typeRoots": [
"./node_modules/@types",
"./@types"
]
}
Now all my types are discovered and used by the compiler automatically, so there's no need to bother with reference tags!
现在我的所有类型都被编译器自动发现和使用，所以没有必要为引用标签烦恼！
In conclusion...
综上所述...
I should note that if you do this and you try to explicitly import jquery, it will fail, and you will be confused. I sure was.
我应该注意，如果您这样做并且尝试显式导入 jquery，它将失败，并且您会感到困惑。我肯定是。
回答by Anshu Bansal
Try replacing your import with declare let $ : any;
尝试将您的导入替换为 declare let $ : any;
