中級者になるためのTypeScript習得方法

この記事は以前ちょっと株式会社 社員ブログで公開していたものです

こんにちは。フロントエンドエンジニアのはしばです。
今回はTypeScript(以下TS)を学習していく際のおすすめの方法についてお話しします。

はじめに

昨今のフロントエンド === TSでの開発といっても過言ではないほど密接な関係となっています。
ただ、調べていてもTSの習得に良い教材があまりなく苦労してしまう人も多いと思います(僕もたくさん苦しみながら習得していきました)。
慣れてしまえば「もはやTSがない世界なんて考えられない」となるのですが、慣れないうちは「なんで邪魔ばかりするんだｯ!!!」となってしまうこともしばしば。
そんな人たちが なるべく楽してTSを習得するためにおすすめの行動をまとめます。

①まず導入する

新規の案件に入ったら「今は」JSだけでいける開発でもとりあえずTSで開発できるようにしておきましょう。
うざったかったらルールを緩めにするとか、asやanyで簡易的に実装することは可能です。
project newするときに「TS使う??」って聞いてくれるツールが多いので素直に乗っかりましょう。
古めのCreate React App で始まって yarn ejectされている開発に携わりましたが、そんなところにTSを入れる労力はとんでもないわけですよ。
心理的障壁を下げる意味でもまず使える状態にしておきましょう。特に開発が進む前なら楽に対応できます。

②APIからのresponseの型を定義する

これが全てのAPIに用意できていたらなんとかなります。これらをexportして使っていくことが基本になります。
このときに後述する Utility Types なんかを使えたりすると楽に、より綺麗に書けるのですがなくても大丈夫です。

③できる限りルールを厳しくする

TSはルールが厳しければ厳しいほど効力を発揮します。前述の①②がない状態でいきなり厳しいのを適応すると往々にして型パズルが発生します。
Aを修正したらBでerrorが出て、Bを修正したらCで、Cを修正したらAが... みたいな。
DBを正としてそこを軸に進めていくとスッキリ解決していきます。
tsconfigでstrict trueにしたり、eslintのrulesのoffを極力無くしていきましょう。asやanyを駆逐するのです。

④腐敗防止層(的なもの)を設置する

既存のJSの開発からTSへの切り替えをした場合①~③を対応してもまだ厳しいよ！という人もいるんじゃないでしょうか。
APIが新規開発 or GraphQLの場合は上記手順でスッキリするのですが、フロントに寄り添ったAPIではない案件だと厳しかったりします。古めのリプレイスでAPI殆ど変更しません! とかがありがち。
それもそのはずで1つのエンドポイントを叩いて終わり!!ではなく複数のエンドポイントを叩いてその中の一部のデータでこのUIを表現します。みたいなパターンがあるからです。
そういった場合は③の「ルールを厳しくする」をこの後に移動させましょう。

→ 腐敗防止層とは

役割としては

• 命名規則を統一する
• UIで使う際になるべく意識せず使えるようにする
  といった役割を担ってもらいます。

⑤もっと楽で綺麗な書き方を覚える

ここでよく記事なんかで見かける Utility Types や Conditional Types などを覚えていきましょう。
②~④の手順をすっ飛ばしていきなり⑤を覚えようとする人多いんじゃないでしょうか。
僕もやっていました。ただ、②~④がない状態の開発はその恩恵をフルで感じにくいです。
ただ、Twitterや技術記事で多く見かけるのはこの⑤の内容なのでついつい
「TS理解したい...あっTSの記事だ!!!」と飛びついてしまいがちです。
まずは足元をしっかりしてから進めていきましょう。そうすると楽です。

さいごに

いかがでしたでしょうか??
僕自身の経験談ですが、①で止まってas や any がふんだんに使われたプロジェクトに長くいてもTSの理解は深まりません。場当たり的なerrorの対応ができるようになるだけです。
これら5つのSTEPをできて初めてTSの恩恵を得られるのかなと思います。
入力補完がサクサク効いて viewを見ずともデータの繋ぎ込みが完成していくのはとても快感です。
この記事が皆様のTS life に貢献できたら嬉しいです^o^