関数
基本形
TypeScriptの関数は引数と戻り値にデータ型をつける事が必要になります。
|
1 2 3 4 5 |
function kansu(a: number, b: number): number { return a + b; } console.log(kansu(1, 2)); |
無名関数
関数名を直接つけずに関数を変数に代入して使用する事ができます。
|
1 2 3 4 5 |
let kansu = function (a: number, b: number): number { return a + b; }; console.log(kansu(1, 2)); |
アロー関数
functionキーワードを使わずにアロー記号を使って関数を表現する事が可能です。ES2015から導入されたJavaScriptの記法
|
1 2 3 4 5 |
let kansu = (a: number, b: number): number => { return a + b; }; console.log(kansu(1, 2)); |
関数が1行に収まる場合はさらなる省略が可能
関数の内容が1行になる場合は「波かっこ」と「return文」を省略してさらに簡潔に記述する事が可能になります。
|
1 2 3 |
let kansu = (a: number, b: number): number => a + b; console.log(kansu(1, 2)); |
シグネチャとオーバーロード
事前に関数の引数や戻り値と同様のシグネチャという定義だけします。そうすればシグネチャと同様の引数を持った値を使わなかった場合はエラーになります。
|
1 2 3 4 5 6 7 8 9 10 |
function a(b: number): number; //シグネチャ function a(b: any): any { if (typeof b === 'number') { return b + b; } } console.log(a(5)); console.log(a('c')); //エラーになる。 |
引数について
オプショナル引数
引数の末尾に?をつける事でオプショナル引数として引数宣言を任意とする事が可能になります。
|
1 2 3 |
let kansu = (a: number, b: number, c?: boolean): number => a + b; console.log(kansu(1, 2)); |
デフォルトパラメータ
「関数に引数が渡されない場合」または「undefinedが渡された場合」に関数に設定しておいたデフォルト値を使えるようにする事です。下記のように記述します。
|
1 2 3 |
let kansu = (a: number, b: number = 5): number => a + b; console.log(kansu(1)); |
RESTパラメータ
JavaScriptでもある機能です。引数に「...引数名」をつける事で不特定多数の引数を配列型式で渡す事ができます。
|
1 2 3 |
let kansu = (...a: number[]): number => a[0] + a[1]; console.log(kansu(1, 2, 3)); |
クラス
ES5以前に「コンストラクタ関数」という文法がありましたがほとんどclassとイコールです。コンストラクタ関数がよりわかりやすくなったものと捉えれば良いでしょう。
基本形
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
class Person { name: string; age: number; constructor(name: string, age: number) { this.name = name; this.age = age; } aisatu(): string { return `name: ${this.name},age: ${this.age}`; } } let keji = new Person('健二', 30); console.log(keji.aisatu()); |
アクセス修飾子
|
1 2 3 4 |
class クラス名 { public メンバ名: データ型; //公開メンバ private メンバ名: データ型; //非公開メンバ（クラス内部からしかアクセス不可） } |
public
公開メンバ、書いても書かなくても同じ意味になるデフォルトのアクセス修飾子です。むしろ書かないのが普通です。
private
非公開メンバ、クラス内部からしかアクセス不可、規制したいメンバに対して明示的に記述します。
protected
派生クラス（子クラス）からもアクセスが可能です。
クラスはTypeScriptの型になる。
作ったclassは直接TypeScriptの型として指定できます。
|
1 2 3 4 |
class Person { } const peson:Person; |
コンストラクタの初期化の効率化
下記のようにコンストラクタの引数にアクセス修飾子をつける事で自動でコンストラクタの初期化処理まで実施をしてくれます。
|
1 2 3 4 5 6 7 8 9 |
class Person { constructor(public name: string, private age: number) {} aisatu(): string { return `name: ${this.name},age: ${this.age}`; } } let keji = new Person('健二', 30); console.log(keji.aisatu()); |
セッター、ゲッター
メンバ変数に直接アクセスさせないようにするためのものです。慣習的にメンバ変数の接頭辞は「_」をつけてメソッド名はメンバ変数は_なしの名前にします。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
class Person { constructor(public name: string, private _age: number) {} get age() { return this._age; } set age(age: number) { this._age = age; } } let keji = new Person('健二', 30); keji.age = 45; console.log(keji.age); |
ちなみに、この機能はTypeScript固有機能ではなくES6からあるJavaScriptの機能になります。
readonly
classの外でも内でも変更不可能なフィールドを定義できます。（初期化はコンストラクタのみ）
|
1 2 3 4 5 6 7 8 9 |
class Person { public readonly name: string; //公開メンバ constructor(name: string) { this.name = name; } } let keji = new Person('健二', 30); keji.name = '太郎'; |
下記のように記述すれば省略して記述することが可能です。
|
1 2 3 4 5 |
class Person { constructor(public readonly name: string, private _age: number) {} } let keji = new Person('健二', 30); keji.name = '太郎'; |
静的メンバ
newでインスタンス化しなくてもアクセスする事ができるメンバのことです。なお、同じクラス内であればthis経由で別の静的メンバへアクセスする事が可能です。
|
1 2 3 4 5 6 7 8 9 10 |
class Person { static firstname: string = '太郎'; static aisatu() { return `こんにちは、私は${this.firstname}です。`; } } console.log(Person.firstname); console.log(Person.aisatu()); |
名前空間
下記のように名前空間で分けることによって同じクラス名を使用する事ができるようになります。大抵のプログラミング言語には名前空間やそれと似た機能が存在しています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
namespace Tokyo { export class Person { constructor(public name: string) {} } } namespace Aiti { export class Person { constructor(public name: string) {} } } const hito = new Tokyo.Person('太郎'); console.log(hito); |
継承
継承はextendsキーワードを使って行います。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
class Person { constructor(public name: string) {} aisatu(): string { return `こんにちは、私は${this.name}です`; } } class SuperMan extends Person { constructor(public name: string) { super(name); } aisatu(): string { return `こんにちは、私は${this.name}です`; } } const hito = new Person('田中'); console.log(hito.aisatu()); const hito2 = new SuperMan('高橋'); console.log(hito2.aisatu()); |
オプショナル
任意のメンバーも定義できます。その場合はメソッドやコンストラクタの最後のパタメータに指定します。
|
1 2 3 4 5 6 7 8 |
class Person { name?: string; age: number; constructor(age: number, name?: string) { this.name = name; this.age = age; } } |
この記事へのコメントはありません。