对于Angular CLI V2+

npm install jquery --save
npm install @types/jquery --save

确保jquery在angular中有一个条目。Json ->脚本

...
    "scripts": [
        "node_modules/jquery/dist/jquery.min.js"
    ]
...

转到tsconfig.app.json，在“类型”中添加一个条目

{
    "extends": "../tsconfig.json",
    "compilerOptions": {
        "outDir": "../out-tsc/app",
        "types": ["jquery","bootstrap","signalr"]
    },
    "exclude": [
        "test.ts",
        "**/*.spec.ts"
    ]
}

对于Visual Studio代码

对我来说有用的是确保我通过index.html中的< script >标记来加载标准的JQuery库。

Run

npm install --save @types/jquery

现在JQuery $函数在所有.ts文件中都可用，不需要任何其他导入。

就我而言，我必须这么做

npm install @types/jquery --save-dev // install jquery type as dev dependency so TS can compile properly
npm install jquery --save // save jquery as a dependency

然后在脚本文件A.ts

import * as $ from "jquery";
... jquery code ...

你可以通过扩展窗口接口来声明全局变量:

import jQuery from '@types/jquery';

declare global {
    interface Window {
        jQuery: typeof jQuery;
        $: typeof jQuery;
    }
}

来源:

https://stackoverflow.com/a/12709880/4642023 https://mariusschulz.com/blog/declaring-global-variables-in-typescript#augmenting-the-window-interface

下面是我的TypeScript和jQuery配置步骤。

它使jQuery的类型支持比互联网上的大多数文章更好地工作。(我相信。)

第一:

npm install jquery --save
npm install @types/jquery --save-dev

第二(非常非常非常重要!!!)：

import jquery = require("jquery");



// this helps TypeScript to understand jQuery best !!!  otherwise It will confused .
const $: JQueryStatic = jquery;

那么，你可以享受它:

$(document).ready(function () {
    $('btn').click(function () {
       alert('I am clicked !')
    }
}

它像丝一样光滑!!

这对我来说很管用:

export var jQuery: any = window["jQuery"];