React TypeScriptで、関数の引数定義をする方法色々

react+typescrptを同時に学ぶと、相乗効果でより難しい気がします。
その中で基本の関数の書き方に色々な記述方法がありすぎて、毎回調べてしまってる状態なのでまとめてみました。reactチュートリアルの五目並べのやつです。
https://react.dev/learn/tutorial-tic-tac-toe

※型の種類とか細かい部分はひとまず置いといて、あくまで基本の記述方法について、です。
他にも見つけ次第追記していきます！

type SquareType = {
  value:number
}

// パターン1 アロー関数、型定義をジェネリックで行う方法。typeを利用。
// 凡庸的な型を定義する方法。React.FCは関数コンポーネントを定義する型で、
// React.FC<T>という形で使用する。
const Square:React.FC<SquareType> = (props) =>{
  return <button className="square">{props.value}</button>
}

// パターン２_A アロー関数で、型定義をジェネリックを使わずにtypeのみ行う
const Square = (props:SquareType) =>{
  return <button className="square">{props.value}</button>
}

// パターン２_B 通常の関数で、型定義をジェネリックを使わずにtypeのみ行う
function Square(props:SquareType){
  return <button className="square">{props.value}</button>
}


//パターン３_A アロー関数で、型定義を直に書く。ややこしい。あんまり見かけない。
const Square =({value}:{value:number}) =>{
  return <button className="square">{value}</button>
}

// パターン3_B 通常の関数で、型定義を直に書く。同上。
function Square({value}:{value:number}){
  return <button className="square">{value}</button>
}