VB的に覚える TypeScript その5 〜 Visual Studio 2015

  • 2017.03.10 Friday
  • 23:49

 

さて、次の話をする前に、モジュールとかクラス、Namespaceなどの話を書いてみる

 

■VBのモジュール

VBをずっとゴリゴリ書いている人なら、

モジュール(module)という言葉は何となく分かると思う

 

   1:  Module Hoge
   2:      Private Function fcHoge() As String
   3:          Return "Hoge.fcHoge"
   4:      End Function
   5:   
   6:      Public Function exHoge() As String
   7:          Return "Hoge.exHoge"
   8:      End Function
   9:  End Module

 

こんな感じに書いて、

 

   1:  MessageBox.Show(Hoge.exHoge)

 

と呼ぶと、

 

 

ちなみに、VB.netは、VBの互換(?)としてモジュールが残っているような感じなので、

例えば、これからC#もやろうと思っている場合は、

モジュールというものはないので、

クラスでSharedな変数やメソッドを書くことになる。

いつもの他力ちゃんします。

 

連載! とことん VB: 第 14 回 Visual Basic 固有の「モジュール」(Module) の役割

 

 

■TSのモジュール

TSの場合もほぼ同じような感じである。

 

   1:  module Hoge {
   2:      function fcHoge():string {
   3:          return "Hoge.fcHoge";
   4:      }
   5:      export function exHoge(): string {
   6:          return "Hoge.exHoge";
   7:      }
   8:  }

 

こんな感じに書けて、

 

   1:  alert(Hoge.exHoge());

 

呼ぶと

 

 

■moduleはnamespace

ちなみに、TSでもmoduleで書くのは一昔前で、

最近の書き方としては、

 

   1:  namespace Hoge {
   2:      //コードを書く
   3:  }

 

といったように、module → namespace を使うのが良いらしい。

 

TSを勉強する中で、内部モジュールとか外部モジュールとかいう話が出てきて、

名前負けして挫折してしまう部分かもしれませんが、

 

内部module は namespace のことだよと言われるとちょっと分かってくる。

 

 

■外部モジュール

では、外部モジュールは?という話だが、

ちょっとVBではなく、VBAの方が感覚的に似ているので、

Excelのマクロで2つのモジュールを作って、それぞれにコードを書いて実行すると

 

 

ファイルをまたいで実行される。

 

TSの外部モジュールの考え方もこれと同じで、

新規にtsファイルを作って、

 

 

その中に、似たようなソースを書いて

 

 

今度は別のTSファイルから呼び出すと・・・

 

 

ちゃんと補完してくれる → ファイルをまたいで利用できるようだ。

もちろん実行すると、

 

 

ちゃんと出力される。

 

つまり、外部モジュール→別ファイルに書いたコードという感じであろう。

 

■外部モジュールの参照

ちなみに、今回はVSで「TypeScriptを使用したHTMLアプリケーション」を使っているが、

どうやらこのプロジェクトは、VBのプロジェクトのように、

次に書く、参照の手続きが要らないようだ。

 

しかし、その他の開発環境では必要になるので(そのうち書くが、jsファイルを取得する際はVSでも必要になる)、

忘れずに書いておく方がよい。

(不要ならコメントアウト)

 

まず、file1.ts を参照したい TSファイルのヘッダ(先頭行)に

スラッシュを3つ連ねて、続いて、reference タグを書き、

タグ内のpathに参照するTSファイルのパス(相対でよい)を入れる

 

   1:  /// <reference path="file1.ts" />

 

こんな感じ

 

 

このおまじないをすることで、先ほどのように補完してくれるようになると思う。

 

次に、これは「TypeScriptを使用したHTMLアプリケーション」でも必要になるが、

reference自体はTSだけのおまじないなので、コンパイルされるたJSでは参照はしてくれない。

 

なので、HTMLのソース内に

 

   1:  <script src="file1.js"></script>

 

と、jsファイルのパスを指定しておく必要がある。

もちろん読む順番は使う場所より前になるので、

 

 

という感じになる。

 

この手続きをすることで、先ほどの

 

 

