React/03.React中使用TS/01.函数组件的类型.tsx

import ReactDOM from "react-dom";
import { FC } from "react";

// React 函数组件的类型以及组件的属性

type Props = { name: string; age?: number}

// 第一种：
const Hello: FC<Props> = ( { name, age } ) => (
  <div>我是：{name}, 我 { age } 岁</div>
)

// 第二种（简化）：
const HI = ({ name, age }: Props) => (
  <div>
  我是：{name}, 我 { age } 岁
  </div>
)

const App = () => <div>
  {/* name 是必填的 */}
  <Hello name="jack" age={ 30 }/>
  <HI name="Ken" age={ 20 }/>
</div>

ReactDOM.render(<App />, document.getElementById('root'))