【7章】TypeScript基礎学習+演習の振り返り

この章で学んだこと

Chapter 7 のテーマは TypeScript。一言でいうと、自由奔放な JavaScript に「ルールと役割」を持たせるための仕組みでした。

学んだことを整理すると、こんな感じです。

・型がつくことで、潜在的なバグの可能性をあらかじめ減らせる。

・実行する前の段階で「これはおかしい」と気づける安心感があります。

・型推論をうまく使えば、すべてに型注釈を書かなくても、可読性を損なわない範囲でコードをスッキリ保てる。

・型は「書かされるもの」ではなく「省けるところは省く」バランスが大事だと感じました。

・そして個人的に一番腑に落ちたのが、TypeScript はトランスパイルして JavaScript に変換してから実行している、という点。

・つまり本質的には JavaScript ができていないと、TypeScript も使いこなせない。型に頼る前に、土台となる JS の理解が要るんだと改めて思いました。

詰まったところ:型の import

今回ちょっと詰まったのが、型を import するときの書き方です。

最初、JS のコンポーネントを import するのと同じ感覚で書いていたのですが、型の場合は少し書き方が違いました。import type を使って、これは「値」ではなく「型」なんだと明示してあげる必要があったんです。

// コンポーネント(値)を import
import { Sample } from './components/Sample';

// 型を import
import type { Post } from './types';

最初は「同じ import なのに何が違うんだ」と少し混乱しましたが、型は実行時には消えてトランスパイル後の JS には残らないものなので、値とは扱いが分かれているのだと理解すると納得できました。

この章の課題

この章では、6 章で作ったブログサイトに TypeScript で型をつけていく、という課題に取り組みました。

自分でゼロから作ったサイトに、後から型を付けていく作業は、復習も兼ねていて理解が深まりました。「ここはどんなデータが入るんだっけ」と一つひとつ確認しながら型を当てていくうちに、6 章の時点では曖昧なまま動かしていた箇所にも気づけました。

まとめ

Chapter 7 で TypeScript の入り口に立ちました。型は窮屈なルールではなく、安心して書くための土台。

そして TypeScript を学ぶほど、結局は JavaScript の理解が問われるという当たり前のことに改めて立ち返る章でした。次の章も、土台を大事にしながら進めていきます。