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を何度もタイプしなくて済むというメリットも。
今日はここまで。