Question

我需要在字符串类上有一些全局原型函数。例如

string.prototype.trimWhiteSpaces = function () {
  return this.replace(/ +/g, '');
}

我正在使用Angular CLI，我希望Angular 4应用程序中的所有字符串都可以访问此函数。我已将代码段添加到名为prototypes.js的文件中，并在.angular-cli.json中加载了文件

  "scripts": [
      "assets/js/prototypes.js",
      "../node_modules/jquery/dist/jquery.min.js",
      "../node_modules/bootstrap/dist/js/bootstrap.min.js",
      "../node_modules/moment/min/moment.min.js"
    ],

但是，在编译项目时，我一直收到以下错误

属性'trimWhiteSpaces'在'string'类型中不存在。

如何在我的应用程序中访问此类功能

Answer 1

问题是TypeScript不知道这些类型定义。

快速方法

为您使用的每种方法提供定义

打开 typings.d.ts 并添加以下内容：

interface String {
  trimWhiteSpaces: () => string;
}

您必须提供您正在消费的每个功能的定义。虽然速度更快，但现在可能是重新评估prototypes.js并使其对TypeScript友好的好时机。

Pro方法

根据需要将库转换为打字稿和导入/导出功能。这比较费时，但如果您拥有图书馆，那么您最终会想要这样做。

如果你想更新库并仍然使用原型（没有很好的树木），你会做这样的事情：

文件： string-prototypes.ts

String.prototype.trimWhiteSpaces = trimWhiteSpaces;

interface String {
  trimWhiteSpaces: typeof trimWhiteSpaces;
}

function trimWhiteSpaces() {
  return this.split(' ').join('');
}

在app.module.ts的顶部导入此文件，如下所示：

import './string-prototypes';

第二种方法是像这样构建你的库，并根据需要导入函数。

文件： string-helpers.ts

export function trimWhiteSpaces(input: string) {
  return input.split(' ').join('');
}

在一个组件中：

import { trimWhiteSpaces } from './string-helpers';

您以这种方式放弃了原型扩充，但它保证了您图书馆的消费者只使用他们需要的东西。

Answer 2

我也想原型一些方法

我们正在研究一个使用数千个类和成员的项目，其中很多成员是完全重复的，可以在组件之间共享

搜索几分钟后，我遇到了这些解决方案 Angular全局或共享模块

通常有两种处理方法

您需要在特定组件之间共享特定代码，而不是全局共享

任何中型到大型Web应用程序都将发生这种情况

Angular Docs解释了如何

您需要在全球范围内共享一些代码（我想这就是您的情况）

请注意：该选项不同于任何普通的全局模块，我们希望使用自己的功能填充一些原型

This Article轻松演示如何在Angular应用程序中填充供我们自己使用的原型

Answer 3

您可以简单地将此类接口声明为global并将此文件导入到您的app.module。

例如，您的文件prototypes.ts应该看起来像这样：

declare global {
    interface String {
        trimWhiteSpaces(): string;
    }
}

if (!String.prototype.trimWhiteSpaces)
    String.prototype.trimWhiteSpaces = function (): string {
        return this.replace(/ +/g, '');
    }
}

app.module.ts：

import './prototypes.ts';

Angular CLI - 如何跨应用程序共享原型函数

3 个答案:

快速方法

Pro方法

通常有两种处理方法