TypeScriptの基本構文

TypeScript の基本構文を紹介します。この記事は、TypeScript 2.2.1 時点で執筆しています。

TypeScript は JavaScript と互換性があるため、JavaScript もそのまま動くはずです。

記述方法

トランスパイラがファイル全体を TypeScript として解釈するため、特に必要なことはありません。環境の構築方法については、こちらをご覧ください。

エントリポイント（main 関数）

特にエントリポイントの指定は必要ありません。上から順に実行されていきます。

インクルード（他ソースファイルの読み込み）

「reference」によって、トランスパイラに情報を渡すことで、他のソースファイルのクラスを使用することができます。ただし、実際の型の利用方法 CommonJS や AMD など、さまざまな形式があり、少々複雑です。また、トランスコンパイラによって 1 つの JavaScript ファイルに結合することもできます。この場合、「reference」は参照関係を明示することになり、結合の際の順序に影響を与えます。

/// <reference path="ファイル名" />
 
// 例えば
/// <reference path="sumire.ts" />

CommonJS や AMD を用いた、複数ソースファイルによる開発は、別途紹介記事を書こうと思います。

変数宣言

変数宣言には、「var」や「let」を用います。変数の型は、変数名の後に「:」をつけて宣言します。var とした場合、スコープが関数になります。一方 let を使った場合、スコープはブロック単位になります。

var 変数名: 型名;
let 変数名: 型名;

//  例
var n1: number = 0;
let n2: number = 0;

ただし、クラスのメンバ変数を宣言する場合には、アクセス修飾子のみで「var」を省略可能です。また、変数の初期化や戻り値の型などにより型の推論が可能な場合、型の指定は省略可能です。

関数

関数定義

関数定義は以下の通りです。

function 関数名(引数1: 型, 引数2: 型, ...) : 戻り型{
 //  処理...;
 return;
};

戻り値がない場合は、戻り型は省略します。（そもそも省略可能です。）
デフォルト引数がサポートされています。
```
function foo(val:string = "hello") 
```
のように指定できます。
引数型を省略した場合、any 型になります。

関数呼び出し

関数の呼び出し方法は以下の通りです。

関数名( 引数1, 引数2, ...);

可変長引数

可変長引数はサポートされています。引数の最後に「…変数名 : 型 ( 配列 )」を追加します。

function sum(...words: numbers[]) {
   // wordsという名前でアクセスできます
}

無名関数

無名関数もサポートされています。無名関数は、変数に代入可能です。

function(引数リスト): 戻り型{}

の形式で定義できます。

var hello = function(name: string): string
{
    return name;
};

アロー関数式により、定義することもできます。例えば、上記の関数を以下のように書くこともできます。書式は、

(引数リスト): 戻り型 => {}

です。

var hello = (name:string): string =>{
    return name;
}

クラス

クラスの定義は以下の形式で行います。TypeScript では、クラス内でメンバにアクセスするためには this が必須（のよう）です。メソッド呼び出しの際も必須です。

class クラス名
{
    // メンバ変数の宣言
    public member = '???';
    // ...

    // メソッドの定義
    public foo() {
        return this.member;
        // クラスのメンバにアクセスするためには、thisが必須
    }
}

TypeScript の this は、Java や C++ の this とは仕様が異なります。詳細はこちらを御覧ください。JavaScript 向けの記事ですが、同じ感覚で利用できます。

メソッドのオーバーロード

メソッドに対して、複数の引数の受け取り方法を定義することができます。例えば以下の通りです。

class Vector2 {

    public x: number;
    public y: number;

    constructor();
    constructor(arr: number[]);
    constructor(x: number, y: number);
    constructor(x?: any, y?: number) {

        if (x == null) {
            this.x = 0;
            this.y = 0;
        }
        else {

            if (typeof x === "number") {
                this.x = x;
                this.y = y;
            }
            else {
                this.x = x[0];
                this.y = x[1];
            }
        }
    }
}

受け取り方は複数定義できますが、実際に動作を実装できる関数は最後のひとつだけです。実装の際には、すべての引数を引き受けられるような書き方をしなければいけません。結構面倒です。

静的メンバ

静的メソッドの定義と呼び出し。

class MyClass {
    // staticキーワードを追加
    public static foo() {
        // ...
    }
}

// クラス名::メソッド名 で呼び出し
MyClass.foo();

静的メンバ変数の宣言と呼び出し。クラス内からそのクラスの静的メンバにアクセスするためには、「self::」で参照します。

class MyClass
{
    //静的メンバ変数の宣言
    public static static_member = 'foo';
    public foo() {
        // クラス内からの静的メンバへのアクセス
        return MyClass.static_member;
    }
}

//静的メンバ変数へのアクセス
var v = MyClass.static_member;

