TypeScriptでReactするための最小限

3 min read読了の目安(約3200字

TypeScript で React するために知っておくことはとりあえずは 2 つだけ

React をある程度まで学んだぞ!しかし,最近は React は TypeScript で書くのが当たり前になってきているらしい...他の言語と組み合わせるとかなんだか学ぶことが一気に増えそう 🥺 と思っている方をさくっとステップアップさせたいための記事

そもそも TypeScript は新しい言語という程のものではなく,JavaScript の型をしっかり書きましょうねというだけのことで,数学の問題を解けるようになってきたから途中式をしっかりと書こうねみたいなもの.

だから,型の種類と型の付け方だけ知っていおけば OK

型の種類

JavaScript をさわっているなら,あなたはなんとなく型の存在に気がついているはずです.

型の種類をざっくりと型を付ける(型注釈)の方法と一緒に紹介します.

型注釈とは「この変数にはこの型のものしか入りません」と示しておくことです.

文字列 / string

const moji: string = '文字だよ';

こんな風に変数名に:型名とすることで型注釈を付けれます.

数字 / number

const suji: number = 123;

真偽値 / boolean

const love: boolean = false;

配列

const fruits: string[] = ['apple' 'banana'];

配列の場合は型の名前の語尾に[]を付けることで,その型を要素に持つ配列ということになります.

オブジェクト

const hatimaki: {name: string, length: number} = {name: 'kiai', length: 60};

こんな感じで一つ一つに型を指定してあげる必要があります.

しかしこれだと長くなりそうですし,JavaScript ではオブジェクトをたくさん使うので,予め型を定義しておく方法を紹介します.

type Item = { // 型の名前は大文字始まり
  id: number,
  readonly name: string, // readonly...書き換え不可
  description?: string, // ?(optional)...あってもなくてもよいプロパティ
};

こんな風にして,Item という名前の型を定義できます.

readonly と optional の書き方と意味もついでに覚えておきましょう.

const oimo: Item = {id: 456, name: '里芋'};

これで短く書くことができました.以下のエラーに関しても確認しておきましょう.

const oimo: Item = {name: 'さつまいも'}; // idがないのでError

oimo.name = 'ただの壺'; // Error

item2.description = 'ただの壺'; // 用意された型なのでOK

文字列のリテラル型

指定した型を or で注釈することができます.どういうことかと言うと

const gochamaze: (string | number)[] = [123, '456', 789];

これで配列の中身は文字列か数字が入るということになります.|を使って or を示せることを覚えておきましょう.

よく,こんな風に応用されます.

let color: 'red' | 'blue' | 'yellow' = 'blue';

color = 'red';

color = 'greendayo'; // Error

型を見る方法

VSCode ではマウスを乗せると型を見ることができます.エラーが出ているときは型の不一致を確認して,解消しましょう.

React でよく使われる型の書き方

それでは,これらを応用して,React でよく使われる型の付け方を見ていきます.

と,その前に忘れていた関数に型を付ける方法から.

関数に型を付ける

const add = (a: number, b: number): number => a + b;

こんな風に引数と戻り値それぞれに型を付けます.

const hello = (): void => {
  console.log('Hello!');
};

戻り値がない場合はvoidという型を付けることも覚えておきましょう.

Component の props に付ける

簡単な Button コンポーネントを作ります.

import {VFC} from 'react';

type ComponentProps = {
  label: string,
  size?: 'large' | 'middle' | 'small',
  disabled?: boolean,
};

export const Component: VFC<ComponentProps> = ({
  label,
  size = 'middle', // なかった場合の初期値
  disabled = false, // なかった場合の初期値
}) => {
  console.log(`今回は${size}は実際に反映されません`);
  return <button disabled={disabled}>{label}</button>;
};

関数コンポーネントを定義するときは React が用意したVFCというものを使って型を付けます.

ComponentPropsには props(受け取る値)の型を書き,これを VFC<ComponentProps>と書くことで,反映されます.

useState などのメソッドに付ける

const [state, setState] = useState<string>()

ライブラリが用意したメソッドの初期値に型を付けたいときはuseState<string>()のように書くことが多いです.メソッドにもよるかもしれませんが,この書き方があることは覚えておきましょう.

そこなのかい!とツッコミたくなりますね.

これ,知らないとできないですよね...当時とても困りました.

create-react-app の TypeScript 版

npm

npx create-react-app --template typescript アプリの名前

yarn

yarn create react-app --template typescript アプリの名前

このどちらかで,すぐに TypeScript で React を試せる環境が作れますので,初めてみましょう.

最後に

この他にも知っておいたほうがいいことはあるのですが,最低限というものを列挙しました.特に any という型があることは内緒です.これを起点にして,React は TypeScript で書かないと怖いというレベルまでなっていただければ幸いです.