が出力される。

 

■exportとimportとrequireによる参照

ちなみに、外部モジュールはexport、import、requireでも呼び出せるようなのだが、

ちょっと書いてみたのですが、「TypeScriptを使用したHTMLアプリケーション」ではうまくimportできなかった。

 

とりあえず、書き方として覚え書きしておく

referenceタグではなく、importを使ってファイルを指定する。

(ファイル名は拡張子なしでよい)

 

   1:  import hoge = require('./file1');

 

ただ、上のままのソースだと、

 

TS2306 ファイル *** はモジュールではありません。

 

と警告が出てしまう。

タイトルの通り、外部モジュールにexportが書かれていないからである。

 

file1.ts の中を次のように export 付きの namespace hoge を取り付けて、

さらに、内部の出力したいメソッドなどに export を付ける。

 

   1:  export namespace hoge {
   2:      function fcHoge(): string {
   3:          return "file1.fcHoge";
   4:      }
   5:      export function exHoge(): string {
   6:          return "file1.exHoge";
   7:      }
   8:  }

 

これで、警告が消えてくれるので、

先ほどの呼び出しを変更する。

 

   1:  alert(hoge.hoge.exHoge());

 

hogehogeばかりで分かりにくいが、

先頭のhogeがimportしたhoge

次の hoge が export した namespace のhoge

最後は export したメソッドになる。

 

これでうまく動いてくれれば良いのだが、

自分の「TypeScriptを使用したHTMLアプリケーション」では正しく動いてくれなかった。

 

プロジェクトのプロパティのビルド方法をAMDに変えてみたりしたが、

出力される結果は、それぞれのコンパイルの書式に変換はされているようだが、

やっぱりうまく動作しなかった。

 

 

もしかすると、他におまじないが足りないのかもしれない。
解決方法が分かれば追記したい。

 

とりあえず、ここでは(「TypeScriptを使用したHTMLアプリケーション」では)

referenceタグでの参照(または、省略)の方法で話をしていく。

 

その場合の file1.ts は namespace の export が取れて、

 

   1:  namespace hoge {
   2:      function fcHoge(): string {
   3:          return "file1.fcHoge";
   4:      }
   5:      export function exHoge(): string {
   6:          return "file1.exHoge";
   7:      }
   8:  }

 

となって、

 

   1:  alert(hoge.exHoge());

 

という感じで呼び出せる。

 

■export

さて、話をずいぶん飛ばしているが、

exportについて説明をしていなかった。

 

外部モジュールで書いた様に、namespace や class 内の変数やメソッドを

他の namespace 内のメソッドや class 内で使えるように出力するよ という意味になる。

 

なので、上の namespace hoge 内の export の付いていない fcHoge は別のとこからは参照することができない。

 

 

export が付いていないと private、付いていると public 見たいな感じになる。

 

ようやく一番最初のVBとTSのソースが同じような関係であると説明できた。

 

ところで、TSの module は namespace だよという話をしたが、

VBで Namespace に変更して書いてみると

 

 

怒られる。

VBではNamespace直下にメソッドはおけないので、

module や class を作って、その下に置く必要がある。

 

 

 

長くなったので、クラスは次回


 

関連記事

VB的に覚える TypeScript その1 〜 Visual Studio 2015

VB的に覚える TypeScript その2 〜 Visual Studio 2015

VB的に覚える TypeScript その3 〜 Visual Studio 2015

VB的に覚える TypeScript その4 〜 Visual Studio 2015

VB的に覚える TypeScript その5 〜 Visual Studio 2015

VB的に覚える TypeScript その6 〜 Visual Studio 2015

 

HTMLアプリのデバッグができない?〜VS2015 + HTMLアプリケーション

XAMLデザイナーのデザインビューが表示されない?〜Visual Studio 2015

 

 

コメント
コメントする








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

calendar

S M T W T F S
 123456
78910111213
14151617181920
21222324252627
28293031   
<< May 2017 >>

search this site.

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

categories

アマゾン

楽天

selected entries

archives

recent comment

recent trackback

profile


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

others

mobile

qrcode

powered

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