2020年8月 – Webプログラマーきたむーの技術ブログ

前回のTypeScript入門その1に続いて、第2回の今回は、主にデータ型などを説明しようと思います。

1. 主要なデータ型
基本的なデータ型は、次の3つです。
・boolean
取ることができる値はtrueかfalseのどちらかだけです。
・number
数値を値に取ることができます。整数、小数の区別はありません。
・string
文字列を値に持つことができます。

変数を宣言する時は、下記のようにして型とともに宣言します。

let enabled:boolean;
let money:number;
let name:string;
enabled = true;
money = 100;
name = "Ichiro";

money = "ABC";   // これはダメ。コンパイル時にエラーになります。

このように型を宣言すると、その変数には型に当てはまる値以外は入れられなくなります。JavaScriptでは10 == “10”がtrueになったりということもありましたが、TypeScriptではそもそも比較自体ができなくなります。
とはいえ、何らかの理由で型を指定したくない場合も場合によってはあるかと思います。このような場合はlet value:anyという風にany型を使うことでどのような型でも代入できるようになります。JavaScriptで書かれたソースをTypeScriptに書き換える場合なんかでたまに使うこともあるかもです。

2. 変数宣言の指定子
先ほどの変数宣言の例ではletを使って宣言しましたが、varだと関数の中での宣言なら関数内で、それ以外ならグローバルで使えるようになりますが、letは宣言された構文内のみがスコープになります。
varよりはletを使った方が想定外のところで値が書き換わるようなことがなくなるので、varにしなければいけない理由がある場合以外はletを使った方がいいと思います。
ちなみに、letはJavaScriptではES6から使えるようになりました。
また、変数宣言ではvarとletですが、定数宣言ではconstを使います。constで宣言されると、それ以降値の変更が一切できなくなります。
最近letも使わずconstだけを使うべきだという記事も見ましたが、確かに値を変更することがありえない場合はconstを使うべきですが、letでないと実装しづらいケースも多々あると思うので、個人的には「そこまでこだわらなくてもいいのでは」派です。

3. 配列
TypeScriptにも、JavaScriptと同じように配列は存在します。配列の宣言は下記のように行います。

let data:number[];
data = [1, 1, 2];
data.push(3);
console.log(data);   // 1,1,2,3
data.push("xyz");    // だからダメだってば

このように、配列もどんな型を要素に入れられるかの宣言を行います。なので、配列の要素に指定した型でないものを入れようとするとエラーになります。

この他にも、列挙型（enum）やタプルについても説明したかったのですが、次回にします。

AltJSとは
Webプログラミングのサーバー側言語はPHP、Java、Python、Ruby、・・・とたくさんありますが、フロントエンド側の言語となると、ほぼJavaScript一択。しかしJavaScriptにも下記のような問題点があったりします。
・型付けが自由すぎてそれに由来する想定外の問題が起きやすい（例えば1==”1″がtrueになったり）
・オブジェクト指向が独特（プロトタイプベース）
・スコープを絞りにくいそこで、最近ではこう行った問題を解決するために、より実装しやすいプログラミング言語（AltJSと言います）で実装してJavaScriptに変換するというのが流行りになりつつあります。
というわけで、これから何回かに渡って代表的な AltJSの1つであるTypeScriptについて紹介していこうと思います。
TypeScriptの特徴
TypeScriptは2012年にマイクロソフトによって開発された言語で、下記の特徴を持っています。
・JavaScriptのスーパーセットである（JavaScriptの機能はTypeScriptでも使える）
・静的型付けの言語である（数値型の変数に文字列を代入したりするとエラーになる）
・クラスやインターフェースなど一般的なオブジェクト指向の機能を持っている（クラスについてはJavaScriptでもES6から使えるようになりましたが）
TypeScriptの環境構築
まず前提として、npmが使える環境であるとします。とりあえず、Windowsならコマンドプロンプトで、MacならiTerm2で”npm -v”と打ってみて、バージョンが出てくればOKです。入っていない人はこちらを参考にしてNode.jsとnpmをして下さい。
次に、TypeScriptをインストールします。
npm install -g typescript
インストールし終わったら、とりあえず下記の内容をコピーして、.tsを拡張子につけたファイル名（例えばhello.ts）で保存して下さい。
```
class Hello {
  public name: string;
  constructor(name: string) {
    this.name = name;
  }
}

let user = new Hello("World");
console.log("Hello " + user.name);
```
そしたら、”tsc hello.ts”で保存したファイルをコンパイルすればhello.jsというJavaScriptのファイルができているはずです。
後は、HTMLに埋め込んでブラウザで開けば、検証ツールで”Hello World”と出力されることが確認できますし、node hello.jsでターミナル上で出力を確認してもいいでしょう。次回はTypeScriptで使えるデータ型などについて説明しようと思います。

月: 2020年8月

TypeScript入門　その2

TypeScript入門その1