仕事ですぐに使えるTypeScript その6

目的

学習の記録と学びになった部分をアウトプットするため。

期限

対象書籍の読了・内容理解が8月中に完了していること。

対象

今回の対象は「関数」。

future-architect.github.io

著作権者:フューチャー株式会社(Future Corporation)様

関数

三行サマリ

アロー関数

  • コールバック関数に無名関数を渡したとき、コールバック関数の中でthisを参照しようとすると、正しく取得できない問題があったが、アロー関数を使うことでその関数が定義された場所のthisの保持まで行うことができる。
  • 以前はコールバック関数に無名関数を渡す時はthisが取得できなくなってしまうため、bind()をしようして束縛したりしていた。また、var self = this;バッドノウハウとして有名だった。
// 旧: 無名関数のイベントハンドラではその関数が宣言されたところのthisにアクセスできない
var self=this;
this.button.addEventListener("click", function() {
  self.smallAnimal.walkTo("hogehoge");
});

// 旧: bind()で現在のthisに強制束縛
this.button.addEventListener("click", (function() {
  this.smallAnimal.walkTo("fugafuga");
}).bind(this));

関数の引数と返り値の型定義

  • Javaでは引数の数によって同じ関数名でメソッドを定義することも可能ではあるが、TypeScriptではそれは実現することはできない。
function f({name="cat", fav="おにぎり"}={}) {
    console.log(`${name}: ${fav}`);
}

const hoge = {
    name: "dog",
    height: 180
}

f(hoge);

> dog: おにぎり

関数を含むオブジェクトの定義方法

const smallAnimal = {
    getName() {
        return "小動物"
    },
    _favorite: "お気に入り",
    get favorite() {
        return this._favorite;
    },
    set favorite(favorite) {
        this._favorite = favorite;
    }
}

console.log(smallAnimal.getName());

smallAnimal.favorite = 'favorite';
// smallAnima.favorite('favorite') <- ではない。smallAnimal.favorite = 'favorite'; でsetterが呼び出されている。

console.log(smallAnimal.favorite);

thisを操作するコードは書かない

  • JavaScriptのthisは様々な種類があり、違いを知って使いこなせるのがかつてのJavaScriptの上級者だったが、こういったコードはなるべく使わないよう済ませた方がいい。
  • また、スコープ街に非公開にしたい変数を見えなくするよう関数をその場で作って実行する即時実行関数という技があったが、今時であれば公開したい要素に明示的にexportをつけることでwebpackなどのバンドルツールがそれ以外の変数をファイル単位のスコープで隠してくれるので、基本的に即時事項関数は使用しない方がいい。