2017年01月09日

TypeScriptの基本

TypeScriptの環境作成方法。npmでtypescriptをグローバルにインストールしておくと

npm install -g typescript


tscコマンドで指定したtsファイルのコンパイルを行なってくれる

tsc sample.ts


-wオプションを付けるとtsファイルの監視を行なってくれて、変更があるたびにコンパイルされるようになります。

tsc sample.ts -w


型付け



変数などを設定する際に後ろに:(コロン)を付けることで型付けを行うことができ、型付けした型の値以外は指定できなくなる。

数値の型付け

let x: number;
x=1;


変数の型付け

let x: string;
x='ok';


片付けと同時に代入することも可能

let x: string='1';
let y: number=1;


宣言時に代入する場合は型の自動判定がされるため下記の記述でも同じ意味になる。

let x='1';
let y=1;


宣言時に型の指定を省略した場合はany型(なんでもok)とみなされる

let x;
x=1;
x='1';

let y:any;
y=1;
y='1';


関数の型付け

関数の引数や返り値にも片付けが可能。返り値がない場合はvoidを指定します。

function aaa(xxx: string): void {
console.log(xxx);
}

var bbb = function(xx: string): number{
return 1;
}

const ccc = (xx: string): number => 1;


型を指定した引数が存在しない場合はエラーになってしまいますが、?を指定することでオプション引数(あったりなかったりする)を指定できます。

function aaa(xxx: string,yyy: string): void {
console.log(xxx);
}

aaa('aaa','bbb');
aaa('aaa');//NG

function bbb(xxx: string,yyy?: string): void {
console.log(xxx);
}

bbb('aaa','bbb');
bbb('aaa');//OK


引数や返り値に複数の型を取りうる場合はあらかじめ型設定だけをしておき、any型を利用して型設定をオーバーロードして作成します。そうするとあらからじめ設定した型のみが受け入れられるようになります。

function foo(x: number): number; 
function foo(x: string): string;

function foo(x: any): any{
return x;
};

foo("a");//ok
foo(1);//ok
foo(true);//ng


<...>といった総称型(Generics)を利用すれば関数作成時ではなく関数利用時に型を指定することができます。

function foo<XXX>(x: XXX): any{
return x;
};

foo("a");//ok
foo(1);//ng


配列の型付け

配列でも型に[]を付けることで型付けできる

let xxx:string[] = ['aaa','bbb','ccc'];

xxx.push('ddd');//ok
xxx.push(1);//ng


また、Array<elemType>といった形で型を指定することも出来る。

let list: Array<number> = [1, 2, 3];
list.push(4)
console.log(list)


以下のようにして複数の型が混在する配列を作成することも可能。

// Declare a tuple type
let x: [string, number];
// Initialize it
x = ["hello", 10]; // OK
// Initialize it incorrectly
x = [10, "hello"]; // Error


配列でも変数と同じく型を省略した場合は自動で判定をおこない、any型を指定するとどんな型も受け入れるようになります。

let xxx = ['aaa','bbb','ccc'];

xxx.push('ddd');//ok
xxx.push(1);//ng


let xxx: any[] = ['aaa','bbb','ccc'];

xxx.push('ddd');//ok
xxx.push(1);//ok


let xxx = ['aaa','bbb','ccc',1];

xxx.push('ddd');//ok
xxx.push(1);//ok


オブジェクトの型も事前に設定でき、設定したプロパティしか取ることができない。

var xxx: {
aaa: string;
bbb: number;
}

var xxx = {
aaa: "aaa",
bbb: 1
}

var xxx = {
aaa: "aaa",
bbb: "bbb"//ng
}


enumは列挙型で順番が取得できる

enum Color {Red, Green, Blue};
let c: Color = Color.Green;
console.log(c);//1


enum Color {Red = 2, Green, Blue};
let c: Color = Color.Green;
console.log(c);//3


enum Color {Red = 1, Green, Blue};
let colorName: string = Color[2];
console.log(colorName);//Green


typeキーワードを使って型のエイリアスを作成することも可能です、下記のサンプルではmyTypeという型がstring型のエイリアスになっています。

type myType = string;

var xx:myType;
xx='1';
xx=1;

タグ:TypeScript
【TypeScriptの最新記事】
posted by ねこまんま at 16:55 | Comment(0) | TrackBack(0) | TypeScript | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

※ブログオーナーが承認したコメントのみ表示されます。

この記事へのトラックバック