VB的に覚える TypeScript その3 〜 Visual Studio 2015
- 2017.03.09 Thursday
- 23:02
さて、ボタンを追加したので、
Input(Text) [Textbox]を適当に配置
[]内はVBのコントロール名
■テキストボックスをイベントに追加する
前回のボタンイベントにこのテキストボックスを追加してみる。
まずはVBで書くと（一応TSのコードに合わせるように書きます）
1: AddHandler Me.Button1.Click,
2: Sub()
3: Dim txName As String = Me.TextBox1.Text
4:
5: If txName <> "" Then
6: MessageBox.Show(txName & "さん")
7: Else
8: MessageBox.Show("ななしさん")
9: End If
10: End Sub
動かすと、
 |
 |
ちなみに、TextboxがNullの場合は、If文で分岐しているので、
となる
■VBのコードをTSで書いてみる
これをTSで書くと
1: fmBtn.onclick = (e) => {
2: var fmTxt = <HTMLInputElement>document.getElementById("Text1");
3: var txName: string = fmTxt.value;
4:
5: if (txName !== "") {
6: alert(txName + "さん");
7: }
8: else {
9: alert("ななしさん");
10: }
11: };
これも動かしてみると
Nullなら
■VB と TSを比較してみる
■型宣言の省略
さて、ソースを比較していく
fmTxtは前回と同じように、TS内でテキストボックスを使えるように用意した変数。
型はHTMLInputElement型でキャスト
今回は :HTMLInputElement という型宣言はしなかったが、
VBでも、
といった感じで型を省略しても、自動で推測してくれる機能があり、
それと同じようにTSでも = で何かしらの型を入れると推測してくれる。
試しにマウスポインタをfmTxtにあててみると、
型を推測してくれていることが分かる。
なお、一度型を宣言すると、JavaScriptのように違う型の値を入れることはできないのがTSの特徴
■変数宣言
改めて型の宣言を確認してみる。
前回はいきなりHTMLElement型を使ったが、
なじみの深い文字列型 string型を使ってみる。
上がVB、下がTSの宣言
VB: Dim txName As String
TS: var txName: string;
前回も書いた様に、Dim が var 、As が : 、後は目的の型
それと、C言語同様にコードの終わりを示す ; (セミコロン) で変数を宣言できる
上でも説明したように、=を使えば、推測してくれる
VB: Dim txName = Me.TextBox1.Text
TS: var txName = fmTxt.value;
個人的な意見であるが、型は省略せずに宣言してあげた方が良いと思う。
その場に応じてソースを書けば良いとは思うが、
後で見返したとき（他の人が見たとき）に型が書いてあった方が、
パッと見たときに分かりやすいかなと思う。
ちなみに、= で初期化しない場合で型を宣言しないと、
Object型(VB)、any型(TS)とされてしまう。
そのため、都度キャストが必要となってしまい、処理速度や生産性の低下に繋がる。
■他の型
上でstring型を使ったが、TypeScriptの公式サイトから基本的な型を抜き出すとこんなのがある。
| VB | TS |
|---|---|
| Boolean | boolean |
| String | string |
| Short | number |
| Integer | |
| Long | |
| Float | |
| Double | |
| Decimal | |
| Object |
any |
| Nothing |
null (undefine) |
最近はTuple型とかNever型とかあるようですが、
TSのバージョンによっては使えない（VS2015は1.5〜1.8）ものもあるので、
今回はよく使う基本の基本なところだけ、
あとはまた出てきたら。
それと基本型以外で使いそうなところで、
| VB | TS |
|---|---|
| Date | Date |
とかもある。
|
追記 ※TSのDateはDate型ではなく、Date interface であるため（VBも型と言うよりは構造体）、 実際の型(typeofで取得される型)はobject型となる。 interfaceを型のように判別するには、
1: toString.call(value);
を使う方法があるようだ。 （ただし、自作interfaceは難しいようだ）
参考URL
この場合、typeofでobjectとされたものでも、
だいたいこのような感じに取得できる。
|
細かいことは仕様書に他力ちゃんで、話を進める。
（あくまでVB→TSが目的です）
■If文
続いて条件式のIf文
VBでは、
1: If 条件 Then
2: 処理
3: Else
4: 処理
5: End If
と If 〜 Then End If で構成される。
TypeScriptはC言語などと同じ書式で、
1: if (条件) {
2: 処理
3: }
4: else {
5: 処理
6: }
となる。
今回の様な alert関数 一文だけなら、{}を省略して、
1: if (条件)
2: 処理;
3: else
4: 処理;
ということもできるが、
入れ子になるようなIf文では、else if や else がどの If文にかかってくるのか判別しにくくなるので、
今回の様な短い文以外で省略はしない方が良いと思う。
とりあえず、省略するときは ; を忘れずに
|
追記
こんな感じの{}省略ソースを書いてみたところ、
最後のelseが手前のifと連動していることがポインタをあてると分かる。
極端な例ではあるが、こういった場合は、最後のelse if は{}で括って、 elseを外側のif文であると教えてあげる必要がある。 |
さて、If文で他の言語と違うのが、条件式の演算式
C言語同様に == や != で良いのだが、
最近のJSの書き方的には、型を厳密に判別するために、
=== や !== など等号を3つ連ねるのが良いらしい。
その辺はずいぶん前の記事で書いたので省略
型を厳密にという意味で、TypeScriptでは===を使った方がよさそうである。
| VB | TS |
|---|---|
| = | === |
| <> | !== |
|
> >= |
> >= |
|
< <= |
< <= |
■テキストの結合
ちょっと出力したいときのメッセージボックス(MessageBox.Show)は、
JSでも使われている alert で出力すればよい
1つ2つくらいならいいが、
何個もメッセージを出していると、OKを押すのが嫌になるので、
コンソール（イミディエイトウインドウ）に出力するなら
VB: Debug.WriteLine("hogehoge")
TS: console.log("hegehoge");
と書けば良い。
さて、テキストの結合であるが、VBでは & を使って（※）結合するが、
※昔のVB6やVBAからの人は文字列同士の結合は & 数字の加算は + と覚えているかと思うが、
VB.netでは、文字列も + で結合することができる。
1: txName & "さん"
TSはC#と同じように + を使って結合する。
1: txName + "さん"
それと、"" (ダブルクォーテーション) を '' (シングルクォーテーション)に変えて
括ってげても文字列として認識してくれます。
1: txName + 'さん'
この辺は書き方人それぞれという感じです。
今回はVB的に覚えると言うことで、TS側でも "" を使うことにしますが、
これまでJSでいろいろ書いてきた感じですと、
JSは '' で文字列を書くことの方が多いかもしれません。
たぶん、タグ内に使われる名称などが "" なので、スクリプト内でこれを表現するためには、
1: var txTag = '<input id="Button1" type="button" value="button" />';
という風に '' で書くことになるからだと思います。
（もし、"" で書いた場合は、￥" でエスケープする必要がある)
※￥は半角
だいたいこんな感じで今回はここまで
関連記事
VB的に覚える TypeScript その1 〜 Visual Studio 2015
VB的に覚える TypeScript その2 〜 Visual Studio 2015
VB的に覚える TypeScript その3 〜 Visual Studio 2015
VB的に覚える TypeScript その4 〜 Visual Studio 2015
HTMLアプリのデバッグができない？〜VS2015 + HTMLアプリケーション
XAMLデザイナーのデザインビューが表示されない？〜Visual Studio 2015
