仕事ですぐに使えるTypeScriptを読んでいくその9

これは

TypeScriptの学習にとても役立ちそうなドキュメントを教えてもらったので
コツコツと読んでいく記事です。

参考

著作権者：フューチャー株式会社（Future Corporation）様

future-architect.github.io

第7章

アロー関数とthis

JavaScriptではthisが何を示しているものかわからなくなりやすいらしい。
確かに、これまで見てきたようにJavaScriptはかなり自由な書き方ができることもあって
人によって書き方に違いがあって読みにくくなっているのは容易に想像できる。

TypeScriptではアロー関数を使うことで、その問題をかなり改善することができる。

// 無名関数のイベントハンドラではその関数が宣言されたところのthisにアクセスできない
// そのためthisがなんだったのかわからなくなってしまう
var self=this;
this.button.addEventListener("click", function() {
  self.smallAnimal.walkTo("タコ公園");
});

// アロー関数ならその外のthisが維持される。
// thisの意味が追える。
this.button.addEventListener("click", () => {
  this.smallAnimal.walkTo("タコ公園");
});

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

・オーバーロード使えません。
・型が明確な場合は省略可能。
・returnなしの場合はvoidを使う。

今日はここまで。