如何在Typescript中使用Google libphonenumber？

Question

我想通过Typescript在我的angular项目中使用Google libphonenumber。我在互联网上搜索了很多，找到了很多东西，但找不到任何可以满足我的目的的东西。

大多数可用的内容都用JavaScript显示了代码。如果我在typescript中使用相同的代码，它会显示很多错误，比如cannot find name require或module not found。请告诉我如何/在哪里/什么地方编写代码。

另外，请告诉我要安装哪个包，因为有很多- libphonenumber，google-libphonenumber，angular-libphonenumber

Answer 1

在处理CommonJS库时，就像这个google-libphonenumber，一样，在TypeScript中，我想推荐两种方法(经过我的测试，运行良好)。

最初，我建议从NPM安装，就像这样：npm install --save google-libphonenumber。

然后，我们来看看使用它的两种方式：

第一种方法

直接导入即可

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
    }
}

第二种方法

你仍然可以使用Typescript的强大功能，或者仅仅通过：npm install --save-dev @types/google-libphonenumber来使用现有的功能。

既然您说您使用的是Angular，那么您可以声明刚刚在src/tsconfig.app.json上安装了键入(我使用的是Angular版本7 )。下面是我做的一个例子：

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

然后你可以像往常一样导入它，以Typescript "typings“的方式如下所示：

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

您可以使用libphonenumber或google-libphonenumber，因为这两个库都有大量的安装，而且google-libphonenumber似乎更强大

Answer 3

使用ng2-tel-input。angular 7中唯一稳定的库。ngx-tel-input有更多的功能。但它与ang7存在问题。

从here下载

使用示例：

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