オブジェクト生成（new）・メンバへのアクセス

「new」を使用します。引数付きのコンストラクタが定義されていれば、引数を渡すことができます。

var obj:MyClass = new MyClass("Test");

メンバへのアクセス方法

var obj = new MyClass();

//メンバ変数
obj.member;

//メンバメソッドの呼び出し
obj.Hello();

オブジェクトのメンバにアクセスするためには、ドット演算子「.」を使用します。

アクセス修飾子

クラスメンバのアクセス権を設定できます。

表1: アクセス修飾子

public	どこからでもアクセス可能
protected	そのクラス自身とそのクラスを継承したクラスからのみアクセス可能
private	そのメンバーを定義したクラスからのみアクセス可能

アクセス修飾子をつけない場合、public になります。

継承

extends キーワードで、クラスを継承できます。同一の名前の関数を定義することで、親クラスのメンバ関数をオーバーライドできます。オーバーライドする前の親のメンバにアクセスするためには、「super」で参照します。

class ExtendClass extends ParentClass
{
    // 親クラスのメソッドをオーバーライド
    Hellow()
    {
        // 親クラスのメンバにアクセスするには、super. を使う
        super.Hellow();
    }
}

多重継承はできません。

コンストラクタ・デストラクタ

コンストラクタの定義が可能です（デストラクタはないようです）。コンストラクタは「constructor」という名前の関数を定義します。なお、クラスを継承した場合、親クラスのコントラクタは自動的には呼ばれません。呼び出したい場合は、「super();」のように明示的に呼び出す必要があります。

class MyClass {
   //コンストラクタ
   public constructor() {
      
   }
}

インタフェース定義

インタフェースの定義に対応しています。以下の形式で定義します。

interface インタフェース名
{
    public foo1();
    public foo2();
    // ...
}

インタフェースの実装には、「implements」を使用して、クラス定義時に指定します。インタフェースに定義された関数を実装する場合、特別なキーワードは必要ありません。

interface iInterface
{
    public function foo();
}

// インターフェイスを実装
class MyClass implements iInterface
{
    public foo()
    {
    }
}

演算子

表2: 算術演算子

四則演算	+ – * /
剰余	%

表3: 代入演算子

代入

表4: 論理演算子

論理積	&&
論理和	\|\|
否定	!

表5: 比較演算子

大小比較	> < >= <=
等しい（型変換後に比較）	==
等しくない（型変換後に比較）	!= <>
等しい（型が等しく、値も等しい）	===
等しくない（型もしくは値が等しくない）	!==
３項演算子	( 条件 ) ? (true) : (false)

表6: 型演算子

キャスト	< 型名 > 変数	例 ) <number>f
型を調べる	変数 instanceof 型名	例 ) a instanceof MyClass

instanceof は、親クラスを継承したクラスのインスタンスであるかどうかを調べることも可能です。

表7: ビット演算子

ビット積	&
ビット和	\|
否定	^
排他的論理和	~
左シフト	<<
右シフト	>>

表8: 文字列演算子

文字列結合

コメントは、以下の形式がサポートされています。

// 行末まで

/* 閉じる
　 まで　 */

条件分岐構文

if 文と switch 文がサポートされています。

if 文

if (条件1) {
    // 条件1がtrueの時
} else if (条件2) {
    // 条件1がfalseで条件2がtrueの時
} else {
    // 条件1・条件2がfalseの時
}

switch 文

switch (比較対象) {
    case 条件1:
        //...
        break;
    case 条件2:
        //...
        break;
    default: //それ以外
        //...
}

ループ構文

for 文

for (var i = 1; $i <= array.length; i++) {
    array[i];
}

while 文

var num = 0;
while (num < array.length ){
    num++;
}

foreach 文（配列の列挙）

「for … of」文を用います。（似たような構文に「for … in」がありますが、これは、オブジェクトのプロパティ名を列挙していく構文です） TypeScript

var arr  = ["あ", "い", "う"];
for (let v of array) {
  console.log(v);
}

要素を受ける変数に型をつけると怒られました。

break, continue

break 、continue ともにサポートされています。

演算子のオーバーロード

対応していません。

プロパティ（アクセッサ）

メソッドの前に「get」「set」をつけることで、アクセッサを定義できます。

class Vector2 {

    private x: number;
    private y: number;

    public get X(): number{ return this.x; }
    public get Y(): number{ return this.y; }
    public set X(v:number){ this.x = v; }
    public set Y(v:number){ this.y = v; }
    
}

インデクサ

対応していないようです。

文字列リテラル

シングルクォート（'）もしくはダブルクォート（"）でくくります。特殊文字も使用可能です。

定数

「const」キーワードによって宣言できます。ただし、クラス内で定義するとエラーになります。

const MIN_VALUE:number = 0.0;