ReactにTypeScriptを導入【Tips集】

ReactにTypeScriptを導入したときのTipsをまとめました。
一助となればこれ幸い。
※基礎編レベルになります

手始め

App.tsxで書いてみる

ファイルApp.jsをApp.tsxに変更

App.tsx

import React, { FC } from 'react';

const App: FC = ()  => {
  const sum = (a: number, b: number): number => {
    return a + b;
  };
  return (
    <>
      <p>{sum(1, 2)}</p>
    </>
  );
};

export default App;

• FCはFunctional Component型の指定

Tips

interface

interface Todo {
  text: string;
  complete: boolean;
  name?: string;
  readonly x: number;
}

• 型の定義をまとめる
• 関数やオブジェクト、配列をまとめることができる
• interfaceの名前の頭文字は大文字
• name?は任意のプロパティ
• readonlyは読み込み専用、xを変更することができない

let hoge: Hoge = { x: 10 };
hoge.x = 5; // error

参考サイト

• Typescriptのinterfaceの使い方

継承

interface Todo {
  text: string;
  complete: boolean;
}

interface Todo2 extend Todo {
  tags: string[];
}

• extendで型を継承
• string[]は配列型で配列の中身がstring

外部ファイルで管理

export interface Action {
  type: string;
  payload: Hoge[];
}

• exportで外部ファイルに適用
• 複数interfaceを1つのファイルで管理可能

分割代入に適用

const { hoge }: { hoge: Data[] } = state;

• : { hoge: Data[] }で変数hogeの型指定
• Data[]は配列型で配列の中身がinterfaceのData

useState

パターン1

const [value, setValue] = useState<string>('');

• useStateに文字列型を指定

パターン2

interface Todo {
  text: string;
  complete: boolean;
}

const [todos, setTodos] = useState<Todo[]>([]);

• useStateにオブジェクト型を指定
• Todo[]は配列型で配列の中身がinterfaceのTodo

パターン3

interface State {
  notificationVisible: boolean;
}

const [state, setState] = useState<State>({
  notificationVisible: true
});

const handleClick = () => {
  setState({
    notificationVisible: false
  });

• Genericsで型指定したときの書き方

propsの型指定

interface HogeProps {
  name: string;
  age: number;
  prefecture?: string;
}

const Hoge: FC<HogeProps> = ({ name, age }) => {

関数に適用

interface Todo {
  text: string;
  complete: boolean;
}

const addTodo = (text: string): void => {
  const newTodos: Todo[] = [...todos, { text, complete: false }];
  setTodos(newTodos);
};

• : voidはreturn(返り値)がないときに指定

formのonSubmitのEventの型指定

const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
  e.preventDefault();
};

<form onSubmit={handleSubmit}>

• formのonSubmit関数の引数にReact.FormEventを指定

formのonChangeのEventの型指定

const [hoge, setHoge] = useState('');

const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
  const { value }: { value: string } = e.target;
  setHoge(value);
};

<input type="text" value={hoge} onChange={handleChange} />

• onChangeのevent関数の引数にReact.ChangeEvent<HTMLInputElement>)を指定
• const { value }: { value: string }は分割代入の型指定

mapで展開するときの型指定

interface Todo {
  text: string;
  complete: boolean;
}

<ul>
  {
    todos.map((todo: Todo, index: number) => (
      <li key={index}>{todo.text}</li>
    ))
  }
</ul>

stateとactionに導入

import React, { createContext } from 'react';

const FETCH_DATA: string = 'FETCH_DATA';

interface State {
  hoge: [];
}

interface Hoge {
  name: string;
  age: number;
}

interface Action {
  type: string;
  payload: Hoge[];
}

const initialState:State = {
  hoge: [];
};

const Index = createContext<State>(initialState);

const reducer = (state: State, action: Action) => {
  switch (action.type) {
    case FETCH_DATA:
      return { ...state, hoge: action.payload };
    default:
      return state;
  }
};

lazyに適用

import React, { lazy } from 'react';

const Hoge = lazy<any>(() => import('./Hoge'));

dispatchに適用

interface Hoge {
  name: string;
  age: number;
}

interface Action {
  type: string;
  payload: Hoge[];
}

type Dispatch = React.Dispatch<Action>

interface Foo {
  store: { state: State, dispatch: Dispatch }
}

• storeの型を指定
• Hoge[]は配列型で配列の中身がinterfaceのHoge