/// <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 一目了然
原标题:使用 typescript 写 jQuery 插件
关键词:jquery