TypeScript 20 TS与函数组件

1 . 函数组件的类型以及组件的属性

两种写法 ：

1 . 1

type props = { name : string ; age? : number }
const Hello : FC< Props > = ( { name , age } ) => (
     <div>你好 ，我是 {name} , 我今年 { age }岁了。
)     // 函数的类型就是属性的类型

1 . 2

type props = { name : string ; age? : number }
const Hello = ({ name , age } ：props) => (
    <div>你好 ，我是 {name} , 我今年 { age }岁了。</div>
)

2 . 函数属性默认值 ：

2 . 1

const Hello : FC< Props > = ({ name , age })=>(
     <div>你好 ，我是 {name} , 我今年 { age }岁了。</div>
)
Hello . defaultProps = {
     age : 18
}

2 . 2

const Hello  = ({ name , age = 18 } : Props)=>(
     <div>你好 ，我是 {name} , 我今年 { age }岁了。</div>
)

3 . 事件绑定和事件对象 e

如果要用到事件对象 e ，就要给事件对象 e 指明类型 ，至于类型 ，鼠标放在 e 上面 ，TS 的类型推论可以来查看 。写法很简单 ，如下 ：