当前位置: 首页> 房产> 建材 > react 结合 ts

react 结合 ts

时间:2025/7/11 23:21:03来源:https://blog.csdn.net/XiugongHao/article/details/139270475 浏览次数:0次

useState 中使用 ts

type User = {name: stringage: number
}
function App() {// 直接使用对象// const [user, setUser] = useState<User | null>(null)// const [user, setUser] = useState<User>({//     name: 'jack',//     age: 18// })// 使用函数返回对象const [user, setUser] = useState<User>(()=> {return {name: 'jack',age: 18}})// setUser 也同理有 直接修改 和 使用函数返回对象 的修改形式return (<>this is an app</>)
}
export default App

props 中使用 ts

type Props = {className: stringchildren: React.ReactNode
}
function Button(props: Props) {const {className, children} = propsreturn <button className={className}>{children}</button>
}
type Props = {onGetMsg?: (msg: string) => void
}
function Button(props: Props) {const {onGetMsg} = propsconst clickHandler = () => {onGetMsg?.('hello')}return <button onClick={clickHandler}>sendMsg</button>
}
function App() {return (<>{/*内联函数会自动进行类型推导,如果是外部函数 还需要手动进行类型约束*/}<Button onGetMsg={(msg) => console.log(msg)}/></>)
}
export default App

useRef 使用 ts

function App() {const domRef = useRef<HTMLInputElement>(null)useEffect(() => {console.log(domRef.current?.value)}, []);return (<><input ref={domRef}/></>)
}
export default App
function App() {const timerRef = useRef<number | undefined>(undefined)useEffect(() => {timerRef.current = setInterval(() => {console.log('1')}, 1000)return ()=> clearInterval(timerRef.current)}, []);return (<>this is div</>)
}
关键字:react 结合 ts

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

责任编辑: