React のための TypeScript 入門

このパートでは、React でよく使う TypeScript の仕様の参考リンクを紹介していきます。TypeScript をこれから勉強する人は、一度目を通していただくとともに行き詰まったときの辞書的なものとしてご活用くささい。

参考） 仕事ですぐに使える TypeScript

型をつける

型をつけるのは大変で面倒なだけという印象を持っている人も多いのではないでしょうか？実際に僕も最初は ruby や生の js から入門したのでそのような認識でいました。

しかし、TypeScript で書くことが増えてきてからは逆に型がないとストレスを感じるようになってきました。まずは型をつけるメリットをあげてみましょう。

• コンパイル時のチェックで実行時エラーを未然に防げる
• エディターがエラー箇所を教えてくれたり補完が効くようになる
• ライブラリや人の書いたコードを使ったり読んだりするのが楽になる
• リネームがリファクタしやすい（エラー箇所はエディタが教えてくれる）

簡単にあげただけでもこれだけのメリットがあるのです。

たまにどんな値を入れたらいいのかが読んでもわからずに詰んでしまうことはありますが、もし型がなければ毎回実行して試行錯誤するしかなくなってしまうので、それに比べたらましなはずです。これらのメリットを享受するためにも頑張って自分のコードにも型をつけましょう。

覚えておきたい TypeScript の機能

プリミティブ型

https://future-architect.github.io/typescript-guide/primitive.html

基本の型です。これは覚えておきましょう。

配列

https://future-architect.github.io/typescript-guide/complex.html

配列の場合は、中身が何の配列なのかを注釈としてつける必要があります。

オブジェクト

https://future-architect.github.io/typescript-guide/complex.html#id7

どのような項目があるかを自分で宣言してから使う必要があります。

型の宣言

https://future-architect.github.io/typescript-guide/typing.html#id3

type 名前 =という構文を使って型を宣言することができます。何度も使う型を変数のように宣言しておくものと思って大丈夫です。

typescript
1
 
Copied!
type Age = number | string;

関数の型

https://future-architect.github.io/typescript-guide/function.html

関数にも型をつけることができます。

オプショナルな属性

https://future-architect.github.io/typescript-guide/typing.html#id6

?をつけることでオプショナルな（必須でない）項目を定義できます。参照する際にはundefinedでないことをチェックしないとコンパイラに怒られます。hoge?.fugaのような Optional Chaining と呼ばれるシンタックスを最近の TypeScript (3.7 以降) では使うことができます。

以下に例を示します。

ts
123456789101112131415161718192021222324252627
                           
Copied!
// このようなtypeがあったとしましょう。
type OptionalObject =
  | undefined
  | {
      name: string;
    };

// どちらのも型を満たしています。
const hoge: OptionalObject = { name: "hoge" };
const fuga: OptionalObject = undefined;

// このような呼び出しでエラーとなってしまうため、nameにアクセスするには hoge やfugaがundefinedでないことをチェックしないといけません。
const piyo = fuga.name;

// そのため、以下のようなチェックをする必要があります。

// ifでチェック①
if (fuga) {
  const piyo = fuga.name;
}

// 論理演算②
const piyo = fuga && fuga.name;

// これだと面倒なので、Optional Chainingの登場です。
// やっていることは②と同じです。
const piyo = fuga?.name;

Generics

https://future-architect.github.io/typescript-guide/generics.html

型の引数です。使う状況によって型が変わる関数の型を指定する方法です。たとえば React の props なんかは Generics を使わないと宣言できません。

以下に例を示します。

ts
12345
     
Copied!
const someFunc = (name: T)<T> => {
    return name
}

const hoge = someFunc<string>("hoge") // hogeはstring型

このようなコードを書くことで関数の型を動的に指定して抽象化することができます。

React を使う上で覚えていなくてもなんとかなる機能

class

https://future-architect.github.io/typescript-guide/class.html

class で用いるシンタックスはたくさんありますが、React では関数がメインなので特に覚える必要がありません。