Javascript Angular CLI-如何在整个应用程序中共享原型功能

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

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

我正在使用Angular CLI，我希望Angular 4应用程序中的所有字符串都可以访问此函数。我已将代码片段添加到名为

prototype.js

的文件中，并在

中加载了该文件

  "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"
    ],

然而，当我编译我的项目时，我不断得到以下错误

类型“string”上不存在属性“trimWhiteSpaces”

如何在整个应用程序中访问这些函数
问题是TypeScript不知道这些类型定义


快速法
为您正在使用的每个方法提供定义

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

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

您必须为正在使用的每个功能提供定义。虽然这会更快，但现在可能是重新评估
prototype.js并使其对TypeScript友好的好时机


Pro方法
根据需要将库转换为typescript和导入/导出函数。这会耗费更多的时间，但如果你拥有这个库，你最终会想这么做

如果您想更新库，并且仍然使用原型（treeshake不太好），您可以这样做：

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

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

文件：字符串原型.ts

String.prototype.trimWhiteSpaces = trimWhiteSpaces;

interface String {
  trimWhiteSpaces: typeof trimWhiteSpaces;
}

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

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

在
app.module.ts的顶部，按如下方式导入此文件：

import './string-prototypes';

第二种方法是这样构造库，并根据需要导入函数

文件：string helpers.ts

String.prototype.trimWhiteSpaces = trimWhiteSpaces;

interface String {
  trimWhiteSpaces: typeof trimWhiteSpaces;
}

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

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

在组件中：

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

您以这种方式释放了原型增强功能，但它保证了您的库的消费者只使用他们需要的东西。
我也有一种冲动，要对一些方法进行原型化

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

经过几分钟的搜索，我找到了这些解决方案
角度全局或共享模块

String.prototype.trimWhiteSpaces = trimWhiteSpaces;

interface String {
  trimWhiteSpaces: typeof trimWhiteSpaces;
}

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

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

通常有两种处理方法
您需要在特定组件之间共享特定代码，而不是在全球范围内共享

这会发生在任何中大型web应用程序上

解释了如何这样做

您需要在全球范围内共享一些代码（我想这是您的情况）
请注意此选项与任何普通全局模块不同，我们希望使用自己的功能填充一些原型

轻松演示如何在Angular应用程序中填充原型供我们自己使用
您只需将此类接口声明为全局接口，然后将此文件导入您的App.module

因此，您的文件（例如prototype.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';

这些原型已经在JS中了吗，或者你想让它们被TypeScript>JS编译吗？很狡猾地改变了原型的实现：dw你是什么意思？这个。替换（/+/g'）；对此。拆分（“”）。加入（“”）；我重新运行了几次测试。它显示了regex总是更快：我从Chrome和IE11获得的结果让它赢得了regex，但差别很小。或将其从水中吹出。在大计划中，除非你构建了一个框架，否则这并不重要。