2016-03-17 19 views
16

をマップするために活字体のタイピングのインストール方法 -Googleはそれを行うことができますどのように

typings install [googlemaps | google.maps] [--ambient] --save 

タイピングがERRこのエラーのバリエーションで終わるの私が試した組み合わせ!メッセージレジストリの "npm"の "googlemaps"を見つけることができません。

パーエイミーの提案、私はまた、関連するディレクトリにダウンロードして、私のmain.d.ts(私は他のエラーを取得しないよう明確に読み込まれているファイル)に

/// <reference path="main/ambient/google.maps/google.maps.d.ts" /> 

を追加しました。

そして、私が質問に答えるために、ウェブ上で何かを見つけることができません

私の最終目標は、エラー

エラーTS2503のこの種を取り除くことです。名前空間は「グーグル見つけることができません。

+1

Googleは[Typingsレジストリ](https://github.com/typings/registry)には何も載っていないようです。 [タイプ定義を直接ダウンロードする]必要があります(https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/googlemaps)。 – Amy

+0

ありがとう私はそれを試して私の質問を更新しました –

答えて

26

アンギュラCLI RC.0 +ソリューション

私は(今以前)に対して落胆なりの 'Googleマップ' ライブラリの答えの使用を認められました。

実際には、すべての必要な入力が行われており、その価値がほとんどない「googlemaps」ライブラリを内部的に参照しています。また、古い共通jsローダーを使用しているため、このライブラリはAngular CLI内では理想的ではありません。

代わりに、私は次のようなアプローチを示唆している:

npm install --save @types/googlemaps 

インポート

import {} from '@types/googlemaps'; 

ロード&使用(この機能は必ずマップスクリプトを作るインストールoですそれはオーバーオーバーと呼ばれることができるようNLY)、一度ページに追加

addMapsScript() { 
    if (!document.querySelectorAll(`[src="${googleMapsUrl}"]`).length) { 
    document.body.appendChild(Object.assign(
     document.createElement('script'), { 
     type: 'text/javascript', 
     src: googleMapsUrl, 
     onload:() => doMapInitLogic() 
     })); 
    } else { 
    this.doMapInitLogic(); 
    } 
} 

種類(型定義は、これに限定されない)を使用してください:のよう

const mapRef: google.maps.Map; 
const bounds: google.maps.LatLngBounds; 
const latLng: google.maps.LatLng; 
+0

このsrcを使用している場合: "https://maps.googleapis.com/maps/api/js"ランタイムエラーが発生しています。doMapInitLogicが定義されていません。このsrcを使用している場合は、「https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap」とonloadを削除します。「initMapは関数ではありません」という名前のメッセージが表示されます。 InvalidValueError "、stack:"エラーが発生しました。 – iOSAndroidWindowsMobileAppsDev

+2

doMapInitLogic()は、作成できる関数です(名前を変更して好きな名前に変更できます)。 –

+0

お願いします。 doMapInitLogic()で選択した言語をjavascriptにすることはできますか?私はタイスクリプトを避けようとしています。私はこの機能をどこに置くのですか?私が愚かな理由で私が従うことができるチュートリアルはありますか? – iOSAndroidWindowsMobileAppsDev

11

typings install google.maps --global

インストールする正しい方法がある今のところあなたはDefinitlyTyped

+0

私は間違った順序でコマンドを持っていたようですが、これを試してみました –

+7

タイピングは「ambient」を「v1.0.0」(https: //github.com/typings/core/releases/tag/v1.0.0) 'タイピングがインストールgoogle.maps --global'または 'タイピングがインストールDT〜google.maps --global' – HaRoLD

10

を検索する(--ambientにするために使用)--globalフラグが必要になります。実際には

typings install dt~google.maps --global [--save] 
15

、私のユースケースはAngular CLIです。必要なものはすべて

です
+0

Ionic2でテストRC3: "@ types/google-maps"と "typings install dt〜google.maps --global"と "/// " – AFD

+0

は私にとって魅力的です。 –

+0

はい!私は上記のように@typesをインストールしなければなりませんでしたが、/// <参照パス= "./../../../typings/globalals/gogleを追加する必要があります。 maps/index.d.ts "/>を入力してください。 – Dan

12

私はイオン2プロジェクトに対してこれらの手順をテストし、それが完璧に動作している: 1- タイピンググローバルインストール:タイピング経由google.mapsをインストール

npm install typings --global

2-

typings install dt~google.maps --global --save

3つのtsconfig.jsonを開き、下記のように "include"配列に"typesings/*。d.ts"を追加します(tsconfig.json)。

{ 
 
    "compilerOptions": { 
 
    "allowSyntheticDefaultImports": true, 
 
    "declaration": false, 
 
    "emitDecoratorMetadata": true, 
 
    "experimentalDecorators": true, 
 
    "lib": [ 
 
     "dom", 
 
     "es2015" 
 
    ], 
 
    "module": "es2015", 
 
    "moduleResolution": "node", 
 
    "sourceMap": true, 
 
    "target": "es5" 
 
    }, 
 
    "include": [ 
 
    "src/**/*.ts", 
 
    "typings/*.d.ts" 
 
    ], 
 
    "exclude": [ 
 
    "node_modules" 
 
    ], 
 
    "compileOnSave": false, 
 
    "atom": { 
 
    "rewriteTsconfig": false 
 
    } 
 
}

+0

私の場合は、" typings/*。d.ts "という場所にtsconfig.jsonの部分がありませんでした。しかし、今私は新しい問題に直面している。膨大な量のコンパイルエラーは、すべて「Duplicated Identifier」に関連しています。 –

+0

Excellent.Thisは私のために働きます。ありがとうございます:) – Sampath

+0

@BecarioSeniorあなたはそれを修正したに違いありません。ちょうど将来の参考のために。 tsconfig.jsonでファイルを追加する場合(手順3)には、typings/index.d.tsファイルの内容を削除します。これは、基本的に同じものを実行しているため、google mapsの内容を2回ロードし重複エラーが発生するためです。 – Luckyy

7

をtypescriptです2

npm install --save @types/googlemaps 

は、あなたのTSconfigにtyperootsを追加

{ 
    "compilerOptions": { 
    "typeRoots": ["./node_modules/@types/"] 
    } 
} 
関連する問題