クラス - TypeScript Deep Dive 日本語版

検索…
クラス
クラス(Classes)
JavaScriptにおいて、クラスを第一級(first class)のものとして持つことが重要である理由は次の通りです:
1.​クラスが提供する便利な構造の抽象化​
2.それぞれのフレームワーク(emberjs、reactjsなど)がそれぞれ独自のクラス構文を提供するのではなく、一貫したクラス構文を提供する
3.オブジェクト指向の開発者にとっての親和性
TypeScriptでは、ブラウザの互換性を気にすることなくclassを使うことができます。ここに、Pointという簡単なクラスの例を示します：
1
class Point {
2
    x: number;
3
    y: number;
4
    constructor(x: number, y: number) {
5
        this.x = x;
6
        this.y = y;
7
    }
8
    add(point: Point) {
9
        return new Point(this.x + point.x, this.y + point.y);
10
    }
11
}
12
​
13
var p1 = new Point(0, 10);
14
var p2 = new Point(10, 20);
15
var p3 = p1.add(p2); // {x:10,y:30}
Copied!
このクラスをコンパイルすると、古いブラウザ(ES5)で動作する次のJavaScriptを生成します。
1
var Point = (function () {
2
    function Point(x, y) {
3
        this.x = x;
4
        this.y = y;
5
    }
6
    Point.prototype.add = function (point) {
7
        return new Point(this.x + point.x, this.y + point.y);
8
    };
9
    return Point;
10
})();
Copied!
これは慣用的に使われてきた従来のJavaScriptのクラスのパターンです。今は第一級(first class)の言語の構成要素としてのクラスが利用できます。
継承(Inheritance)
TypeScriptにおけるクラスは(他の言語のように)extendsキーワードを使った_単一_継承をサポートします:
1
class Point3D extends Point {
2
    z: number;
3
    constructor(x: number, y: number, z: number) {
4
        super(x, y);
5
        this.z = z;
6
    }
7
    add(point: Point3D) {
8
        var point2D = super.add(point);
9
        return new Point3D(point2D.x, point2D.y, this.z + point.z);
10
    }
11
}
Copied!
クラスにコンストラクタがある場合、コンストラクタから親コンストラクタを呼び出さなければなりません(TypeScriptはこれをしていない場合はエラーを表示します)。これにより、thisのプロパティが正しく設定されます。superを呼び出した後、コンストラクタで必要な処理を追加することができます(例えば、他のプロパティzを追加します)。
親のメンバ関数をオーバーライドする(ここではaddをオーバーライドします)場合でも、親クラスの機能を呼び出せることに注意してください(super.構文を使います)。
静的メンバ(Statics)
TypeScriptクラスは、クラスの全インスタンスで共有されるstaticなプロパティをサポートします。静的メンバを置き、アクセスする自然な場所はクラスそのものです。TypeScriptでは、staticがサポートされています。
1
class Something {
2
    static instances = 0;
3
    constructor() {
4
        Something.instances++;
5
    }
6
}
7
​
8
var s1 = new Something();
9
var s2 = new Something();
10
console.log(Something.instances); // 2
Copied!
静的メンバと同様に静的関数も使用できます。
アクセス修飾子(Access Modifiers)
TypeScriptはアクセス修飾子としてpublic、private、protectedをサポートしています。これらはclassメンバのアクセシビリティを次のように決定します：
アクセス可能な場所(accessible on)
public
protected
private
クラス(class)
yes
yes
yes
子クラス(class children)
yes
yes
no
クラスのインスタンス(class instances)
yes
no
no
アクセス修飾子が指定されていない場合は、JavaScriptの便利な性質と同じように、暗黙的にpublicとなります🌹。
アクセス修飾子は、ランタイム上(生成されたJSの実行時)では何の影響もありませんが、間違った使い方をするとコンパイルエラーが出力されることに注意してください。それぞれの例を以下に示します:
1
class FooBase {
2
    public x: number;
3
    private y: number;
4
    protected z: number;
5
}
6
​
7
// インスタンスにおける効果
8
var foo = new FooBase();
9
foo.x; // okay
10
foo.y; // ERROR : private
11
foo.z; // ERROR : protected
12
​
13
// サブクラスにおける効果
14
class FooChild extends FooBase {
15
    constructor() {
16
      super();
17
        this.x; // okay
18
        this.y; // ERROR: private
19
        this.z; // okay
20
    }
21
}
Copied!
いつもと同じように、これらの修飾子はメンバ変数とメンバ関数の両方で利用可能です。
Abstract修飾子
abstractはアクセス修飾子の1つと考えることができます。上で述べた修飾子とは異なり、クラスのメンバと同様にclassに対しても利用できるため、アクセス修飾子とは分けて説明します。abstract修飾子が主に意味することは、その機能を親クラスに対して直接的に呼び出すことができず、子クラスがその具体的な機能を提供しなければならないということです。
抽象クラスを直接インスタンス化することはできません。その代わりに、abstract classを継承したclassを作成しなければなりません
1
abstract class FooCommand {}
2
​
3
class BarCommand extends FooCommand {}
4
​
5
const fooCommand: FooCommand = new FooCommand(); // 抽象クラスのインスタンスは作成できません
6
​
7
const barCommand = new BarCommand(); // 抽象クラスを継承したクラスのインスタンスは作成できます
Copied!
抽象メンバは直接アクセスできません。子クラスがその具体的な機能（実装）を提供しなくてはなりません
1
abstract class FooCommand {
2
  abstract execute(): string;
3
}
4
​
5
class BarErrorCommand extends FooCommand {} // 'BarErrorCommand'は抽象メンバー'execute'を実装する必要があります
6
​
7
class BarCommand extends FooCommand {
8
  execute() {
9
    return `コマンドBarが実行されました`;
10
  }
11
}
12
​
13
const barCommand = new BarCommand();
14
​
15
barCommand.execute(); // コマンドBarが実行されました
Copied!
コンストラクタは必須ではありません
クラスは必ずコンストラクタを持っている必要はありません。例えば、以下は正しく動作します。
1
class Foo {}
2
var foo = new Foo();
Copied!
コンストラクタを定義する
以下のように、クラスのメンバを定義し、初期化することができます:
1
class Foo {
2
    x: number;
3
    constructor(x:number) {
4
        this.x = x;
5
    }
6
}
Copied!
これはTypeScriptの省略形を使うことができるパターンです。コンストラクタ引数にアクセス修飾子を付けることができ、それが自動的にクラス内に宣言され、コンストラクタの引数によって値が初期化されます。なので、前の例は次のように書き直すことが可能です(public x:numberに注目してください)：
1
class Foo {
2
    constructor(public x:number) {
3
    }
4
}
Copied!
プロパティ初期化子(Property initializer)
これはTypeScript(及びES7以降)でサポートされている気の利いた機能です。クラスのコンストラクタの外側でクラスのメンバ変数を初期化できます。デフォルト値を指定するのに便利です(members = []に注目してください)。
1
class Foo {
2
    members = [];  // コンストラクタなしで直接メンバ変数を初期化できます
3
    add(x) {
4
        this.members.push(x);
5
    }
6
}
Copied!
前
モダンなJavaScriptの機能
次
Classes Emit
最終更新 7mo ago
リンクのコピー
クラス(Classes)
継承(Inheritance)
静的メンバ(Statics)
アクセス修飾子(Access Modifiers)
Abstract修飾子
コンストラクタは必須ではありません
コンストラクタを定義する
プロパティ初期化子(Property initializer)