Solución:
El problema con los complementos de jQuery (y otras bibliotecas basadas en complementos) es que no solo necesita un archivo library.d.ts para la biblioteca base, sino que también necesita un archivo plugin.d.ts para cada complemento. Y de alguna manera estos archivos plugin.d.ts necesitan extender las interfaces de biblioteca definidas en los archivos library.d.ts. Afortunadamente, TypeScript tiene una pequeña característica ingeniosa que le permite hacer precisamente eso.
Con classes actualmente solo puede haber una única definición conónica de una clase dentro de un proyecto. Entonces, si define un class Foo los miembros que pones Foo es todo lo que obtienes. Cualquier definición adicional de Foo resultará en un error. Con interfaces, sin embargo, los miembros son aditivos, por lo que si define interface Bar con un conjunto de miembros, puede definir ‘Barra de interfaz’ por segunda vez para agregar miembros adicionales a la interface. Esa es la clave para admitir los complementos de jQuery de una manera fuertemente tipada.
Entonces, para agregar soporte para un complemento jQuery dado, necesitará crear un archivo plugin.d.ts para el complemento que desea usar. Usamos jQuery Templates en nuestro proyecto, así que aquí está el archivo jquery.tmpl.d.ts que creamos para agregar soporte para ese complemento:
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;
}
Desglosando esto, lo primero que hicimos fue definir los métodos que se agregan al JQuery interfaz. Estos le permiten obtener intellisense y verificación de tipo cuando escribe $('#foo').tmpl(); A continuación, agregamos métodos al JQueryStatic interfaz que aparece cuando escribe $.tmpl(); Y finalmente, el complemento jQuery Templates define algunas de sus propias estructuras de datos, por lo que necesitábamos definir interfaces para esas estructuras.
Ahora que tenemos las interfaces adicionales definidas, solo necesitamos hacer referencia a ellas desde los archivos .ts de consumo. Para hacer eso, simplemente agregamos las referencias a continuación en la parte superior de nuestro archivo .ts y eso es todo. Para ese archivo, TypeScript verá los métodos base de jQuery y los métodos de complemento. Si usa varios complementos, asegúrese de hacer referencia a todos sus archivos plugin.d.ts individuales y debería estar bien.
/// <reference path="jquery.d.ts"/>
/// <reference path="jquery.tmpl.d.ts" />
Usando un .d.ts El archivo de declaración es probablemente mejor, pero como alternativa también puede usar el aumento global y la combinación de declaraciones de TypeScript para agregar métodos a la interfaz de JQuery. Puede colocar algo como lo siguiente en cualquiera de sus archivos de TypeScript:
declare global {
interface JQuery {
nameOfPluginMethod(arg: any): JQuery;
}
}
Guardar un archivo .ts no desencadena automáticamente la compilación en Visual Studio. Necesitará compilar / reconstruir para activar la compilación.
Declarar archivos (file.d.ts) permite que el compilador de TypeScript obtenga mejor información de tipo sobre las bibliotecas de JavaScript que está utilizando de ese archivo. Puede tener todas sus interfaces definidas en un archivo o en varios archivos; esto no debería hacer ninguna diferencia. También puede “declarar” los tipos / variables que está usando de bibliotecas externas usando algo como:
declare var x: number;
que le dirá al compilador que trate x como un número.