TypeScriptでLeafletを使ってみる・・・まで〜Visual Studio 2015

  • 2017.03.24 Friday
  • 23:26

 

さて、前回で終わりにしたが、

例えばjQueryなど、JavaScriptにしかないコードをTSに取り込むことはできるのか。

という話

 

ここ最近、黄色い電気ネズミゲームで良く目にするであろう地図でも使われているLeafletを

TypeScriptでも使えるのか調べて見たところ、

d.tsさえ取り込めば行けるような感じだったので、Visual Studioに組み込んでみることにした。

 

d.tsというのは、

簡単に言えば、C言語のヘッダファイルのようなものになる。

 

TSは型が定義された言語であるが、JavaScriptはそれがないので、

ソースをゴリゴリ書こうと思っても、型が不明と言われてしまう。

そこで、このd.tsというファイルで各変数やメソッドの型を定義してあげることで、

TSからJSの機能が使えるようになるわけである。

 

 

さて、下の記事によると、Leafletのd.tsを入れるには、npmコマンドを打つようである。

 

Making Map with Leaflet in TypeScript

 

なので、Visual Studioにnpmを組み込む必要があるので、

npmについて調べたところ、次の記事を見つけた。

 

最近のWebフロントエンド開発環境を Visual Studio 2015 (VS Code ではない)で構築する - npm パッケージインストール編 -

 

Visual Studioに Package Installer というものをインストールすれば良いらしい。

 

ツールの拡張機能と更新プログラムから

Package Installerで検索してインストール

で、記事の通り、Quick Install Packageでインストールしてみたのだが、

 

 

どうも、インストールされたような感じがしない。

 

どうやらソリューションファイルと同じ場所にインストールされてしまったようだ。

 

ということで、(自分の場合は)コマンドから打ち込んだ方が良いということで、

ツール→NuGetパッケージマネージャー→パッケージマネージャーコンソールを表示させて

 

 

npmコマンドを打ち込む。

※npm versionでインストールされているか確認できる

 インストールされているなら上のPackage Installerのインストールは不要

 入れてしまっていて、不要であればアンインストールか無効にすれば良い

 

 

っとその前に、dirコマンドで現在位置を確認すると、

 

やはりソリューションファイルの位置にいるようなので、

インストールするプロジェクトのフォルダにcdコマンドで移動して、

 

 

Leafletをインストール
 

 

インストールする場合は、leafletだけコマンドを打ち込んでも

勝手にgeojsonもインストールしてくれるのだが、

 

@types¥leafletの下に、node_modules¥@types¥geojsonという感じで置かれてしまうので、

 

 

やはり手順通り、geojsonを先にインストールして、

Leafletを続いてインストールした方が良いようである。

 

 

インストールしても変化がないようなら、すべてのファイルを表示で表示すると、

node_moduleフォルダ〜〜ができているはずである。

 

 

 

続いてソースを書く前に、これからゴリゴリ書くTSファイルの先頭に

referenceタグを追加して、

leafletとgeojsonのパスを通しておく。

 

/// <reference path="node_modules/@types/geojson/index.d.ts" />

/// <reference path="node_modules/@types/leaflet/index.d.ts" />

 

ちなみに、おまじないを書いておかないと警告が出る

 

 

 

あとはソースをゴリゴリ書くだけ・・・

 

 

表示できたので、Typescriptからでも扱えているようだ

 

 

 

あくまでd.tsファイルは型宣言や補完に使うだけで、

実際に動いているのはJSファイルのソースになるので、

間違いなく書けば動くのは当たり前である。

 

 

追記1

npmが全く無反応なので、ああ、いつものプロキシか・・・

ということで、設定。

 

プロキシの設定はこちらを参考にした

npm の proxy と registry 設定

 

自分のプロキシは上2行で問題なく通った。

追記2

コンパイルをするとLeafletのindex.d.ts上で、こんなエラー(TS1084)が出る。

 

TS1084 無効な reference ディレクティブ構文です。

 

仕様書に書いてあるreference タグのtypesによると、

 

'/// <reference types="..." />

 

という先ほど書いたpath="〜〜〜"ではなく、types="〜〜〜"に変えることで、

先ほどインストールされた@type以下を自動的に参照してくれるようで、

自分の環境の場合、これがうまく働いていないようで、エラーが出ているようだ。

 

考えてみるとVSのtsファイルは特にreferenceを宣言しなくても

VBやC#のように勝手に全ソースを見渡してくれるので、

コメントアウトして上書き保存して対処すればよい(?かもしれない)

 

追記3

d.tsのコンパイルミスか、VSのTypeScriptがエラーに厳しいのかは難しいところだが、

上のLeafletを入れるとこういったエラー(TS1110)が出る

 

 

TS1110 型が必要です。

 

どういう風に直せば良いのかが難しいが、

考えてみるとd.tsファイルはあくまで型宣言のないjsファイルに型を持たせてあげている定義ファイルなので、

自分がゴリゴリ書くソースで上でこのファイルから戻り値などは来ない訳である。

 

基本的に実行されるのは、tsファイルを変換したjsファイル

 

あくまで宣言が通れば良いとすれば、エラーの出ないような型に変更してあげれば良さそうである。

 

上の例だと、falseはboolean型なので、boolean

nullは、とりあえずany型としてあげたらコンパイルが通った。

 

よく分からないときはany型を使って逃げてしまうのもあり?

 

このやり方が正しい角かの判断は難しいところだが、

実際に動作するときには、index.d.tsは使用されないので、自分の中では解決と考えている。

 

※あくまでd.tsファイル上での修正なので、

 自身のソースコード上でのエラーであれば、 適切な型宣言を行ってください。

 

追記3

これまた上と同様に、d.ts変換時のミスと思われます。

 

?マークはオプション(引数を省略できる)の変数という意味で、

この場合の警告は、クラスメンバーを省略可能できないということなので、

?を消せば良いと思われる。

 

TS1112 クラスメンバーを省略可能として宣言することはできません。
 

※こちらもあくまでd.tsファイルの回避策なので、

 自身のソースコードでは正しい書き方で回避してください。

 

 

 

コメント
コメントする








    
この記事のトラックバックURL
トラックバック

calendar

S M T W T F S
   1234
567891011
12131415161718
19202122232425
2627282930  
<< November 2017 >>

search this site.

よく使う、検索される投稿

categories

アマゾン

楽天

selected entries

archives

recent comment

recent trackback

profile


※当ブログはリンクフリーですが、 取材や雑誌等で掲載される場合は、事前にお知らせください

others

mobile

qrcode

powered

無料ブログ作成サービス JUGEM