如何在 Typescript 中使用 Google libphonenumber？答案

【问题标题】：How to use Google libphonenumber in Typescript?如何在 Typescript 中使用 Google libphonenumber？
【发布时间】：2018-08-23 22:25:14
【问题描述】：

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

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

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

【问题讨论】：

标签： angular typescript libphonenumber

【解决方案1】：

在处理 CommonJS 库时，在 TypeScript 中就像这样 google-libphonenumber，我想提出 2 种方法（经过我的测试并且效果很好） .

最初，我建议像这样从 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 “打字” 方式如下：

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

【讨论】：

【解决方案2】：

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

【讨论】：

谢谢@SantoshSingh ...您知道如何将 google-libphonenumber 导入项目以及如何在项目中使用它吗？我不知道我应该在哪里写这段代码： var phoneUtil = require('google-libphonenumber').PhoneNumberUtil.getInstance();
安装 npmjs.com/package/@types/google-libphonenumber 并从 'google-libphonenumber' 导入 * 作为 modName

【解决方案3】：

使用 ng2-tel-input 。角度 7 的唯一 lib 稳定。 ngx-tel-input 有更多的功能。但它与 ang7 有问题。

从here下载

使用示例：

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

【讨论】：

【解决方案4】：

您还可以将@types/google-libphonenumber 包添加为开发依赖项，而无需安装google-libphonenumber 包。这是通过使用带有三斜杠指令和模块声明的根 index.d.ts 文件来实现的

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

declare module "google-libphonenumber";

我倾向于使用谷歌库来做这件事——奖励：在你的代码库中使用这些类型不需要导入

当前项目的示例

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

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

【讨论】：