type GreetProps = {
name:string
messageCount: number
isLoggedin:boolean
name:{
first:string
last:string
}
}
type PersonList = {
name:{
first:string,
last:string
}[]
}
type StatusProps = {
status:'loading'| 'success'|'error'
}
type OscarProps = {
children: React.ReactNode
}
type GreetProps = {
name:string
messageCount?: number
}
const {messageCount = 0} = props
type ButtonProps = {
handleClick: () => void
}
export const Button = (props: ButtonProps) => {
return <button onClick={props.handleClick}>click<button/>
}
<Button handleClick={()=> {console.log('click')}} />
type ButtonProps = {
handleClick: (event: React.MouseEvent<HTMLButtonElement>, id: number) => void
}
export const Button = (props: ButtonProps) => {
return <button onClick={(event)=> props.handleClick(event, 1)}>click<button/>
}
-- then
<Button handleClick={(event, id)=> {console.log('click', event)}} />
type InputProps = {
value:string
handleChange:(event: React.ChangeEvent<HTMLInputElement>) => void
}
export const Input = (props: InputProps) => {
return <input type='text' value={props.value} onChange={props.handleChange}>
}
type ContainerProps = {
styles: React.CSSProperties
}
export const Container = (props: ContainerProps) =>{
return (
<div styles={props.styles}>
Hello
</div>
)
}
type AuthUser = {
name:string
age:number
}
const [user, setUser] = useState<AuthUser | null>(null);
<div> Username is {user?.name}</div>
const [user, setUser] = useState<AuthUser>({} as AuthUser)