В данном примере функционал библиотеки 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 не был импортирован, но поскольку результат этого импорта не записан ни в какую переменную, то не совсем понятно, как это импортировать.