TypeScript에서 jQuery 플러그인 사용

TypeScript에서 jQuery 플러그인 사용

---

typescript를 사용할 때 내가 사용하는 모든 외부 js에 대해 plugin.d.ts를 가져와야합니까? 즉, 모든 인터페이스로 jQuery.d.ts를 만들어야합니까?

---

jQuery 플러그인 (및 기타 플러그인 기반 라이브러리)의 문제는 기본 라이브러리에 library.d.ts 파일이 필요할뿐만 아니라 각 플러그인에 대한 plugin.d.ts 파일도 필요하다는 것입니다. 그리고 어떻게 든 plugin.d.ts 파일은 library.d.ts 파일에 정의 된 라이브러리 인터페이스를 확장해야합니다. 다행히 TypeScript에는 그렇게 할 수있는 멋진 기능이 있습니다.

으로 classes현재 존재하는 것은 단지 프로젝트 내에서 클래스의 단일 cononical 정의 할 수 있습니다. 그래서 당신이 정의하면 당신 class Foo이 입는 멤버 Foo는 당신이 얻는 전부입니다. 의 추가 정의 Foo로 인해 오류가 발생합니다. 와 interfaces사용자가 정의하는 경우, 그러나, 회원 첨가제 그래서 있습니다 interface Bar당신이에 추가 구성원을 추가하는 두 번째 '바 인터페이스'정의 할 수 있습니다 회원의 세트 interface. 이것이 강력한 형식의 방식으로 jQuery 플러그인을 지원하는 열쇠입니다.

따라서 주어진 jQuery 플러그인에 대한 지원을 추가하려면 사용하려는 플러그인에 대한 plugin.d.ts 파일을 만들어야합니다. 프로젝트에서 jQuery 템플릿 을 사용 하므로 다음은 해당 플러그인에 대한 지원을 추가하기 위해 만든 jquery.tmpl.d.ts 파일입니다.

interface JQuery
{
    tmpl(data?:any,options?:any): JQuery;
    tmplItem(): JQueryTmplItem;
    template(name?:string): ()=>any;
}

interface JQueryStatic
{
    tmpl(template:string,data?:any,options?:any): JQuery;
    tmpl(template:(data:any)=>string,data?:any,options?:any): JQuery;
    tmplItem(element:JQuery): JQueryTmplItem;
    tmplItem(element:HTMLElement): JQueryTmplItem;
    template(name:string,template:any): (data:any)=>string[];
    template(template:any): JQueryTemplateDelegate;
}

interface JQueryTemplateDelegate {
    (jQuery: JQueryStatic, data: any):string[];
}

interface JQueryTmplItem
{
    data:any;
    nodes:HTMLElement[];
    key:number;
    parent:JQueryTmplItem;
}

우리가 한 첫 번째 일은 JQuery인터페이스에 추가되는 메소드를 정의하는 것 입니다. 이를 통해 $('#foo').tmpl();다음 을 입력 할 때 지능 및 유형 검사를 할 수 있습니다. 다음 을 입력 JQueryStatic할 때 표시 되는 인터페이스 에 메소드를 추가했습니다. $.tmpl();마지막으로 jQuery Templates 플러그인은 자체 데이터 구조 중 일부를 정의하므로 해당 구조에 대한 인터페이스를 정의해야했습니다.

이제 추가 인터페이스가 정의되었으므로 소비하는 .ts 파일에서 참조하기 만하면됩니다. 이를 위해 .ts 파일의 맨 위에 아래 참조를 추가하기 만하면됩니다. 해당 파일의 경우 TypeScript는 기본 jQuery 메서드와 플러그인 메서드를 모두 볼 수 있습니다. 여러 플러그인을 사용하는 경우 모든 개별 plugin.d.ts 파일을 참조해야합니다.

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

---

.d.ts선언 파일을 사용하는 것이 아마도 더 좋을 수 있지만 대안으로 TypeScript의 전역 확장 및 선언 병합 을 사용하여 JQuery의 인터페이스에 메서드를 추가 할 수도 있습니다 . TypeScript 파일에 다음과 같이 배치 할 수 있습니다.

declare global {
    interface JQuery {
        nameOfPluginMethod(arg: any): JQuery;
    }
}

---

.ts 파일을 저장해도 Visual Studio에서 컴파일이 자동으로 트리거되지 않습니다. 컴파일을 트리거하려면 빌드 / 다시 빌드해야합니다.

파일 선언 (file.d.ts)을 사용하면 TypeScript 컴파일러가 해당 파일에서 사용중인 JavaScript 라이브러리에 대한 더 나은 유형 정보를 얻을 수 있습니다. 인터페이스를 모두 하나의 파일 또는 여러 파일에 정의 할 수 있습니다. 이것은 아무런 차이가 없어야합니다. 다음과 같은 것을 사용하여 외부 라이브러리에서 사용중인 유형 / 변수를 "선언"할 수도 있습니다.

declare var x: number;

컴파일러에게 x를 숫자로 취급하도록 지시합니다.

---

나는 jquery.inputmask에 대한 d.ts를 찾고 있었고 마침내 내 자신의 간단한 것을 만들었습니다. 그것은

https://github.com/jpirok/Typescript-jquery.inputmask

또는 아래 코드를 볼 수 있습니다.

jquery.inputmask의 모든 경우를 다루지는 않지만 아마도 대부분을 처리 할 것입니다.

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

interface JQueryInputMaskOptions {
    mask?: string;
    alias?: string;
    placeholder?: string;
    repeat?: number;
    greedy?: boolean;
    skipOptionalPartCharacter?: string;
    clearIncomplete?: boolean;
    clearMaskOnLostFocus?: boolean;
    autoUnmask?: boolean;
    showMaskOnFocus?: boolean;
    showMaskOnHover?: boolean;
    showToolTip?: boolean;
    isComplete?: (buffer, options) => {};
    numeric?: boolean;
    radixPoint?: string;
    rightAlignNumerics?: boolean;
    oncomplete?: (value?: any) => void;
    onincomplete?: () => void;
    oncleared?: () => void;
    onUnMask?: (maskedValue, unmaskedValue) => void;
    onBeforeMask?: (initialValue) => void;
    onKeyValidation?: (result) => void;
    onBeforePaste?: (pastedValue) => void;
}

interface inputMaskStatic {
    defaults: inputMaskDefaults;
    isValid: (value: string, options: inputMaskStaticDefaults) => boolean;
    format: (value: string, options: inputMaskStaticDefaults) => boolean;
}

interface inputMaskStaticDefaults {
    alias: string;
}

interface inputMaskDefaults {
    aliases;
    definitions;
}

interface JQueryStatic {
    inputmask: inputMaskStatic;
}

interface JQuery {
    inputmask(action: string): any;
    inputmask(mask: string, options?: JQueryInputMaskOptions): JQuery;
}

---

.d.ts플러그인 용 파일을 만들기 전에 이미 DefinitelyTyped 라이브러리 인지 확인해야 합니다. 예를 들어 Typings 를 사용하면 다음 명령을 실행할 수 있습니다.

typings install dt~bootstrap --global --save

... 추가 코드없이 다양한 Bootstrap 플러그인에 액세스 할 수 있습니다.

찾고있는 플러그인이없는 경우 고유 한 정의를 제공하는 것이 좋습니다.

참고URL : https://stackoverflow.com/questions/12719529/using-jquery-plugin-in-typescript