TypeScriptでReactするための最小限
TypeScript で React するために知っておくことはとりあえずは 2 つだけ
よし！React をある程度まで学んだぞ！
と思ったら, 最近は React は TypeScript で書くのが当たり前になってきているらしい...
他の言語と組み合わせるとかなんだか学ぶことが一気に増えそう 🥺
と思っている方をさくっとステップアップさせたいための記事
そもそも TypeScript は新しい言語という程のものではなく,JavaScript の型をしっかり書きましょうねというだけのことで,ひらがなで書いていた文章を少しずつ漢字で書こうね.数学の問題を解けるようになってきたから,途中式をしっかりと書こうね みたいなもの.
だから, 型の種類と型の付け方だけ知っていおけば OK
型の種類
JavaScript をさわっているなら, あなたはなんとなく型の存在に気がついているはずです.
この記事では, 型の種類を**型の付け方（型注釈 / annotation）**と一緒に紹介します.
型注釈とは「この変数にはこの型のものしか入りません」とはっきりと示しておくことです.
文字列 / string
const moji: string = '文字だよ';
こんな風に変数名に:型名とすることで型注釈を付けれます.
数字 / number
const suji: number = 123;
真偽値 / boolean
const love: boolean = false;
数字と真偽値も同様です.
配列
const fruits: string[] = ['apple' 'banana'];
配列の場合は型の名前の語尾に[]を付けることで,その型を要素に持つ配列ということになります.
直感的に[string]と書いてしまうと,「1 番目が文字列である配列の型」という意味になるので注意してください.
オブジェクト
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 を示せることを覚えておきましょう.
よく,こんな風に応用されます.
type Color = 'red' | 'blue' | 'yellow';
let color: Color = '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', // なかった場合の初期値（書かないとundefind）
disabled = false, // なかった場合の初期値（書かないとundefind）
}) => {
console.log(`今回は${size}は実際に反映されません`);
return <button disabled={disabled}>{label}</button>;
};
関数コンポーネントを定義するときは React が用意したVFCというものを使って型を付けます.
ComponentPropsには props（受け取る値）の型を書き,これを VFC<ComponentProps>と書くことで,反映されます.
useState などのメソッドに付ける
const [state, setState] = useState<string>()
ライブラリが用意したメソッドの初期値に型を付けたいときはuseState<string>()のように書くことが多いです.メソッドにもよるかもしれませんが,この書き方があることは覚えておきましょう.
そこなのかい！とツッコミたくなりますね.
これ,知らないとできないですよね...当時とても困りました.
React×TypeScript の学習の始め方
create-react-app の TypeScript 版
npm
npx create-react-app --template typescript アプリの名前
yarn
yarn create react-app --template typescript アプリの名前
このどちらかで,すぐに TypeScript で React を試せる環境が作れますので,初めてみましょう.
最後に
この他にも知っておいたほうがいいことはあるのですが,最低限というものを列挙しました.特に any という型があることは内緒です.これを起点にして,React は TypeScript で書かないと怖いというレベルまでなっていただければ幸いです.
Discussion