创建

yarn create react-app ts-react-demo --typescript
写一个button组件
接受size属性
button.tsx
import React from 'react'
export default function() {
    return <div className="button">button</div>
index.tsx
import Button from './button'
ReactDOM.render(
    <div>Hello World<Button></Button></div>, 
    document.getElementById('root')
让button支持size

在使用button的时候传入一个size，然后我们需要在组件内部通过prop声明接受的这个size的类型
button.tsx
interface Iprops {
    size?: string
export default function(Props: Iprops) {
    return <div className={`button ${Props.size}`}>button</div>
index.tsx
import Button from './button'
ReactDOM.render(
        <Button size="small"></Button>
        <Button></Button>
        <Button size="big"></Button>
    </div>, 
    document.getElementById('root')
可以设置按钮内容
export default function(Props: Iprops) {
    return <div className={`button ${Props.size}`}>{Props.children}</div>
我们还想让内容里面可以使用html标签
children?: string | JSX.Element | JSX.Element[]
问题：正常情况下每个组件都会有children，如果我们有多个组件的话，那么你每个里面都得写children，写起来就会很繁琐，那么我们怎么简化我们的代码那？

解决办法：使用React的函数组件

声明一个变量类型为React的函数组件然后把我们定义的接口作为类型传进去，react的函数组件会帮我声明一个children
interface Iprops {
    size?: string
const Button: React.FunctionComponent<Iprops> = function(Props) {
    return <div className={`button ${Props.size}`}>{Props.children}</div>
export default Button
支持点击事件
interface Iprops {
    size?: string,
    onClick?: React.MouseEventHandler