1

I'm trying to use a library client side with TypeScript. (Zepto, a lightweight JQuery alternative)

This is for old browsers, so I don't want to use import and fancy ES6 syntax, and ideally avoid require/commonJS etc.

So I have simply added it to the same page using a script tag.

There exists a typings definition for this library. I have added it.

Then to my main JS file I added:

/// <reference path="../typings/browser.d.ts" />

where that file points to a file containing:

/// <reference path="browser/ambient/node/index.d.ts" />
/// <reference path="browser/ambient/zepto/index.d.ts" />
/// <reference path="browser/definitions/universal-analytics/index.d.ts" />

etc.

But if I try:

Zepto.ajax({

gives TS error:

Property 'ajax' does not exist on type '(fn: ($: ZeptoStatic) => void) => void'.

And a whole bunch of other errors.

Argument of type 'string' is not assignable to parameter of type '($: ZeptoStatic) => void'.

Am I doing this correctly to use these typings files client side? Maybe just Zepto's typings is incorrect...?

Thanks for any pointers. Would be nice to not get tons of junk output from tsc all the time...

dcsan
  • 11,333
  • 15
  • 77
  • 118

1 Answers1

0

I think that is not the way how Zepto var is intended to be used.

Directly from zeptojs.com 'Core methods' section we can see that Zepto var can be used to specify callback function when the lib is ready to be used:

Zepto(function($){
  alert('Ready to Zepto!')
})

That is exactly what zepto.d.ts contains - declaration of a function that accepts callback function as only parameter:

declare var Zepto: (fn: ($: ZeptoStatic) => void) => void;

If you want to use zepto methods - go on and access them via $ var like you do in jquery:

$.ajax(......);

That is exactly what its definition says:

declare var $: ZeptoStatic;

Hope this helps.

Amid
  • 21,508
  • 5
  • 57
  • 54