2017-06-07 9 views
1

私はパッケージを使用しています@types/cropperjs 残念ながら現在のcropper.jsバージョンの後ろにあり、メソッドscaleがありません。 これまでのところ、私はちょうど手動node_modules下d.tsファイルに不足しているメソッドを追加しました(これは明らかに悪い考えですので、それをしない!それだけで一時た。を修正)不足しているメソッド(npmパッケージから)のタイピングを追加しました

私がしようとしましたnode_modulesの定義を自分の宣言にマージします。

DefinitlyTypedレポからタイピングが found on github(それは似ていますが、ここで表示するには大きすぎる)

することができ

declare class cropperjs { 

    /** 
    * Scale the image. 
    * 
    * @param scaleX The scaling factor to apply on the abscissa of the image. 
    * When equal to 1 it does nothing. Default is 1 
    * @param scaleY The scaling factor to apply on the ordinate of the image. 
    * If not present, its default value is scaleX. 
    */ 
    scale(scaleX: number, scaleY?: number): void; 
} 

export = cropperjs; 
export as namespace Cropper; 

は、ここで私は角度成分でクロッパーをインポートする方法です。

import * as Cropper from 'cropperjs';

ここに私のtsconfig.jsonは(その一部)です

"typeRoots": [ 
    "node_modules/@types", 
    "node_modules/@angular", 
    "src/typings" 
], 
"types": [ 
    "jasmine", 
    "node", 
    "karma", 
    "webpack", 
    "cropperjs" 
] 

私はトリプルスラッシュ参照表記でフォルダ私のカスタムタイピングでそれを試してみました。 しかし、私はどのように私は正常に私とDefinitlyTypedの定義をマージすることができます私はnode_moduleの周りを疲れなくてもcropperjsを使用することができます把握することができません

P.S. githubの更新された定義で問題を既に開いています(当時はgitを知りませんでした)。

答えて

0

私が知る限り、あなたはタイプスクリプトでこれを行うことはできません。 Typescriptは宣言のマージという概念を持っています。これは、他の人が書いた型を拡張し、インターフェイスと名前空間をマージできますが、クラスはマージできません。 hereをご覧ください。

@types/cropperjsがインターフェイスを使用して記述されている場合は、独自の宣言を使用してそのインターフェイスを拡張することができます。ここで

は、あなたが今のために行うことができます醜いハックです:

import * as Cropper from 'cropperjs'; 

interface MyCropper extends Cropper { 
    scale(scaleX: number, scaleY?: number): void; 
} 

function CreateCropper(dom: HTMLImageElement, options: Cropper.CropperOptions): MyCropper { 
    return new Cropper(dom, options) as MyCropper; 
} 

キャストは常に醜いですが、少なくとも、あなたは

0

ちょうど欲しかった...私はそれが合理的だと思う、一つの場所にそれを隠します別の可能な「解決策」を追加する。それは私の意見ではかなり醜いので、私は "ソリューション"と言うが、もう一度それは回避策です。見て、読んだ後

(Aviadハダドの答えを参照)、そのクラスのマージが不可能であり、基本的にはおよそtypescripts node module resolution を読んで、あなたがimport * as Cropper from 'cropperjs typescriptですのような非相対パスをインポートする場合node_modulesとそれという名前のフォルダ内の適切なファイルを探しますimport文を持つファイルが存在するディレクトリで開始します。次に、(typescriptですドキュメントから取られた例)

  • /root/src/node_modules/moduleB.ts
  • /root/node_modules/moduleB.ts
  • /node_modules/moduleBを横切ります。TS(私はそれがグローバルnode_modulesディレクトリだと仮定)

typescriptですが、また、私は@types/cropperjsパッケージから全体index.d.tsをコピーしd.tsファイルを探しcropperjs.d.tsへと改名し、/root/src/node_modulesという名前のフォルダに入れますので。

tsc --traceResolutionで解像度をトレースすると、ディレクトリのd.tsファイルをtypescriptが受け取ることがわかります。

このソリューションの利点は、コードに触れる必要がないことです。 @types/cropperjsが欠落しているメソッドを更新すると、カスタムnode_modulesディレクトリを削除してもすべてが機能します。 コードをコピーして貼り付ける必要があります。

関連する問題