Zenn
Open6

React + TSどうすればいいのシート

React
TypeScript
rikusen0335rikusen0335

React + TS（以下React.ts）のReact.FCがそのうち非推奨になるらしいので、どうすればいいの、を含めReact.ts関連の情報についてまとめる

※一応できるだけ情報は正確に書いているつもりですが、鵜呑みにせず、わからなければ調べて、聞いてください。

rikusen0335rikusen0335

#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}
    </>
  )
}

参考

https://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/function_components

rikusen0335rikusen0335

参考にpitfall（落とし穴、ハマり場所てきな）があるけど、これは使ってないのでお尻ません！

rikusen0335rikusen0335

#関数を使うときに引数を指定したい

はい。

export function hoge<T>(foo: T) {
  console.log(typeof foo)
}
rikusen0335rikusen0335

#Promiseだけを返す関数を書くな

ESLintの二番煎じだけど...

// promiseFunction()の返り値はPromise<any>だとして...
const hoge = async () => await promiseFunction()

↑これ、全く意味がなくて、

const hoge = () => promiseFunction()

とやってること一緒というか、むしろパフォーマンス面で悪化しています。

ただし、その他に処理することがあればあり。
よくある例としては、取得したデータをすぐ使う場合とか

const hoge = async () => {
  const data = await promiseFunction()
  setField("hoge", data)
}