How to use Google libphonenumber in Typescript?

Question

I want to use Google libphonenumber in my angular project using Typescript. I have searched a lot on the internet and found a lot of stuff but could not find anything that could serve my purpose.

Most of the content available shows the code in JavaScript. If I use the same code in typescript, it shows a lot of errors like cannot find name require or module not found. Please tell me how/where/what to write the code.

Also, plz tell me which package to install as there are many - libphonenumber, google-libphonenumber, angular-libphonenumber

Answer 1

When dealing with CommonJS libraries, in TypeScript just like this google-libphonenumber, I'd like to suggest 2 ways about it (Tested by me and works well).

Initially, I'd like to suggest to install from NPM just like this: npm install --save google-libphonenumber.

Then, here we go both ways of using it:

1st Method

Just import it directly

import libphonenumber from 'google-libphonenumber';
class Something {
    constructor() {//Just example, you can chose any method
        const phoneUtil = libphonenumber.PhoneNumberUtil.getInstance();
        console.log( phoneUtil.getSupportedRegions() );//It should works and give you some output
    }
}

2nd Method

You still can make the power of Typescript typing or just use the existing one by: npm install --save-dev @types/google-libphonenumber.

Since you said that you using Angular, so you can declare that typing just installed at src/tsconfig.app.json ( I am using Angular Version 7 ). Here is an example I have made:

{
  ...
  "compilerOptions": {
    ...
    "types": [
      "google-libphonenumber"
    ]
  },
  ...
}

Then you can just import it like usual, in Typescript "typings" way like follow:

import { PhoneNumberUtil } from 'google-libphonenumber';

class Something {
    constructor() {//Just example, you can chose any method
        const phoneUtil: PhoneNumberUtil = PhoneNumberUtil.getInstance();
        console.log( phoneUtil.getSupportedRegions() );//It should works and give you some output
    }
}

Answer 2

you may either go with libphonenumber or google-libphonenumber as both of this library having a good number of installs also google-libphonenumber seems to be more powerful

Answer 3

Use ng2-tel-input . The only lib stable with angular 7 . ngx-tel-input has more features . But it has issues with ang7 .

Downloads from here

Exemple of use :

  <input type="text"
ng2TelInput
[ng2TelInputOptions]="{initialCountry: 'UK'}"
(hasError)="hasError($event)"
(countryChange)="onCountryChange($event)" />

Answer 4

You can also add the @types/google-libphonenumber package as a dev dependency without having to install the google-libphonenumber package too. This is achieved by using a root index.d.ts file with triple-slash directives and module declarations

/// <reference types="google-libphonenumber" />

declare module "google-libphonenumber";

I tend to do this with google libraries in general -- bonus: no imports required to consume these types in your codebase

• Example from a current project

/// <reference types="gtag.js" />
/// <reference types="google.analytics" />
/// <reference types="google.maps" />

declare module 'google.maps';
declare module 'gtag.js';
declare module 'google.analytics';