1

モジュールとして書かれていないnpm libを使いたい

npm install "js-marker-clusterer" --save

これにより、必要な JS ファイルがインストールされます。

./node_modules/js-marker-clusterer/src/markerclusterer.js

// this is the Class I want to export/import
function MarkerClusterer(map, opt_markers, opt_options) {
  // ...
}

TS ファイルでこのクラスを拡張して使用したいと考えています。TS docs によると、shorthand ambient moduleこれを行うために a を宣言できますが、さまざまなファイルをどこに置くべきかわかりません。

省略形アンビエント モジュール

新しいモジュールを使用する前に宣言を書き出すのに時間をかけたくない場合は、省略形の宣言を使用してすぐに始めることができます。

declares.d.ts (このファイルはどこに置くのですか?)

/// <reference path="node.d.ts"/>
declare module "hot-new-module";

省略形モジュールからのすべてのインポートは any 型になります。

import x, {y} from "hot-new-module";
x(y);

現在、次のものがありますが、正しくありません。

./src/app/shared/my-marker-clusterer.d.ts

/// <reference path="/node_modules/js-marker-clusterer/src/markerclusterer.js" />
// ERROR: typescript says *.js is an unsupported extension

declare module "js-marker-clusterer" {
  export class MarkerClusterer {
    constructor(map: any, opt_markers?: any, opt_options?: any);
    map_: any;
    markers_: any[];
    clusters_: any[];
    ready_: boolean;
    addMarkers(markers: any[], opt_nodraw: boolean) : void;
  }
}

/src/app/shared/my-marker-clusterer.ts

/// <reference path="./my-marker-clusterer.d.ts" />
import { MarkerClusterer } from 'js-marker-clusterer';

declare var google;

export class MyMarkerClusterer extends MarkerClusterer {
  constructor(map: any, opt_markers?: any, opt_options?: any) {
    super(map, opt_markers, opt_options);
  }

  addMarkers(markers, opt_nodraw) {
    super.addMarkers(markers, opt_nodraw)
    this.triggerClustersChanged()
  }
  triggerClustersChanged(){
    google.maps.event.trigger(this.map_, 'clustersChanged', this.clusters_);
  }
}

モジュールを優先して使用しrollupjsていますes2015

4

1 に答える 1