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

  • 2017.03.12 Sunday
  • 22:58

 

前回はモジュールの話で終わってしまったので、

今回はクラスの話

 

■VBでクラスを書く

まずは、ここではよく使うfruitクラス(いつもは構造体ですが)をVBで書いてみる

 

   1:  Namespace Yaoya
   2:   
   3:      Public Class Fruit
   4:   
   5:          Private _Name As String
   6:          Private _Price As Integer
   7:   
   8:          Public Sub New(ByVal srcName As String, ByVal srcPrice As Integer)
   9:   
  10:              Me._Name = srcName
  11:              Me._Price = srcPrice
  12:   
  13:          End Sub
  14:   
  15:          Public ReadOnly Property Name() As String
  16:              Get
  17:                  Return Me._Name
  18:              End Get
  19:          End Property
  20:   
  21:          Public Property Price() As Integer
  22:              Set(value As Integer)
  23:                  Me._Price = value
  24:              End Set
  25:              Get
  26:                  Return Me._Price
  27:              End Get
  28:          End Property
  29:   
  30:          Public Overrides Function ToString() As String
  31:              Return Me._Name & ":" & Me._Price
  32:          End Function
  33:   
  34:      End Class
  35:   
  36:  End Namespace

 

せっかく前回Namespaseを書いたので、Namespase内でFruitクラスを定義してみた。

これを初期化(New)すれば使えるようになる。

 

   1:  Dim nwFruit As Yaoya.Fruit = New Yaoya.Fruit("みかん", 100)
   2:   
   3:  MessageBox.Show(nwFruit.ToString)

 

実行結果


余談になるが、VB2010以降であれば、かなり省略することができる。

 

   1:  Public Class Fruit
   2:   
   3:      Public ReadOnly Property Name As String
   4:      Public Property Price As Integer
   5:   
   6:      Public Sub New(ByVal srcName As String, ByVal srcPrice As Integer)
   7:   
   8:          Me.Name = srcName
   9:          Me.Price = srcPrice
  10:   
  11:      End Sub
  12:   
  13:      Public Overrides Function ToString() As String
  14:          Return Me.Name & ":" & Me.Price
  15:      End Function
  16:   
  17:  End Class

 

特にプロパティ内で処理がない場合はこの方がスッキリして見やすいであろう。

今回は次の話もあるので、最初の省略なしソースを使う。

 

 

■TSでクラスを書いてみる

さて、上のVBのクラスをTSで書いてみる

 

   1:  namespace Yaoya {
   2:   
   3:      export class Fruit {
   4:          private _Name: string;
   5:          private _Price: number;
   6:   
   7:          constructor(srcName: string, srcPrice: number) {
   8:              this._Name = srcName;
   9:              this._Price = srcPrice;
  10:          }
  11:   
  12:          get Name(): string {
  13:              return this._Name;
  14:          }
  15:   
  16:          get Price(): number {
  17:              return this._Price;
  18:          }
  19:   
  20:          set Price(value: number) {
  21:              this._Price = value;
  22:          }
  23:   
  24:          toString(): string {
  25:               return this._Name + ":" + this._Price;
  26:          }
  27:      }
  28:  }

 

だいたいこんな感じで、

こうやって、

 

   1:  var newFruit: Yaoya.Fruit = new Yaoya.Fruit("みかん", 100);
   2:   
   3:  alert(newFruit.toString());

 

実行結果

 

TSでもある程度の省略が可能である。

4〜10行目を

 

   1:  constructor(private _Name: string, private _Price: number) {
   2:  }

 

と置き換えることができる。

こちらもVBと合わせるために、省略なしの方を使う。

 

 

■コンストラクタ(New)と複数のコンストラクタ

クラスということで、コンストラクタ(VBはNew、TSはconstructor)をクラス内に定義する。

ちなみに、省略することも可能である。

 

逆に複数のコンストラクタを書いてみることもできるようだ。

 

例えば、VBで複数のコンストラクタを定義すると、

TSに変換するコードを意識しながら、

 

   1:  Public Sub New(ByVal srcName As String, ByVal srcPrice As Integer)
   2:   
   3:      Me.NewCore(srcName, srcPrice)
   4:   
   5:  End Sub
   6:   
   7:  Public Sub New(ByVal srcName As String)
   8:   
   9:      Me.NewCore(srcName, 0)
  10:   
  11:  End Sub
  12:   
  13:  Public Sub New(ByVal srcPrice As Integer)
  14:   
  15:      Me.NewCore("未定義", srcPrice)
  16:   
  17:  End Sub
  18:   
  19:  Private Sub NewCore(ByVal srcName As String, ByVal srcPrice As Integer)
  20:   
  21:      Me._Name = srcName
  22:      Me._Price = srcPrice
  23:   
  24:  End Sub

 

こんな感じに書いて、

そして、初期化してみると

 

   1:  nwFruit = New Yaoya.Fruit("みかん", 100)
   2:  MessageBox.Show(nwFruit.ToString)
   3:   
   4:  nwFruit = New Yaoya.Fruit("いちご")
   5:  nwFruit.Price = 300
   6:  MessageBox.Show(nwFruit.ToString)
   7:   
   8:  nwFruit = New Yaoya.Fruit(200)
   9:  MessageBox.Show(nwFruit.ToString)

 

実行結果

 

 

■TSの複数コンストラクタ

これをTSに書き直すと

 

   1:  constructor(srcName: string);
   2:  constructor(srcPrice: number);
   3:  constructor(srcName: string, srcPrice: number);
   4:  constructor(arg1: any, arg2?: any) {
   5:   
   6:      if (typeof arg1 === "string") {
   7:          this._Name = arg1.toString();
   8:          if (typeof arg2 === "number") {
   9:              this._Price = Number(arg2);
  10:          } else {
  11:              this._Price = 0;
  12:          }
  13:      }
  14:      else if (typeof arg1 === "number") {
  15:          this._Name = "未定義";
  16:          this._Price = Number(arg1);
  17:      }
  18:  }

 

