TypeScript+Reactで、propsにデフォルト値を持たせたかった

こう書きました

<SayHello {...createSayHelloProps({lastName: 'Iijima'})}/>

const SayHello: React.SFC<SayHelloProps> = props => {
  return (<div>Hello, {props.firstName} {props.lastName}</div>)
}

function createSayHelloProps({
  firstName = 'Kaga',
  lastName = 'Tetsuo'
}): SayHelloProps {
  return {
    firstName,
    lastName
  }
}

interface SayHelloProps {
  firstName: string
  lastName: string
}

• 引数を hash にすることで、名前付き引数っぽく使っています
• また、デフォルト値を持たせた関数を経由しているので、hash の key を省略可能です。

ちなみに、下記部分は hash のkey と value が同名の時の省略記法(tslint推奨)です。

return {
  firstName,
  lastName
}

// これと意味は同じ
return {
  firstName: firstName,
  lastName: lastName
}

おわりに

より良い書き方ありましたらコメントお願いします🙇‍♂️