3. typescirptの構文について

Tweet

typescirptの書き方については、公式サイトや本、WEBを参照してください。
本章では、ざっくりtypescirptとjavascriptの違いを書きます。

型を宣言する必要がある

typescriptというだけあって、C言語やjavaのように、変数に型を宣言する必要があります。
PHPやPythonに慣れてしまうと型の宣言は面倒ですが、つまらないコーディングミスを防ぐには良いプログラミングだと思います。
javascriptでは、変数を宣言するときは

var str = "aiueo";

と宣言しますが、typescirptではvarを使わず、letを使います。

let str:string = "aiueo";

varも使うことはできますが、これは互換用に残っているもので、可能な限り使うのはやめましょう。

配列・連想配列・列挙型・タプルが使える

これは大抵のプログラミング言語なら使えますが、typescriptでも使えます。

アロー関数が使える

これも最近の言語では増えてきました。typescirptでも使えます。

共用型

C言語の共用体がありますが、アレに似ているかもしれません。
typescirptでは、文字列かbooleanだけ変数に入れていいよ、みたいなことができます。
正直、あまり使わないような気もしますが。

let data:string:boolean;

のような書き方をします。

null非許容型

あまり聞きなれない方もいるかと思います。
わたしは、androidアプリの開発言語に採用されているkotlinで、null許容型を知りました。
変数にnullの代入を許さない記法です。

let data:string = null;

と書くと、コンパイルエラーになります。
C言語などでは、関数の引数チェック時にNULLだったらエラーを返す、みたいなコードを書くと思いますが、typescriptやkotlinでは、そもそも引数にnullが渡ってくるようなケースはコンパイルエラーにするという、斬新な発想です。

でも、場合によってはnullを渡したいケースもありますよね？
そういう場合は次のように書きます。

let data:string|null = null;

え？そしたら、関数の引数に渡される値がnullかどうかチェックしないとダメってことになるよね？
とも思います。

そういうときは、?演算子で判定します。
特にクラスを使う場合に使用すると、効果がありそうです。
例をコード1に記します。

コード1

class NullTestClass {
    public test() {
        console.log("hello typescirpt");
    }
}

let cls:NullTestClass|null = null;
let r:number = Math.random();
console.log(r);

if(r > 0.5) {
    cls = new NullTestClass();
}

cls?.test();

1行目～5行目でclassを宣言しています。testメソッドを呼び出すと、「hello typescirpt」のメッセージが表示されます。
7行目でnullを許容する変数clsを宣言しています。

8行目は0.0～1.0までの間でランダムな数字を返す関数です。
11行目では乱数の値が0.5より大きいときだけ、cls変数にクラスのインスタンスを代入します。
つまり、15行目では、cls変数がnullだったり、インスタンスが設定されていたりします。
clsがnullのときにtestメソッドを呼び出すと、エラーになってしまいます。
nullの場合はtestメソッドを呼び出さないようにするには、おっさんプログラムだと、次のように書くと思います。

if(cls != null) {
    cls.test();
}

しかし、null許容型を持つtypescirptでは、15行目のように?演算子を使って書きます。
cls変数にインスタンスが設定されている場合に限り、testメソッドを実行する、と書いているのと同じ意味になります。
clsがnullの場合はtestメソッドが呼び出されないだけで、アプリケーションエラーにはなりません。

ただ、15行目以降も処理があり、clsがnullだった場合は処理を打ち切りたい（大抵はそう）場合は、素直に

if(cls == null) {
    return;
}

で良いと思います。

オブジェクト指向

旧javascirptでオブジェクト指向プログラムを書こうとすると、何かと独特な記法を用いる必要がありました。
typescirptでオブジェクト指向を書く場合は、継承はもちろん、setterやgetter、インターフェースなどが簡潔に書けるようになっています。

ソース分割

従来、javascirptから別のjavascirptのソースを呼び出すことはできず、ソース分割ができませんでした(できなくはないけどややこしい)。
typescirptではソース分割ができるようになります。
typescirpt以外にrequireJSなどでもできますが。

エクスポートする側にはexport文を書きます。

export function test() {
    console.log("hello typescirpt");
}

使用する側は、import文でソースを取り込みます。

//実行
import {test}  from "./sample";

test();

まとめ

超大雑把に書きましたが、ソース分割がC言語やjavaのように簡単にできるようになったはありがたいです。
主に以下の本を参考にまとめました。
中々技術文書の本は、大変な労力な割に利益になりにくいので、是非買ってあげてください。

実践TypeScript
速習 TypeScript 第2版 速習シリーズ