TypeScriptの基本構文を紹介します。この記事では、TypeScript 2.2.1 時点で執筆しています。
ちなみに、TypeScriptはJavaScriptと互換性があるため、JavaScriptもそのまま動くはずです。

記述方法

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

[topBannar]

変数宣言

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

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

関数

関数定義

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

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

関数呼び出し

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

可変長引数

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

無名関数

無名関数もサポートされています。無名関数は、変数に代入可能です。「function(引数リスト): 戻り型{}」の形式で定義できます。

アロー関数式により、定義することもできます。例えば、上記の関数を以下のように書くこともできます。書式は、「(引数リスト): 戻り型 => {}」です。

 

クラス

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

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

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

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

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

静的メンバ

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

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

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

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

メンバへのアクセス方法

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

アクセス修飾子

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

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

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

継承

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

※ 多重継承はできません。

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

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

インタフェース定義

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

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

演算子

算術演算子

四則演算 + – * /
剰余 %

代入演算子

代入 =

論理演算子

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

比較演算子

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

型演算子

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

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

ビット演算子

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

文字列演算子

文字列結合 +

コメント

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

配列

Array()で生成できます。ある型の配列は「型名[]」とすることができます。また、型付きの配列を生成する場合は「Array<型名>()」で生成できます。

数値の配列の生成例

また、配列の生成時に以下のように初期化することもできます。

値の取得・設定

値の取得や設定は [] を用います。

要素数の取得

配列の「length」メンバにアクセスします。

条件分岐構文

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

if文

switch文

 

ループ構文

for文

while文

foreach文(配列の列挙)

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

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

break, continue

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

演算子のオーバーロード

対応していません。

プロパティ(アクセッサ)

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

 

インデクサ

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

Math関数

「Math」クラスの静的メソッドとして用意されています。

管理者がよく使うもの

円周率 Math.PI
三角関数 Math.sin Math.cos Math.tan Math.atan2
端数の切り捨て Math.floor
平方根 Math.sqrt
最大値 最小値 Math.max Math.min

インクルード(他ソースファイルの読み込み)

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

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

エントリポイント(main関数)

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

文字列リテラル

シングルクォート(””)もしくはダブルクォート(”)でくくります。特殊文字も使用可能です。

定数

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

[bottomBannar]