使用 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 一目了然