Open6
React + TSどうすればいいのシート
rikusen0335React + TS（以下React.ts）のReact.FCがそのうち非推奨になるらしいので、どうすればいいの、を含めReact.ts関連の情報についてまとめる
※一応できるだけ情報は正確に書いているつもりですが、鵜呑みにせず、わからなければ調べて、聞いてください。
rikusen0335
#React.FC<>が非推奨？どうすればいいの
答え
type ComponentProps = {
message: string;
}
const Component = ({ message }: ComponentProps) => {
return (
<p>{message}</p>
)
}
#いままでchildrenを受け取ってたのは、どうすればいいの
答え
type ComponentProps = {
children: React.ReactNode;
}
const Component = ({ chidren }: ComponentProps) => {
return (
<>
{children}
</>
)
}
参考
rikusen0335参考にpitfall（落とし穴、ハマり場所てきな）があるけど、これは使ってないのでお尻ません！
rikusen0335また、React.FCを置き換えたい場合はこれを使うと良さそうです
rikusen0335#関数を使うときに引数を指定したい
はい。
export function hoge<T>(foo: T) {
console.log(typeof foo)
}
#Promiseだけを返す関数を書くな
ESLintの二番煎じだけど...
// promiseFunction()の返り値はPromise<any>だとして...
const hoge = async () => await promiseFunction()
↑これ、全く意味がなくて、
const hoge = () => promiseFunction()
とやってること一緒というか、むしろパフォーマンス面で悪化しています。
ただし、その他に処理することがあればあり。
よくある例としては、取得したデータをすぐ使う場合とか
const hoge = async () => {
const data = await promiseFunction()
setField("hoge", data)
}