TypeScript 入門の記録（６６）プロを目指す人のためのTypeScript入門（５０）第5章TypeScriptのクラス（１０）

2024年12月22日 16:07

こんにちは。サイボウズ株式会社開発本部 People Experienceチームコネクト支援チームの貴島(@jnkykn)です。先週は、公立はこだて未来大学の学内ハッカソンP2HACKSのスポンサーとして、未来大学にお邪魔していました。毎年思うことですが、CI/CDが組み込まれていたり、新しいフレームワークが取り入れられていたり、P2HACKSの参加各チームのハイレベルなプロダクトを目の当たりにして「自分も新しい技術のキャッチアップをしていかないと！」と刺激をいただきました。新しい技術についても知りたいのですが、基礎も大切なので、今週は、TypeScript入門の続きです。（基礎固め重要）

thisまだ終わってなかった

関数の中以外のthis

今日は、関数の中以外のthisが指すものについて、学習します。クラスAのインスタンスのプロパティを取得するためのthisと、関数内のthisは同じ意味なので、this.fooは同じ値を指します。

class A {
    foo = 123;
    bar = this.foo + 100;
    getFoo() {
        return this.foo;
    }
}

const obj544 = new A();
console.log(`obj544.bar = ${obj544.bar}  getFoo() = ${obj544.getFoo()}`);

実行結果も、想定通りです。

$ node dist/index_5-4.js
obj544.bar = 223  getFoo() = 123

staticの場合

プロパティや関数がstaticの場合は、thisはインスタンスではなく、クラスAを指します。インスタンスのプロパティや関数としては扱えません。（staticなので、当然と言えますが）

class A {
    static foo = 123;
    static bar = this.foo * 2;
    static getFoo() {
        console.log(`bar is ${this.bar}`);
    }
}

const obj544 = new A();
console.log(`A.bar = ${A.bar} `);

実行結果を見ると、this.barはクラスAのプロパティbarであることが確認できます。

$ node dist/index_5-4.js
bar is 246
A.bar = 246

組み込みオブジェクトとクラス

配列などの、TypeScriptの組み込みオブジェクトとクラスの関係を学習します。

組み込みオブジェクトはクラスと似ている

組み込みオブジェクトは、それぞれ固有のプロパティやメソッドを持っていたり、new Map()のように、newでオブジェクトを作ることができるところがクラスと似ています。

const map544 = new Map<string, number>();
console.log(`map544 instanceof Map = ${map544 instanceof Map}`);

実行結果を見ると、newで生成したオブジェクトは、Mapのインスタンスであることがわかります。

$ node dist/index_5-4.js
map544 instanceof Map = true

これ、クラスと同じじゃない？って思いました。

Arrayの罠

Arrayコンストラクタは、複数のパラメータを渡すことができますが、パラメータとして整数が1つだけ渡された場合は配列サイズを定義し、複数のパラメータが渡された場合は、パラメータを要素とする配列が生成されます。（これは、罠）例えば、new Array(10)は、長さ10の配列を生成します。これは罠なので、配列リテラルを使う方が安心です。

継承もできる

多くの組み込みオブジェクトは継承でき、Arrayの継承クラスは静的メソッドofが使えるので、要素10が1つだけある配列を定義することができます。

const arr544 = Array.of(10);
console.log(arr544);

実行結果

$ npx tsc
$ node dist/index_5-4.js
[ 10 ]

T型の配列は、T[]またはArray<T>と表します。Array<T>は、Tという型引数を持つArray型のことなので、配列は、Arrayクラスのインスタンスと考えることができます。

Arrayを継承したRepeatArrayクラスを定義してみます。

class RepeatArray<T> extends Array<T> {
    repeat(times: number): RepeatArray<T> {
        const result = new RepeatArray<T>();
        for (let i = 0; i < times; i++) {
            result.push(...this);
        }
        return result;
    }
}

const arr544 = new RepeatArray(1, 2);
arr544.push(3);
const repeated = arr544.repeat(3);
console.log(repeated);