React + Typescript에서 props 전달

타입스크립트를 적용한 리액트에서 프롭스를 전달하려고하니 타입지정을 어떻게 해줘야될지 몰라 애를 먹었다. 이 문제는 interface type을 이용하여 간단히 해결할 수 있었다.
interface를 props의 type으로 설정하니 props 전달에 에러가 발생하지 않았다!

//Javascript

function App({name, age}) {
  const text = `나는 ${name}이고, ${age}살 이다.`
return <div>{text}</div>
}
//혹은
function App(props) {
  const text = `나는 ${props.name}이고, ${props.age}살 이다.`
return <div>{text}</div>
}

//Typescript

interface propsType {
  name:string;
  age:number;
}
function App(props:propsType) {
  const text = `나는 ${props.name}이고, ${props.age}살 이다.`
return <div>{text}</div>
}
//구조 분해 할당도 가능하다.
function App(props:propsType) {
  const {name, age} = props;
  const text = `나는 ${name}이고, ${age}살 이다.`
return <div>{text}</div>
}

// 바로 구조분해 할당으로 가저오는 방식도 가능하다.
function App({name, age}:propsType) {
  const text = `나는 ${name}이고, ${age}살 이다.`
return <div>{text}</div>
}