今回扱うのはTypeScriptの制御文と関数に対して扱いたいと思います。TypeScriptの基礎となるところなのでしっかりと覚えておいてください。
関数
関数の定義はデータ型の概念がある点以外はJavaScriptと変わりません（戻り値がない関数の場合はvoidを指定します。）
例
// 関数式
function add1(a: number, b: number): number {
return a + b;
}
console.log(add1(1, 2)); // 3
// 戻り値なしの関数式
function shout1( s: string): void {
console.log(`${ s}!`);
}
shout1('shout1'); // shout1!
// 関数リテラル
let shout2 = function(): void {
console.log('shout2');
};
shout2(); // shout2
// 関数式
function add2(a: number, b: number): number {
return a + b;
}
console.log(add2(1, 2)); // 3
// 戻り値なしの関数式
function shout3( s: string): void {
console.log(`${ s}!`);
}
shout3('shout3'); // shout3!
// 関数リテラル
let shout4 = function(): void {
console.log('shout4');
};
shout4(); // shout4
関数から複数の値を返却したい場合はタプル型の戻り値を使います。
例
function fnc(): [string, string, number] {
return ['hoge', 'fuga', 999];
}
let tpl = fnc();
alert(tpl); // hoge, fuga, 999
引数
- 通常の引数
- 「名前:データ型」の書式で定義された引数
- JavaScriptとは違い、この引数は省略不可能
- デフォルト値付きの引数
- 「名前:データ型=デフォルト値」の書式で定義された引数です。
- この引数は省略可能
- オプション引数
- 「名前:データ型=デフォルト値」の書式で定義された引数です
- 引数名の末尾に「?」を付けます。
- この引数は省略可能
- 可変長引数
- 「…名前:データ型[]」の書式で定義された引数です。
- 名前の前に「…」を付け、データ型を配列にします。
- この引数は0個以上の値を指定できます。
例
// デフォルト 値 付き 引数
function fnc1(x: number = 1): number {
return x + 1;
}
console.log(fnc1()); // 2
console.log(fnc1(10)); // 11
// オプション 引数
function fnc2(x ? : number): number {
return 2 * (x === undefined ? 1 : x);
}
console.log(fnc2()); // 2
console.log(fnc2(10)); // 20
// 可変 長 引数
function fnc3(...x: number[]): number {
let res: number = 0;
x.forEach((i: number): void => {
res += i;
});
return res;
}
console.log(fnc3()); // 0
console.log(fnc3(1, 2, 3)); // 6
関数のオーバーロード
- TypeScriptでも関数のオーバーロードを実装する場合、同名の関数を複数宣言したうえで実装は一つの関数で行います。
- この際、引数や戻り値の出データ型を関数宣言と矛盾しないようにします。
例
// オーバー ロード する 関数 の 宣言
function fnc(x: string): string;
function fnc(x: number, y: number): number;
function fnc(x: boolean): void;
// オーバー ロード さ れ た 関数 の 実装
function fnc(x: any, y ? : number): any {
if (typeof x === 'string') {
return `${ x}!`
} else if (typeof x === 'number') {
return x + (y === undefined ? 1 : y);
} else {
if (x) console.log(' fuga');
}
}
// 呼び出し
console.log(fnc(' hoge')); // hoge!
console.log(fnc(1, 2)); // 3
fnc(true); // fuga
型アサーション
- 型アサーションとはコンパイラに対し「この変数はこの型として振舞います」と名詞するような仕組みで「型キャスト」、「型変換」の様なものです。
- この仕組みには山括弧（<>）を使う構文と「as」を使う構文の2しゅるいが用意されています。
例
let val1: any = 'abcde'; let len1: number = ( <string>val1).length; console.log(len1); // 5 let val2: any = 'あいう'; let len2: number = (val2 as string).length; console.log(len2); // 3
