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
参考サイト
継承
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