Typescript types definition support

[fdnhkj]

Hello!

This issue just to let you know I added Typescript definition file for this plugin in DefinitelyTyped repo (see merged PR).

I just did a PR to intl-tel-input repo to add this information to README.md .

[jackocnr]

Hi there! Thanks for putting this together. I don't understand your video example though. The second line doesn't make sense - it should start $.fn.intlTelInput, right?

[fdnhkj]

Indeed it doesn't look correct. I'll have a look later this week, thanks for your comment :)

[fdnhkj]

Fixed it - see merged PR.

Note

$.fn.intlTelInput static methods are not typed because of jquery typings.
As $.fn has type any (jquery/jquery.d.ts#L958), we cannot define types for those methods.

[jackocnr]

Thanks! So now I'm wondering - without static method support, what exactly does this do? Presumably it doesn't support the public methods e.g. setNumber because they are called with the method name as a string e.g. $(".phone").intlTelInput("setNumber", "+44123");

[fdnhkj]

Defines intlTelInput method in JQuery instance

Without the definition file, intlTelInput method would not be available in JQuery instances. It would give following error :

Defines different signatures of the public API (parameters types, return type)

In that file, I defined the methods listed in the public API with correct param type and return type.
If you call i.e. intlTelInput(options?: IntlTelInput.Options): JQueryDeferred<any>;, then you will only be able to use properties, functions defined in JQueryDeferred type.

Even if public methods are called with method name as a string, TypeScript allows you to have specialized overload signatures based on string constants. It allows you i.e. to specify correct return type depending on method name. That is what I did and what for example JQueryUI has also in its d.ts (see
https://github.com/DefinitelyTyped/DefinitelyTyped/blob/741430a178043bfca40e3a343b8b6f7610104093/jqueryui/jqueryui.d.ts#L1009).
So indeed we cannot restrict people from calling $('#phone').intlTelInput('xx');, but when they use the correct method name, they will have the correct return type.

Defines the options

When you will provide options object, it will have to be compliant (property name and correct type) with the Options interface defined in the d.ts file. For example, it will restrict you from doing this :


But will allow :

Defines intlTelInputUtils global variable and enums

I also defined intlTelInputUtils global var so TypeScript compiler will know what type it is; same for enums. Otherwise it will complain with such errors.

[jackocnr]

Very cool thank you!

[romelgomez]

First, sorry for up this old issue. I have small question about this types definitions.

After install
npm i intl-tel-input --save
npm i @types/intl-tel-input

I a new angular project, I trying import the lib, like this:

import { } from 'intl-tel-input';

And this error show up:

[ts] File '.... /sandbox/iti/node_modules/@types/intl-tel-input/index.d.ts' is not a module. [2306]

I think this maybe happen because is never exported, in base a similar issue that I find:

microsoft/TypeScript#11420 (comment)

What I missing here?

[mahermali]

@romelgomez
install Jquery type definitions helped me to overcome this issue
npm install --save-dev @typings/jquery

[jawadalnuaimi]

Dear I tried use this plugin on oracle apex but only value in item inserted how I can get the extension also .

[shrikantkalar023]

The newly added React component needs type definitions.