0

В данном примере функционал библиотеки jQuery расширен функционалом animate.css (пример базирован на официальной документации; язык - TypeScript, хотя за исключением объявления interface JQuery это чистый JavaScript):

AnimateCssJQuery.ts

import * as $ from 'jquery'

interface JQuery {
  animateCss(): JQuery;
}

$.fn.extend({
  animateCss: function(animationName, callback) {
    let animationEnd = (function(el) {
      let animations = {
        animation: 'animationend',
        OAnimation: 'oAnimationEnd',
        MozAnimation: 'mozAnimationEnd',
        WebkitAnimation: 'webkitAnimationEnd',
      };

      for (let t in animations) {
        if (el.style[t] !== undefined) {
          return animations[t];
        }
      }
    })(document.createElement('div'));

    this.addClass('animated ' + animationName).one(animationEnd, function() {
      $(this).removeClass('animated ' + animationName);

      if (typeof callback === 'function') callback();
    });

    return this;
  },
});

Если мы просто импортируем этот файл в другой (таким способом как import './LibraryExtensions/animate.css/AnimateCssJQuery'), то будет ошибка Property 'animateCss does not exist on type 'JQuery <HTMLElement>. Может я ошибаюсь, но вероятно это потому, что результат расширения библиотеки jQuery не был импортирован, но поскольку результат этого импорта не записан ни в какую переменную, то не совсем понятно, как это импортировать.

2 ответа 2

1

Попробуйте в папке с Вашим кодом создать файл typings.d.ts и сделать расширение интерфейса:

interface JQuery {
    animateCss: (animationName: string, callback: () => void) => JQuery;
}
13
  • Благодарю Вас за ответ. К сожалению, эффект отсутствует. Даже как-то грустно сообщать об этом после того, как Вы написали вежливый ответ с обращением на "Вы" с большой буквы :( 22 июл 2018 в 1:53
  • 1
    .d значит declaration (объявление типа(ов), в ранних версиях TypeScript нужно было использовать так называемые директивы с тройным слешем (/// <reference path="..." />) и таким образом указывать в каждом файле, чтобы файл .ts знал об определенных типах, сейчас TypeScript на этапе компиляции рекурсивно делает include всех .d.ts файлов в директории с tsconfig.json (то есть где Ваш workspace), но можно такую возможность отключить и вручную указывать файлы в tsconfig.json > include: ['./path-to/typings.d.ts'] 24 июл 2018 в 13:50
  • 1
    Сейчас все библиотеки предоставляют свои определения (@types), если уж на то пошло, то создавать файл .d.ts файл и в нем прописывать, называть его можете как угодно, typings это просто эдакой стандарт. Не нужно вручную ничего прописывать, я же сказал что компилятор рекурсивно делает include всех определений, а в tsconfig можно просто вручную указать путь (glob), где лежат Ваши определения, если Вы не хотите, чтобы компилятор видел все 25 июл 2018 в 7:30
  • 1
    Либо Вы делаете частью проекта, либо контрибьютите в @types/jquery :-) 26 июл 2018 в 14:02
  • 1
    Если Вы делаете свою библиотеку и хотите, чтобы другие устанавливали ее, как пакет, то сейчас стандарт это либо делать еще один пакет @types/your-library, либо в корне этой библиотеки создавать .d.ts. Вот Вам как пример github.com/prettymuchbryce/node-http-status 29 июл 2018 в 12:08
0

package.json

{
  "name": "",
  "version": "1.0.0",
  "description": "",
  "main": "",
  "devDependencies": {
    "typescript": "2.9.2",
    "jquery": "3.3.1",
    "@types/jquery": "3.3.5"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}
  1. A

index.ts

import * as $ from 'jquery'

declare global {
    interface JQuery {
        qwa(): JQuery;
    }
    interface JQueryStatic {
        qwabra: string
    }
}

$().qwa //(method) JQuery<HTMLElement>.qwa(): JQuery<HTMLElement>
$.qwabra //(property) JQueryStatic.qwabra: string
  1. B

index.d.ts

interface JQuery {
    qwa(): JQuery;
}
interface JQueryStatic {
    qwabra: string
}

index.ts

/// <reference path="index.d.ts" />

import * as $ from 'jquery'

$().qwa //(method) JQuery<HTMLElement>.qwa(): JQuery<HTMLElement>
$.qwabra //(property) JQueryStatic.qwabra: string

можно через @types вместо /// <reference path="index.d.ts" />

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.