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

'string' 类型不存在属性 'trimWhiteSpaces'.

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

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

Open typings.d.ts and add the following:

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屋！