TypeScriptの基本構文を紹介します。この記事では、TypeScript 2.2.1 時点で執筆しています。
ちなみに、TypeScriptはJavaScriptと互換性があるため、JavaScriptもそのまま動くはずです。
記述方法
トランスパイラがファイル全体をTypeScriptとして解釈するため、特に必要なことはありません。環境の構築方法については、こちらをご覧ください。
[topBannar]
変数宣言
変数宣言には、「var」や「let」を用います。変数の型は、変数名の後に「:」をつけて宣言します。varとした場合、スコープが関数になります。一方letを使った場合、スコープはブロック単位になります。
1 2 3 4 5 6 7 8 |
var 変数名: 型名; let 変数名: 型名; // 例 var n1: number = 0; let n2: number = 0; |
ただし、クラスのメンバ変数を宣言する場合には、アクセス修飾子のみで「var」を省略可能です。また、変数の初期化や戻り値の型などにより型の推論が可能な場合、型の指定は省略可能です。
関数
関数定義
関数定義は以下の通りです。
1 2 3 4 5 6 |
function 関数名(引数1: 型, 引数2: 型, ...) : 戻り型{ // 処理...; return; }; |
※戻り値がない場合は、戻り型は省略します。(そもそも省略可能です。)
※デフォルト引数がサポートされています。
function foo(val:string = "hello") のように指定できます。
※引数型を省略した場合、any型になります。
関数呼び出し
関数の呼び出し方法は以下の通りです。
1 2 3 |
関数名( 引数1, 引数2, ...); |
可変長引数
可変長引数はサポートされています。引数の最後に「…変数名: 型(配列)」を追加します。
1 2 3 4 5 |
function sum(...words: numbers[]) { // wordsという名前でアクセスできます } |
無名関数
無名関数もサポートされています。無名関数は、変数に代入可能です。「function(引数リスト): 戻り型{}」の形式で定義できます。
1 2 3 4 5 6 |
var hello = function(name: string): string { return name; }; |
アロー関数式により、定義することもできます。例えば、上記の関数を以下のように書くこともできます。書式は、「(引数リスト): 戻り型 => {}」です。
1 2 3 4 5 |
var hello = (name:string): string =>{ return name; } |
クラス
クラスの定義は以下の形式で行います。TypeScriptでは、クラス内でメンバにアクセスするためにはthisが必須(のよう)です。メソッド呼び出しの際も必須です。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
class クラス名 { // メンバ変数の宣言 public member = '???'; // ... // メソッドの定義 public foo() { return this.member; // クラスのメンバにアクセスするためには、thisが必須 } } |
TypeScriptのthisは、JavaやC++のthisとは仕様が異なります。詳細はこちらを御覧ください。JavaScript向けの記事ですが、同じ感覚で利用できます。
メソッドのオーバーロード
メソッドに対して、複数の引数の受け取り方法を定義することができます。例えば以下の通りです。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
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]; } } } } |
受け取り方は複数定義できますが、実際に記述できる関数は最後のひとつのみです。最後の記述では、上のすべての引数を引き受けられるような書き方をしなければいけません。そのため、結構面倒です。
静的メンバ
静的メソッドの定義と呼び出し。
1 2 3 4 5 6 7 8 9 10 11 |
class MyClass { // staticキーワードを追加 public static foo() { // ... } } // クラス名::メソッド名 で呼び出し MyClass.foo(); |
静的メンバ変数の宣言と呼び出し。クラス内からそのクラスの静的メンバにアクセスするためには、「self::」で参照します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
class MyClass { //静的メンバ変数の宣言 public static static_member = 'foo'; public foo() { // クラス内からの静的メンバへのアクセス return MyClass.static_member; } } //静的メンバ変数へのアクセス var v = MyClass.static_member; |
オブジェクト生成(new)・メンバへのアクセス
「new」を使用します。引数付きのコンストラクタが定義されていれば、引数を渡すことができます。
1 2 3 |
var obj:MyClass = new MyClass("Test"); |
メンバへのアクセス方法
1 2 3 4 5 6 7 8 9 |
var obj = new MyClass(); //メンバ変数 obj.member; //メンバメソッドの呼び出し obj.Hello(); |
オブジェクトのメンバにアクセスするためには、ドット演算子「.」を使用します。
アクセス修飾子
クラスメンバのアクセス権を設定できます。
public | どこからでもアクセス可能 |
protected | そのクラス自身とそのクラスを継承したクラスからのみアクセス可能 |
private | そのメンバーを定義したクラスからのみアクセス可能 |
※アクセス修飾子をつけない場合、publicになります。
継承
extendsキーワードで、クラスを継承できます。同一の名前の関数を定義することで、親クラスのメンバ関数をオーバーライドできます。オーバーライドする前の親のメンバにアクセスするためには、「super」で参照します。
1 2 3 4 5 6 7 8 9 10 11 |
class ExtendClass extends ParentClass { // 親クラスのメソッドをオーバーライド Hellow() { // 親クラスのメンバにアクセスするには、parent:: を使う super.Hellow(); } } |
※ 多重継承はできません。
コンストラクタ・デストラクタ
コンストラクタの定義が可能です(デストラクタはないようです)。コンストラクタは「constructor」という名前の関数を定義します。なお、クラスを継承した場合、親クラスのコントラクタは自動的には呼ばれません。呼び出したい場合は、「super();」のように明示的に呼び出す必要があります。
1 2 3 4 5 6 7 8 |
class MyClass { //コンストラクタ public constructor() { } } |
インタフェース定義
インタフェースの定義に対応しています。以下の形式で定義します。
1 2 3 4 5 6 7 8 |
interface インタフェース名 { public foo1(); public foo2(); // ... } |
インタフェースの実装には、「implements」を使用して、クラス定義時に指定します。インタフェースに定義された関数を実装する場合、特別なキーワードは必要ありません。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
interface iInterface { public function foo(); } // インターフェイスを実装 class MyClass implements iInterface { public foo() { } } |
演算子
算術演算子
四則演算 | + – * / |
剰余 | % |
代入演算子
代入 | = |
論理演算子
論理積 | && |
論理和 | || |
否定 | ! |
比較演算子
大小比較 | > < >= <= |
等しい(型変換後に比較) | == |
等しくない(型変換後に比較) | != <> |
等しい(型が等しく、値も等しい) | === |
等しくない(型もしくは値が等しくない) | !== |
3項演算子 | (条件) ? (true) : (false) |
型演算子
キャスト | <型名>変数 | 例) <number>f |
型を調べる | 変数 instanceof 型名 |
例) $a instanceof MyClass |
instanceof は、親クラスを継承したクラスのインスタンスであるかどうかを調べることも可能です。
ビット演算子
ビット積 | & |
ビット和 | | |
否定 | ^ |
排他的論理和 | ~ |
左シフト | << |
右シフト | >> |
文字列演算子
文字列結合 | + |
コメント
コメントは、以下の形式がサポートされています。
1 2 3 4 5 6 |
// 行末まで /* 閉じる まで */ |
配列
Array()で生成できます。ある型の配列は「型名[]」とすることができます。また、型付きの配列を生成する場合は「Array<型名>()」で生成できます。
数値の配列の生成例
1 2 3 |
var nums: number[] = new Array<number>(); |
また、配列の生成時に以下のように初期化することもできます。
1 2 3 4 |
var arr = [0, 1, 2]; var arrS = ["あ", "い", "う"]; |
値の取得・設定
値の取得や設定は [] を用います。
1 2 3 4 5 6 7 |
// 0番目に value を格納 arr[0] = value; // 0番目の値を取得 v = arr[0]; |
要素数の取得
配列の「length」メンバにアクセスします。
1 2 3 |
array.length |
条件分岐構文
if文とswitch文がサポートされています。
if文
1 2 3 4 5 6 7 8 9 |
if (条件1) { // 条件1がtrueの時 } else if (条件2) { // 条件1がfalseで条件2がtrueの時 } else { // 条件1・条件2がfalseの時 } |
switch文
1 2 3 4 5 6 7 8 9 10 11 12 |
switch (比較対象) { case 条件1: //... break; case 条件2: //... break; default: //それ以外 //... } |
ループ構文
for文
1 2 3 4 5 |
for (var i = 1; $i <= array.length; i++) { array[i]; } |
while文
1 2 3 4 5 6 |
var num = 0; while (num < array.length ){ num++; } |
foreach文(配列の列挙)
「for…of」文を用います。(似たような構文に「for … in」がありますが、これは、オブジェクトのプロパティ名を列挙していく構文です)
1 2 3 4 5 6 |
var arr = ["あ", "い", "う"]; for (let v of array) { console.log(v); } |
要素を受ける変数に型をつけると怒られました。
break, continue
break、continueともにサポートされています。
演算子のオーバーロード
対応していません。
プロパティ(アクセッサ)
メソッドの前に「get」「set」をつけることで、アクセッサを定義できます。
1 2 3 4 5 6 7 8 9 10 11 12 13 |
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; } } |
インデクサ
対応していないようです。
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」は参照関係を明示することになり、結合の際の順序に影響を与えます。
1 2 3 4 5 6 |
/// <reference path="ファイル名" /> // 例えば /// <reference path="sumire.ts" /> |
CommonJSやAMDを用いた、複数ソースファイルによる開発は、別に紹介記事を書こうと思います。
エントリポイント(main関数)
特にエントリポイントの指定は必要ありません。上から順に実行されていきます。
文字列リテラル
シングルクォート(””)もしくはダブルクォート(”)でくくります。特殊文字も使用可能です。
定数
「const」キーワードによって宣言できます。ただし、クラス内で定義するとエラーになります。
1 2 3 |
const MIN_VALUE:number = 0.0; |
[bottomBannar]