2020-12-04 :

nuxt-ts day5:TypeScript Deep Dive を読む


5日目。今日は座学。

https://typescript-jp.gitbook.io

知らなかったことをメモしていく。今日は JavaScript 編のアロー関数まで。

継承

TypeScriptにおけるクラスは(他の言語のように)extendsキーワードを使った単一継承をサポートします

class Point3D extends Point {
    z: number;
    constructor(x: number, y: number, z: number) {
        super(x, y);
        this.z = z;
    }
    add(point: Point3D) {
        var point2D = super.add(point);
        return new Point3D(point2D.x, point2D.y, this.z + point.z);
    }
}

extendsは継承だったのか。

アクセス修飾子

class FooBase {
    public x: number;
    private y: number;
    protected z: number;
}

// インスタンスにおける効果
var foo = new FooBase();
foo.x; // okay
foo.y; // ERROR : private
foo.z; // ERROR : protected

// サブクラスにおける効果
class FooChild extends FooBase {
    constructor() {
      super();
        this.x; // okay
        this.y; // ERROR: private
        this.z; // okay
    }
}

storeを書くときはこの辺を気を遣う必要がありそうだ。

アロー関数

function Person(age) {
    this.age = age;
    this.growOld = function() {
        this.age++; // この this は window を参照してしまう
    }
}
var person = new Person(1);
setTimeout(person.growOld,1000);

setTimeout(function() { console.log(person.age); },2000); // 1, should have been 2

従来のfunctionだと関数の呼び出し方法に応じて自身のthis値を定義してしまうので、このコードは上手く動かない。

function Person(age) {
    this.age = age;
    this.growOld = () => {
        this.age++; // この this は person オブジェクトを適切に参照する
    }
}
var person = new Person(1);
setTimeout(person.growOld,1000);

setTimeout(function() { console.log(person.age); },2000); // 2

アロー関数は、関数本体の外側のthisを捕捉する。functionを何度もタイプしなくて済むというメリットも。

今日はここまで。