使用 typescript 写 jQuery 插件

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

export class Carousel {
    constructor(
        public element: JQuery,
        options?: CarouselOptions
    ) {
        this.options = $.extend({}, CarouselDefaultOptions, options)
    }

    public options: CarouselOptions;
    
}

export interface CarouselOptions {
     range?: number,
     itemTag?: string,
     boxTag?: string,
     animationTime?: any,
     animationMode?: string
}

/**
* 默认设置
*/
class CarouselDefaultOptions implements CarouselOptions {
     itemTag: string = 'li';
     boxTag: string = '.box';
     animationTime: any = '1s';
     animationMode: string = 'slow';
}

carousel.ts

我打算做一个图片轮播的插件，上面是插件的主体， 分为三部分：

第一部分： class Carousel     插件具体功能实现，

第二部分：interface CarouselOptions 配置的接口，在js中无用，这里只是为了以后 TS 使用方便，方便智能提示和书写，

第三部分：class CarouselDefaultOptions 默认配置

 

/// <reference path="jquery/jquery.d.ts" />
import { Carousel, CarouselOptions } from './carousel';

 ;(function($: any) {

  $.fn.Carousel = function(options ?: CarouselOptions) {
    return new Carousel(this, options); 
  };
  
})(jQuery);

interface JQuery{
    Carousel(options ?: CarouselOptions) : any;
}

jquery.carousel.ts

这里主要是实现接入jQuery.

 

--- 用typescript 写 js 一目了然