見出し画像

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

jnkykn

こんにちは。貴島(@jnkykn)です。先週は、2024年を振り返って、「今年こそ、TypeScript入門」を読了したい！と気持ちを新たにしました。仕事の面で今年の目標設定をした方が良いとは思いつつ、「せっかく、TypeScript入門の学習を再開したので継続したい」という気持ちが勝ちました。やっていき💪


第5章TypeScriptのクラス（１１）

前回は、関数外のthis、組み込みオブジェクトとクラスについて学習しました。今日は、例外処理と、力試しで、第5章の学習を終わります。

例外処理

TypeScriptに限らず、他の言語でもおなじみの例外処理です。実行エラーが発生した場合に、そこで処理を中断してエラー情報を持って大域脱出したりするのに使ってきました。try～catch～finalyは、前職で担当していたシステムで欠かせないものでした。解説を読んで、自分の理解が合っていることがわかって安心しました。コラムにも書かれていましたが、Reactでは処理が終わっていない非同期メソッドの戻り値Promiseをthrowするという、エラーの例外処理とは違った使い方がされていて、初めて目にしたときは「なんじゃこりゃあ！？」とびっくりしたのを思い出しました。

console.log(sum(100));

function sum(max: number): number {
    try {
        let result = 0;
        for ( let i = 1; i <= max; i++ ) {
            result += i;
        }
        return result;
    } finally {
        console.log("sumから脱出します！！！")
    }
}

実行結果も確認

$ npx tsc
$ node dist/index_5-5.js
sumから脱出します！！！
5050

力試し（クラスへの置き換え）

class User {
    name: string;
    age: number;

    constructor(name: string, age: number) {
        if (name === "") {
            throw new Error("名前は空にできません！");
        }
        this.name = name;
        this.age = age;
    }

    getMessage(message:string) {
        return `${this.name}(${this.age}) 「${message}」`;
    }
}

const uhyo = new User("uhyo", 26);
console.log(uhyo.getMessage("こんにちは！"));

実行結果を確認

$ npx tsc
$ node dist/index_5-5.js
uhyo(26) 「こんにちは！」

答え合わせをしてみると、私の回答では、プロパティにreadonly属性が不足していました。カプセル化のためには、読み取り専用にする必要があるということで、この観点が抜けていたなぁと反省。（過去に、さんざん意識してきたはずなのに、すっかり忘れていました。ダメじゃん！）

正しい答えは、こちら。

class User {
    readonly name: string;
    readonly age: number;

    constructor(name: string, age: number) {
        if (name === "") {
            throw new Error("名前は空にできません！");
        }
        this.name = name;
        this.age = age;
    }

    getMessage(message:string) {
        return `${this.name}(${this.age}) 「${message}」`;
    }
}

const uhyo = new User("uhyo", 26);
console.log(uhyo.getMessage("こんにちは！"));

Userクラスの本体は、もはやgetMessageメソッドということがわかったので、クラスである必要はないかも？じゃあ、関数を返却する関数にもできるよね？というのが、クラスを関数に置き換える力試しです。

力試し（クラスを関数に置き換える）

前出の力試しのUserクラスを、createUser関数に置き換えます。

function createUser( name: string, age: number) {
    return (message: string) => {
        return `${name}(${age}) 「${message}」`;
    } 
}

const getMessageToFunc = createUser("uhyo", 26);
console.log(getMessageToFunc("こんにちは！"))

実行結果の確認

$ npx tsc
$ node dist/index_5-5.js
uhyo(26) 「こんにちは！」

良さそう。
解説とも合っているので、ヨシ(๑•̀ㅂ•́)و✧

まとめ

例外処理もクラスも、他の開発言語で馴染んでいるものと共通点が多かったのに、肝心なクラスのカプセル化を忘れていたりして、鈍っているなぁ！という気持ちです。次は第6章「高度な型」です。感覚を取り戻したりしながら、新しいことも吸収していけるように、引き続きがんばります💪

おまけ

仕事で、時々Adbe Illustratorを使って、チラシやノベルティ制作をする機会があります。そんなときに役立ちそうだと思って、図書館で「10倍ラクするIllustrator仕事術【改訂第3版】」を借りてきました。効率を追求するほどの利用機会は無いのですが、設定ひとつでミスが減らせる効果もあり、取り入れたいと思いました。（連休明けから、早速実践したいと思っています）

こちらも、やっていき💪です。

いいなと思ったら応援しよう！