React 组件prop添加类型

React 组件prop添加类型_第1张图片

给函数的props做注解

import { useState } from 'react'

type Props ={ 
  className:string,
  title?:string
}
// 自定义一个Button组件 
function Button(props:Props){
  // 解构出classname\
  const {className} = props
  return <button className={className}>点击我</button>
}



function App() {
  
  type User ={
    name:String,
    age:number

  }
  // 限制初始值类型 

  const [user,setUser] = useState<User | null>(null)
  //  限制setUser()对象参数 
  const changeUser = ()=>{
    setUser({
      name:`bob`,
      age:55
    })
  }

  return <>this is a app
  <Button class='nick'></Button></>
  
}

export default App

限制Button自定义组件的接收值必须为两个string类型的变量

你可能感兴趣的:(react.js,javascript,前端)