web-dev-qa-db-ja.com

Angular CLI-アプリケーション全体でプロトタイプ関数を共有する方法

文字列クラスにいくつかのグローバルプロトタイプ関数が必要です。例えば。

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」に存在しません。

アプリケーション全体でそのような関数にアクセスできるようにするにはどうすればよいですか

javascriptangulartypescriptprototypeangular-cli
10
lohiarahul

問題は、TypeScriptがこれらの型定義を認識していないことです。

クイックメソッド

使用している各メソッドの定義を提供する

typings.d.tsを開き、以下を追加します。

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

使用しているeach関数の定義を提供する必要があります。これはより高速ですが、prototypes.jsを再評価してTypeScriptとの親和性を高めるのに適したタイミングかもしれません。

プロ方式

ライブラリをTypeScriptに変換し、必要に応じて関数をインポート/エクスポートします。これは時間がかかりますが、ライブラリを所有している場合は、最終的にはそれを実行する必要があります。

ライブラリを更新し、プロトタイプ（treesakeがうまく機能しない）を使用したい場合は、次のようにします。

ファイル：string-prototypes.ts

String.prototype.trimWhiteSpaces = trimWhiteSpaces;

interface String {
  trimWhiteSpaces: typeof trimWhiteSpaces;
}

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

app.module.tsの上部で、次のようにこのファイルをインポートします。

import './string-prototypes';

2番目のアプローチは、このようにライブラリを構造化し、必要に応じて関数をインポートすることです。

ファイル：string-helpers.ts

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

コンポーネント内：

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

このようにしてプロトタイプ拡張を緩めますが、ライブラリのコンシューマーが必要なものだけを使用していることを保証します。

14
cgatian

私もいくつかのメソッドのプロトタイプを作りたいと思っていました

私たちは数千のクラスとメンバーを使用するプロジェクトに取り組んでいます。これらのメンバーの多くは完全に反復的であり、コンポーネント間で共有できます

数分検索した後、これらのソリューションに遭遇しましたAngular GlobalまたはShared Modules

一般的にそれを処理するには2つの方法があります

  1. グローバルではなく、特定のコンポーネント間で特定のコードを共有する必要があります

これは、中規模から大規模のWebアプリケーションで発生します。

Angular Docs 方法の説明

  1. 一部のコードをグローバルに共有する必要があります（これは私の推測です）

このことに注意してくださいこのオプションは通常のグローバルモジュールとは異なり、プロトタイプに独自の機能を追加したい

この記事 Angular App内でのプロトタイプの作成方法を簡単に示します

0
Ali Sawari

このようなインターフェースをグローバルとして宣言し、このファイルを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';
0
hovado