TypeScript初心者がここだけ押さえておけばいい6つのポイント

TypeScript初心者がここだけ押さえておけばいい6つのポイント

 

少年A
TypeScriptって覚えること多すぎない?結局何が分かってればいいの?
キノ
正直、最初は全部理解しなくていいと思う。ここ数回で自分がつまずいたポイントを整理してみた

全部を完璧に理解しようとしなくていい

これまで何回かに分けて、TypeScriptを学び始めて実際につまずいたポイントを書いてきました。振り返ってみると、公式ドキュメントを最初から全部読もうとして挫折しかけたのですが、実務で最低限困らないレベルまでは、意外と少ない知識でたどり着けると感じています。

この記事では、JavaScript経験者がTypeScriptを学ぶときに、まず押さえておけば十分という6つのポイントを整理します。

スポンサーリンク

1. 変数・関数の型注釈の書き方

let name: string = "kino";

function add(a: number, b: number): number {
  return a + b;
}

まずはこれだけです。変数の後ろに: 型名を書く、関数は引数と戻り値それぞれに書く、という基本ルールさえ身体に馴染めば、あとの応用はだいぶ楽になります。

スポンサーリンク

2. 型推論に頼っていい場面を知る

実はTypeScript、すべての変数に型注釈を書く必要はありません。

let count = 0; // 型注釈なしでもnumber型として推論される

最初は「型を書かないと不安」で全部に注釈を付けていましたが、初期値から型が明らかな場合はTypeScriptが自動で推論してくれます。関数の引数など、型が推論できない場所にだけ書けば十分です。

3. anyを避けてunknownを使う判断基準

外部から来る値(APIレスポンスなど)で型が確定しないときは、anyではなくunknownを使い、使う前に型を確認する、というルールだけ覚えておけば実務でも困りません。詳しい違いは別記事で整理しています。

4. interfaceとtypeは「とりあえずinterface」でいい

両者の違いを理解するのは大事ですが、初心者のうちは「オブジェクトの形を決めるならinterface、それ以外(ユニオン型など)が必要になったらtype」くらいの判断で十分です。細かい違いは別記事にまとめています。

5. エラーメッセージは全部読む

TypeScriptのエラーメッセージは長くて最初は身構えてしまいますが、多くの場合「何型を期待していて、何型が渡されたか」がそのまま書いてあります。

// Type 'number' is not assignable to type 'string'.
// → number型を渡そうとしたけど、string型を期待している

エラーを読まずに雰囲気で直そうとすると余計に時間がかかるので、まずは英文をそのまま読む癖をつけるのが結果的に一番の近道でした。

6. tsconfig.jsonのstrictはオンにしておく

{
  "compilerOptions": {
    "strict": true
  }
}

strictモードをオフにすると、型チェックがかなり緩くなり、JavaScriptに近い書き方でも通ってしまいます。最初は指摘が多くて大変ですが、実務のプロジェクトはstrictが前提になっていることが多いので、学習段階からオンにしておく方が結果的に近道です。

少年A
意外と少なくない?ジェネリクスとかは?
キノ
ジェネリクスとかもっと発展的な話は、この6つが身体に馴染んでからで十分だと思ってる。順番が大事

まとめ

JavaScriptがある程度書けている状態からTypeScriptを学ぶ場合、新しく覚えることは「型の書き方」と「型を確認してから使う癖」の2つに集約される気がしています。最初から完璧を目指さず、この6つを押さえたうえで、実際に手を動かしながら少しずつ知識を広げていくのが遠回りなようで一番早いと感じています。


 

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です