函數式組件中 定義默認的props

函數式組件中 定義默認的props

import React from 'react'
export const Demo: React.FC = () => {
    return (
        <div>
            <Count count={1} />
            <Comp count={100} age={21}></Comp>
        </div>
    )
}

interface IProps {
    count: number
}

const defaultProps = {
    age: 25
}

/**
 * 方式1
 */
// 在 TypeScript 中，typeof 操作符可以用來獲取一個變量或對象的類型。
const Count = ({ age, count }: IProps & typeof defaultProps) => {
    return (
        <div>
            { count}
            { age}
        </div>
    )
}

Count.defaultProps = defaultProps

type GreetProps = { count: number } & typeof defaultProps

/**
 * 方式2
 */
const Comp: React.FC<GreetProps> = ({ count, age }) => {
    return (
        <div>
            { count}
            { age}
        </div>
    )
}
Comp.defaultProps = defaultProps

元素事件接口定義

// input React.FormEvent<HTMLInputElement>
<input type="text" name="" id="" onChange={ (e:React.FormEvent<HTMLInputElement>) => {
     console.log(e.currentTarget.value)
}}/>