Angular CLI - 如何在整个应用程序中共享原型函数 [英] Angular CLI - How to share prototype functions across the application

问题描述

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

I need to have some global prototype functions on the string class. Eg.

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

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

I am using Angular CLI and I want this function to be accessible to all strings across my Angular 4 app. I have added the code snippet to a file called prototypes.js and in the .angular-cli.json I loaded the file

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

然而，我一直得到编译项目时出现以下错误

However, I keep getting the following error when I compile my project

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

Property 'trimWhiteSpaces' does not exist on type 'string'.

如何在我的应用程序中访问此类函数

How do I make such functions accessible throughout my application

推荐答案

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

The problem is TypeScript doesnt know about these type definitions.

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

Provide definitions for each of the methods you're using

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

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

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

You will have to provide definitions for each function you're consuming. While this is faster, it may be a good time to reevaluate prototypes.js and make it TypeScript friendly.

根据需要将库转换为打字稿和导入/导出功能。这是更耗时的，但是如果你拥有这个库，那么你最终会想要这样做。

Convert the Library to typescript and import/export functions as needed. This is more time consuming, but if you own the library it's something you're going to want to do eventually.

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

If you wanted to update the library and still use the prototype (which doesnt treeshake well) you would do something like this:

文件： string-prototypes.ts

String.prototype.trimWhiteSpaces = trimWhiteSpaces;

interface String {
  trimWhiteSpaces: typeof trimWhiteSpaces;
}

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

在 app.module.ts的顶部像这样导入这个文件：

At the top of your app.module.ts import this file like so:

import './string-prototypes';

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

The second approach would be to structure your library like this, and import the functions as needed.

文件： string-helpers.ts

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

在一个组件中：

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

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

You loose the prototype augmentation this way, but it guarantees consumers of your library are only using what they need.

这篇关于Angular CLI - 如何在整个应用程序中共享原型函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！