TypeScript の練習その２ (基本型)

概要

TypeScript を Handbook を見ながら学ぶ。今回は基本型 (Basic Types) まで。

基本

実行方法

node.js をインストールしているとtsc foo.ts && node foo.jsのようにして実行できる。tsc -e foo.tsで実行できるような記載も見たが、私の環境ではこれに失敗した。

手っ取り早く試すなら、ブラウザから Playground を使うのもよい。

ログを出力する

JavaScript と同じでconsole.logを使う。

基本型

Boolean

真偽値を表す型。boolean と書く。

tutorial_06.ts

var b1: boolean = true;
var b2: boolean = false;

console.log(b1);
console.log(b2);

コンパイル結果

tsc tutorial_06.ts

tutorial_06.js

var b1 = true;
var b2 = false;

console.log(b1);
console.log(b2);

実行結果

node tutorial_06.ts

true
false

Number

数値を表す型。number と書く。JavaScript と同じで浮動小数点型。整数型はない。

tutorial_07.ts

var n1: number = 1;
var n2: number = 1.1;
var n3: number = 1e6;

console.log(n1);
console.log(n2);
console.log(n3);

コンパイル結果

tsc tutorial_07.ts

tutorial_07.js

var n1 = 1;
var n2 = 1.1;
var n3 = 1e6;

console.log(n1);
console.log(n2);
console.log(n3);

実行結果

node tutorial_07.ts

1
1.1
1000000

String

文字列を表す型。string と書く。JavaScript と同じくシングルクオートかダブルクオートでリテラルを指定する。

tutorial_08.ts

var s1: string = 'single quoted literal';
var s2: string = "double quoted literal";
var s3: string = 'a' + "b";

console.log(s1);
console.log(s2);
console.log(s3);

コンパイル結果

tsc tutorial_08.ts

tutorial_08.js

var s1 = 'single quoted literal';
var s2 = "double quoted literal";
var s3 = 'a' + "b";

console.log(s1);
console.log(s2);
console.log(s3);

実行結果

node tutorial_08.ts

single quoted literal
double quoted literal
ab

Array

配列を表す型。型に [] を付与するか Array<型> と書く。基本的には JavaScript と同じ。

tutorial_09.ts

var a1: boolean[] = [ true, false,]; // accepts last comma.
var a2: number[] = [ 1, 1.1, 1e6 ];
var a3: string[] = [ 'a', "b" ];
var a4: Array<boolean> = [ true, false ];
var a5: Array<number> = [ 1, 1.1, 1e6 ];
var a6: Array<string> = [ 'a', "b" ];

console.log(a1);
console.log(a2);
console.log(a3);
console.log(a4);
console.log(a5);
console.log(a6);

コンパイル結果

tsc tutorial_09.ts

tutorial_09.js

var a1 = [true, false];
var a2 = [1, 1.1, 1e6];
var a3 = ['a', "b"];
var a4 = [true, false];
var a5 = [1, 1.1, 1e6];
var a6 = ['a', "b"];

console.log(a1);
console.log(a2);
console.log(a3);
console.log(a4);
console.log(a5);
console.log(a6);

実行結果

[ true, false ]
[ 1, 1.1, 1000000 ]
[ 'a', 'b' ]
[ true, false ]
[ 1, 1.1, 1000000 ]
[ 'a', 'b' ]

Enum

列挙型。JavaScript にはない。他の多くの言語と同じように数値として扱われる。既定では、各値には 0 ベースの序数が宣言順に割り振られる。各値には任意の数値を設定できるので、整数ではなく浮動小数点数も指定できる。また、割り振られた値から名前を逆引きすることができる。

tutorial_10.ts

enum Attribute { Law, Neutral, Chaos };

var attr1: Attribute = Attribute.Law;
var attr2: Attribute = Attribute.Neutral;
var attr3: Attribute = Attribute.Chaos;

console.log(attr1);
console.log(attr2);
console.log(attr3);

enum Color { Red = 1.1, Green = 2, Blue = 3 };

console.log(Color.Red);
console.log(Color.Green);
console.log(Color.Blue);

var c1: Color = Color.Red;

console.log(Color[c1]);
console.log(Color[Color.Green]);
console.log(Color[2]);
console.log(Color[1.1]);
console.log(Color[0]);

コンパイル結果

tsc tutorial_10.ts

tutorial_10.js

var Attribute;
(function (Attribute) {
    Attribute[Attribute["Law"] = 0] = "Law";
    Attribute[Attribute["Neutral"] = 1] = "Neutral";
    Attribute[Attribute["Chaos"] = 2] = "Chaos";
})(Attribute || (Attribute = {}));
;

var attr1 = 0 /* Law */;
var attr2 = 1 /* Neutral */;
var attr3 = 2 /* Chaos */;

console.log(attr1);
console.log(attr2);
console.log(attr3);

var Color;
(function (Color) {
    Color[Color["Red"] = 1.1] = "Red";
    Color[Color["Green"] = 2] = "Green";
    Color[Color["Blue"] = 3] = "Blue";
})(Color || (Color = {}));
;

console.log(Color.Red);
console.log(2 /* Green */);
console.log(3 /* Blue */);

var c1 = Color.Red;

console.log(Color[c1]);
console.log(Color[2 /* Green */]);
console.log(Color[2]);
console.log(Color[1.1]);
console.log(Color[0]);

実行結果

0
1
2
1.1
2
3
Red
Green
Green
Red
undefined

Any

任意型。コンパイル時の型チェックがされない。TypeScript を使う人なら、使う機会があまりないはずなので、省略。

Void

日本語表記が難しいが、いわゆる void 型。void と書く。普通は関数の戻り値がないときにだけ使う。一応変数としても使える。初期値は undefined。変数には undefined か null を与えられるが、その他を代入するとコンパイルエラーになる。

tutorial_11.ts

var v1: void;
var v2: void = undefined;
var v3: void = null;

function foo(): void {
	console.log('foo');
}

console.log(v1);
console.log(v2);
console.log(v3);

foo();

コンパイル結果

tsc tutorial_11.ts

tutorial_11.js

var v1;
var v2 = undefined;
var v3 = null;

function foo() {
    console.log('foo');
}

console.log(v1);
console.log(v2);
console.log(v3);

foo();

実行結果

undefined
undefined
null
foo

練習結果まとめ

1. JavaScript にはない Enum、Any、Void がある
2. Enum は便利そう

参考資料

1. Handbook - Welcome to TypeScript
2. Playground - Welcome to TypeScript