在React中使用TypeScript

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第3天，点击查看活动详情。

---

大家好,我是大帅子,今天我们直接给大家介绍一下简单的todo案例,我们在React中使用ts,我这边直接上案例,因为是我这边自己做的小案例,所有没有地方获取数据我写的假数据,我们重在掌握知识~😛(不要说这个博主lj不会后端,本人还真不会😥,最近想学后端不知道难不难,了解的小伙伴可以评论区互相分享一下)

---

创建我们的第一个用typescript写的第一项目

安装依赖包

yarn add  redux react-redux redux-thunk redux-devtools-extension

目录结构

store的基本结构都是固定的套路，注意如下的store:

├── store
│   ├── index.ts      # 
│   └── reducers      # 
│       ├── index.ts  # 
│       └── todos.ts  # 
├── App.tsx           # 根组件
├── index.js          # 项目入口
└── package.json

创建文件

新建文件 store/index.ts

import { createStore } from 'redux'
import reducer from './reducers'
import { composeWithDevTools } from 'redux-devtools-extension'
const store = createStore(reducer, composeWithDevTools())
​
export default store

新建文件 store/reducers/index.ts

import { combineReducers } from 'redux'
import todos from './todos'
const rootReducer = combineReducers({
  todos,
})
export default rootReducer
​

新建文件 store/reducers/todos.ts

const initValue = [
  {
    id: 1,
    name: '吃饭',
    isDone: false,
  },
  {
    id: 2,
    name: '睡觉',
    isDone: true,
  },
  {
    id: 3,
    name: '打豆豆',
    isDone: false,
  },
]
export default function todos(state = initValue, action: any) {
  return state
}
​

index.tsx中

import ReactDOM from 'react-dom'
import './index.css'
import App from './App'
import store from './store'
import { Provider } from 'react-redux'
ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
)
​

测试

在react-redux调试工具中查看效果,当我们看见如下数据,就证明我们成功了

小结

reducer中的action比较复杂，先给any , 这里给初学的小伙伴说一下, any虽好,但是行内有句话说的好,你不要把ts写成了js,这可不是夸人的哦~

useSelector的使用

useSelector的基本使用

按之前的js的使用格式，它会报错

// 获取todos数据
const todos = useSelector( state  => state.todos) // 这里会报错

要改造错误，先学下格式。

useSelector格式

useSelector接收两个泛型参数

• 第一个泛型类型：TState的默认值是DefaultRootState（就是{}）用于指定state的类型
• 第二个泛型类型：TSelected用于指定返回值的类型

export function useSelector<TState = DefaultRootState, TSelected = unknown>(
    selector: (state: TState) => TSelected,
    equalityFn?: (left: TSelected, right: TSelected) => boolean
): TSelected;

使用

方式1： 指定泛型类型

const todos = useSelector<{todos:[]} ,{id:number, name:string,isDone:boolean}[]>(state => state.todos)
console.log(todos)

方式2：直接指定回调函数的形参类型

const todos = useSelector((state: {todos:{id:number, name:string,isDone:boolean}[]})  => state.todos)

注意，我们没有指定返回值的类型。因为它可以自己推论出来

参考文档

渲染todos

<h1>todos</h1>
<ul>
    {
       todos.map(it =>(<li key={it.id}>{it.name}- {it.isDone}</li>))
    }
</ul>

---

好了,今天先给数据渲染上去,明天直接上增删改查,讲的不好, 欢迎留言我这边一定会第一时间给大家解答,喜欢的可以点赞收藏,
🐣---->🦅        还需努力!大家一起进步!!!