为 TypeScript 1.8 安装 jQuery 2.2.4 类型答案

【问题标题】：Install jQuery 2.2.4 typings for TypeScript 1.8为 TypeScript 1.8 安装 jQuery 2.2.4 类型
【发布时间】：2016-09-02 15:22:08
【问题描述】：

我已经使用 angular-cli 设置了 Angular 2 (RC4) 并使用 typings@0.8.1。

我用

安装了 jQuery

npm install jquery@2.2.4 --save

在 package.json 中添加 "jquery": "^2.2.4"

和打字

typings install dt~jquery --global --save

在 typings.json 中添加 "jquery": "registry:dt/jquery#1.10.0+20160704162008"（注意：此类型适用于 1.x 和 2.x 版本！）

当我现在在我的任何 TypeScript 文件中使用 import $ from 'jquery' 或 import * as $ from 'jquery' 时，tsc 会返回：

[ts] 找不到模块“jquery”。

谁能告诉我为什么？我做错了什么？

【问题讨论】：

这与您的问题无关，但是您确定需要 jQuery 和 Angular2 吗？它不能很好地协同工作。
是的，我需要一个依赖于 jQuery 的外部依赖项。这很糟糕，但是在 ng2 universum 中，目前我可以使用的项目并不多。但感谢在这里提及。

标签： jquery typescript typescript-typings

【解决方案1】：

你安装了 jQuery 绝对类型吗？

http://www.nuget.org/packages/jquery.TypeScript.DefinitelyTyped/

【讨论】：

是的，但是我已经直接使用了类型，这会将它们包含在我的项目文件夹中。

【解决方案2】：

我在没有火箭科学的情况下解决了这个问题，只是用旧方法解决。似乎 RC4 在正确解析打字时遇到了一些麻烦。但由于我是一名软件开发人员，并且所有与 Angular 相关的“RC 东西”在过去发生了很大变化，因此对于任何 RC 都很难解决这个问题，所以我决定这样做有点老派，比如：

declare var $: any;                 // <-- yep, that's it
declare var FlipClock: any;         // <-- same here

@Component({
  selector: 'my-component',
  moduleId: module.id,
  templateUrl: './template.html',
  styleUrls: ['./styles.css']
})

export class MyComponent implements AfterViewInit {
  @ViewChild('flipclock') flipClock: ElementRef;
  errors: any;

  constructor() {
  }

  ngAfterViewInit() {
    $(this.flipClock.nativeElement).FlipClock({  // <-- we must make sure that
      clockFace: 'TwentyFourHourClock'           //     at runtime $ and FlipClock
                                                 //     exists
    });
  }
}

要在运行时提供 jQuery 和 FlipClock，我们只需将脚本附加到 index.html：

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My ng2-rc4 app</title>
    <base href="/">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="vendor/flipclock/compiled/flipclock.css">
    <link rel="stylesheet" href="app/main.css">
  </head>

  <body>
    <my-app>Loading ...</my-app>

    <script src="/vendor/jquery/dist/jquery.min.js"></script>
    <script src="/vendor/flipclock/compiled/flipclock.min.js"></script>
  </body>
</html>

【讨论】：