Установите типизацию jQuery 2.2.4 для TypeScript 1.8.

Я установил Angular 2 (RC4) с angular-cli и использую [email protected].

Я установил jQuery с помощью

npm install [email protected] --save

добавляет "jquery": "^2.2.4" в package.json

и печатает с

typings install dt~jquery --global --save

добавляет "jquery": "registry:dt/jquery#1.10.0+20160704162008" в typings.json (Примечание: этот ввод предназначен для выпусков 1.x и 2.x!)

Теперь, когда я использую import $ from 'jquery' или import * as $ from 'jquery' в любом из моих файлов TypeScript, tsc возвращает:

[ts] Не удается найти модуль «jquery».

Кто-нибудь может сказать мне, почему? Что я делаю не так?


typescript jquery typescript-typings
person Patrick Hillert    schedule 01.09.2016    source источник
comment
Это не относится к вашему вопросу, но вы уверены, что вам нужен jQuery с Angular2? Вместе это плохо работает.   -  person Lazar Ljubenović    schedule 01.09.2016
comment
Да, мне нужна одна внешняя зависимость, основанная на jQuery. Это плохо, но в универсуме ng2 на данный момент не так много проектов, которые я могу использовать. Но спасибо, что упомянули это здесь.   -  person Patrick Hillert    schedule 01.09.2016

Ответы (2)


arrow_upward
1
arrow_downward

Вы установили jQuery DefinitelyTyped?

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

person Zorken17    schedule 01.09.2016
comment
Да, но я использовал наборы напрямую, которые будут включать их в папку моего проекта. - person Patrick Hillert; 01.09.2016

arrow_upward
0
arrow_downward

Я решил это без ракетостроения, просто сделай это по-старому. Кажется, что у 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>
person Patrick Hillert    schedule 02.09.2016