react+ts

最新推荐文章于 2024-10-18 08:00:00 发布

jiojio冲冲冲

最新推荐文章于 2024-10-18 08:00:00 发布

阅读量1.4k

点赞数 22

CC 4.0 BY-SA版权

分类专栏： React 文章标签： react.js arcgis 前端

本文链接：https://blog.csdn.net/weixin_42268006/article/details/135990328

本文探讨了如何在React和TypeScript项目中有效利用Hook（如useState）的自动推导功能，创建Vite项目模板，以及如何通过泛型、useRef等技术确保类型安全，包括DOM操作和组件prop的类型定义。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.概念

React和TypeScript集合使用的重点集中在存储数据/状态有关的Hook函数以及组件接口的位置，这些地方最需要数据类型校验
在这里插入图片描述

2.使用Vite创建项目

Vite是前端工具链工具，可以帮助我们快速创建一个 react+ts 的工程化环境出来
Vite官网：https://cn.vitejs.dev/

npm create vite@latest react-typescript -- --template react-ts
                        项目名称                        模版模式

安装依赖运行项目

# 安装依赖
npm i 

# 运行项目
npm run dev

3.useState——自动推导

简单场景

简单场景下，可以使用TS的自动推断机制，不用特殊编写类型注解，运行良好

const [val, toggle] = React.useState(false)
// `val` 会被自动推断为布尔类型
// `toggle` 方法调用时只能传入布尔类型

// react + ts
// 根据初始值自动推断
// 场景：明确的初始值
import {
   
    useState } from 'react'
function App() {
   
   
  const [value, toggle] = useState(false)
  const [list, setList] = useState([1, 2, 3])

  const changeValue = () => {
   
   
    toggle(true)
  }

  const changeList = () => {
   
   
    setList([4])
  }
  return <>this is app {
   
   list}</>
}

export default App

4.useState——传递泛型参数

useState本身是一个泛型函数，可以传入具体的自定义类型

// react + ts
type User = {
   
   
  name: string
  age: number
}
const [user, setUser] = useState<User>({
   
   
   name: 'jack',
   age: 18,
  })

说明：
1.限制useState函数参数的初始值必须满足类型为：user ｜（

最低0.47元/天解锁文章

200万优质内容无限畅学