TypeScriptを勉強するとJavaScriptの解像度あがる

Last updated at 2022-12-07Posted at 2022-12-07

もっと早く勉強しておけばよかったな…と感じたのでみなさんには後悔してほしくなのでTypeScriptを勉強することのメリットを伝えたいと思います！

【こんな方にオススメ！】
・JavaScriptの習熟度を上げたい人
・今JavaScriptを勉強している人

JavaScriptを勉強するなら切り離せないい存在となっているので一緒に学んでいただきたいです！

TypeScriptってなに？

TypeScriptはJavaScriptの拡張言語で、2014年にMicrosoftによって発表されました。
TypeScriptで記述したコードをコンパイルすることでJavaScriptに変換されます。

なので記述してみるとわかりますが、書き方などは基本JavaScriptと同じになるので、
JavaScriptを知っている人であれば勉強を始めるときのハードルは低いと考えています！

最大の違いは静的型付け言語であることです。（JavaScriptは動的型付け言語）
型を自分でつけるか、勝手にやってくれるかの違いです。

2つの数字の和を計算してくれる関数があったとします。

const a = '1';
const b = 1;

const sum = (a, b) => {
  return a + b;
}

sum(a, b); // 11

結果は文字列の「11」です。
分かりやすいく定義したaとbで計算していますが、本来はどこから取得してきた値などが入ることになると思います。

その時の結果が数値の和ではなく、文字列の結合だったら困りますよね…。
これをTypeScriptで記述した場合は下記のようになります。

const sum = (a: number, b: number) => {
  return a + b;
}

引数の型を定義します。
aの引数に対して文字列が入れるとエラーになります。

const a = '1';
const b = 1;

const sum = (a: number, b: number) => {
  return a + b;
}

// 型'string'の引数を型'number'のパラメーターに割り当てることはできません。

引数の型は数字しか受け付けない設定になっているのに、aには文字列が入っているのでエラーになります。
これがTypeScriptの良さです。
実行するまでにエラーであることに気づけるので開発効率を上げてくれます。

定義した関数をこれまでとは違うところで利用したときに意図しない値が入ってくるとエラーになるので不具合の発生も事前に気がつけます。

TypeScriptは静的型付け言語でデータの型を定義することについては話しました。
自分で型を定義することがJavaScriptの解像度を上げるポイントになると考えています。

JavaScriptは良くも悪くも型を意識しなくてもいい感じで内部的に処理してくれます。
TypeScriptは型を意識しながら実装を進めなくてはなりません。

型を意識するということはJavaScriptのメソッドについて理解を深めなければなりません。
TypeScriptはどんな値がどんな型が返ってくるかを知らずに実装することが難しいため必然的にJavaScriptへの解像度が上がります。

TypeScriptを勉強すると型を意識して実装することになるので、結果JavaScriptに詳しくなることがTypeScriptを勉強すると良いと考える理由です。

TypeScriptを勉強していて失敗した…と思ったことを共有します。
2つ以上の言語を一緒に勉強しないことです。
具体的には、ReactとTypeScriptを一緒に勉強するなどはやめた方が良いと考えます。

TypeScriptはReactやNext.jsと一緒に導入されるケースが多いと感じています。
書籍でも良くセットで取り上げられているのを拝見します。

個人的には2つ以上の言語を勉強すると間違いなく混乱します。
わからないことが発生したら調べるのも時間がかかります。

エラーが発生した場合は修正に時間がかかります。
表層部分をインプットしただけで終えてしまいます…

なので一気に学んで時間を短縮したい気持ちを抑えて、1つずつ学習することをオススメします！

自分に合った方法を見つけるのが良いと思っています！
私は、子供の世話や移動時間などの隙間時間を利用することが多いので動画をメインに勉強しています。

下記の動画から基礎的な知識を学びました。

そのあと、新しい言語を学ぶ時の定番である「TODOリスト」を作成しました。
作成したTODOリストの機能は下記の通りです。

TypeScriptを勉強し始めるまではハードルの高いものだと思い込んでいました。
そして、JavaScriptの解像度が上がるとも思っていませんでした。

これからはJavaScriptを学ぶのであれば、TypeScriptもセットで学んでからJavaScriptのライブラリやフレームワークをインプットした方が良いと考えています！

TypeScriptは人気の言語なのでこれからフロントエンドエンジニアとしてキャリアを歩むことを考えているなら勉強しておいて損はないと考えていますのでぜひ一度勉強してみてください！