ものすごく大ざっぱだが、こんな感じに書ける。

必要なコンストラクタを ; 区切りで定義して、

最後に、any型のコンストラクタを定義してあげることで、

複数のコンストラクタを作ることができるようだ。

 

ただ、前にも説明したように、any型で来るので、

それぞれの引数が、どのコンストラクタを通して初期化されたのかを

判別して変数に入れてあげる必要が出てくる。

 

自分の中だけで使う分には上のようなザックリでもよいが、

共有するためのクラスを作るなら判別はしっかりとしておいた方がよい。

 

さて、これを実行すると

 

 

何となく判別式を通っているようだ。

 

 

■?マークはOptional

説明が前後したが、arg2 の後ろに付いている?マークは、変数を省略可能であるという記号である。

VBで言うなら Optional となる。

 

   1:  Public Sub Hoge(ByVal arg1 As String, Optional ByVal arg2 As String = "hoge")
   2:  '処理
   3:  End Sub

 

VBのOptional は必ずデフォルト値が必要になるが、

同様にTSでもデフォルト値を設定できるようだが、

 

参考

TypeScript超入門(2):構文を理解する

 

TypeScriptを使用したHTMLアプリケーションではエラーが出てしまうようだ

 

パラメーターに疑問符および初期化子を指定することはできません。


とりあえず、デフォルト値は入れられないが、省略だけは可能であるので、

内部でNullかどうかという処理を入れる方がよい

 

 

■クラス内の変数を使うには

VBであれば、基本的にMeは省略できるが、

TSに書き換えをするときにだいたい同じ意味合いになるので、

今回は省略していない。

 

それとVBの話ですが、

継承などしたときに、継承基(MyBase)か継承先(Me)かを区別するのに、

書いておいた方が良いことがある。

 

さて、MeをTSに書き換えると、this になる。

こちらは省略できない。

 

Cannot find name xxx Did you mean the instance member this._Name ?

 

 

■プロパティ

VBのプロパティは、Property〜End Propertyを宣言して、

その中にget setアクセサを入れるが(上のソースで、Priceプロパティ)、

TSではProperty 〜 End Property はなく、

アクセサに、名前を付けて宣言する形となる。

 

また、VBのReadonly プロパティはgetアクセサだけ(上のソースで Name プロパティ)、

Writeonlyは set アクセサだけの宣言になる。

 

 

■メソッド

VBでメソッドを書く場合、

Sub や Function で定義して書くが、

 

TSのクラス内では、いきなりメソッド名から書く

ある意味 function を省略した形で書いているような感じと思えばよい。

 

 

■継承

上のFruitに追加機能を持たせた新しいクラスを作成することもできる。

まずは、VBの上のソースの一部を書き換えて

 

   1:  Protected _Name As String
   2:  Protected _Price As Integer

 

継承先で使わない場合は、privateのままで問題ありませんが、

もし使う場合はProtected にしておかないと警告がでます。

 

 

そして、継承クラスを作る。

 

   1:  Public Class FruitExt
   2:      Inherits Fruit
   3:   
   4:      Private _Sanchi As String
   5:   
   6:      Public Sub New(ByVal srcName As String, ByVal srcPrice As Integer, ByVal srcSanchi As String)
   7:   
   8:          MyBase.New(srcName, srcPrice)
   9:          Me._Sanchi = srcSanchi
  10:   
  11:      End Sub
  12:   
  13:      Public Property Sanchi As String
  14:          Set(value As String)
  15:              Me._Sanchi = value
  16:          End Set
  17:          Get
  18:              Return Me._Sanchi
  19:          End Get
  20:      End Property
  21:   
  22:      Public Overrides Function ToString() As String
  23:          Return MyBase._Name & ":" & MyBase._Price & ":" & Me._Sanchi
  24:      End Function
  25:   
  26:  End Class

 

ちょっと機能を追加した継承クラスを作ることができる。

 

これをTSに置き換える。

TSでも内部で使う場合は、

 

   1:  protected _Name: string;
   2:  protected _Price: number;

 

とprotected にする。

もちろん使わないならprivateのままでよい

 

あとは同じように書き換える

 

   1:  export class FruitEx extends Fruit {
   2:   
   3:      private _Sanchi: string;
   4:   
   5:      constructor(srcName: string, srcPrice: number, srcSanchi: string) {
   6:          super(srcName, srcPrice);
   7:          this._Sanchi = srcSanchi;
   8:      }
   9:   
  10:      get Sanchi(): string {
  11:          return this._Sanchi;
  12:      }
  13:      set Sanchi(value: string) {
  14:          this._Sanchi = value;
  15:      }
  16:   
  17:      toString(): string {
  18:          return this._Name + ":" + this._Price + ":" + this._Sanchi;
  19:      }
  20:  }

 

継承のおまじないは、VBの Inherits が、TSでは extends となる

 

VBの継承先のコンストラクタにある Mybase.New は、TSでは、super になる。

 

そして、基底の変数をMybase で呼び出したが、TSは this のままで良いようだ。

 

クラスはだいたいこんなところだろうか。

 

まだまだ話は続きます。


 

関連記事

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

 

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

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

 

コメント
コメントする








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

calendar

S M T W T F S
    123
45678910
11121314151617
18192021222324
252627282930 
<< June 2017 >>

search this site.

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

categories

アマゾン

楽天

selected entries

archives

recent comment

recent trackback

profile


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

others

mobile

qrcode

powered

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