typescript学习笔记

import { useLocation } from 'react-router'

export default function Home() {
  const location = useLocation<{ aa: string } | null>()
  const aa = location.state?.aa

  return Home组件---{aa}
}

**注意：**因为useLocation和useHistory都需要指定Location类型，因此可以将类型存放到通用的类型声明文件中

// types.d.ts
export type LoginState = {
  aa: string
} | null

目标：能够掌握useParams在typescript中的使用

内容：

import { useParams } from 'react-router'

export default function Article() {
  const params = useParams<{ id: string }>()
  console.log(params.id)

  return (
    
      文章详情
      12
    
  )
}

**目标：**了解什么是TS中的unknown类型

内容：

// 没有类型检查就没有意义了，跟写JS一样。很不安全。
let value:any
value = true
value = 1
value.length

let value:unknown
value = 'abc'

(value as string).length

if (typeof value === 'string') {
  value.length
}

**目标：**掌握在ts项目中如何初始化redux

内容：

yarn add redux react-redux redux-devtools-extension

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

export default store

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

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

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

**目标：**掌握useSelector在ts中的使用

内容

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

// 获取todos数据
const todos = useSelector<{ name: string }, string>((state) => state.name)

const todos = useSelector((state: { name: string }) => state.name)

问题：如何准确的获取到store的类型？？

**目标：**能够掌握如何获取redux的rootState

内容：

参考文档：https://react-redux.js.org/using-react-redux/usage-with-typescript

typeof可以获取某个数据的类型

function fn(n1: number, n2:number):number {
  return n1 + n2
}

// 获取fn函数的类型
type Fn = typeof fn

function fn(n1: number, n2:number):number {
  return n1 + n2
}

// 获取fn函数的类型
type Fn = typeof fn

// 获取Fn函数的返回值类型
type Res = ReturnType

export type RootState = ReturnType

import { RootState } from '../store'

// 获取todos数据
const todos = useSelector((state: RootState) => state.todos)

**目标：**掌握reducers在TS中的写法

内容：

export function addTodo(name: string) {
  return {
    type: 'ADD_TODO',
    name,
  }
}

export function delTodo(id: number) {
  return {
    type: 'DEL_TODO',
    id,
  }
}

export type TodoAction =
  | {
      type: 'ADD_TODO'
      name: string
    }
  | {
      type: 'DEL_TODO'
      id: number
    }

export const addTodo = (name: string): TodoAction => {
  return {
    type: 'ADD_TODO',
    name
  }
}

export const delTodo = (id: number): TodoAction => {
  return {
    type: 'DEL_TODO',
    id
  }
}

type TodosList = {
  id: number
  name: string
  done: boolean
}[]
const initValue: TodosList = []
export default function todos(state = initValue, action: any): TodosList {
  return state
}

import { TodoAction } from '../actions/todos'

import { TodoAction } from '../types'
export default function todos(
  state = initValue,
  action: TodoAction
): TodosList {
  if (action.type === 'ADD_TODO') {
    return [
      {
        id: Date.now(),
        name: action.name,
        done: false,
      },
      ...state,
    ]
  }
  if (action.type === 'DEL_TODO') {
    return state.filter((item) => item.id !== action.id)
  }
  return state
}

**目标：**掌握useDispatch在ts中的使用

内容：

const dispatch = useDispatch()

 dispatch(delTodo(item.id))}>x

**目标：**掌握事件对象在TS中如何指定类型

内容：

const add = (e: React.KeyboardEvent) => {
  if (e.code === 'Enter') {
    dispatch(addTodo(name))
    setName('')
  }
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CmnCdEVO-1652862937637)(images/image-20211123215525876.png)]

**目标：**掌握redux thunk在typescript中的使用

内容：

yarn add redux-thunk

import thunk from 'redux-thunk'
const store = createStore(reducer, composeWithDevTools(applyMiddleware(thunk)))

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3elGgOL5-1652862937638)(images/image-20211123221615977.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dfSAA49F-1652862937638)(images/image-20211123221710008.png)]

export type RootThunkAction = ThunkAction

// 修改删除Action
export function delTodo(id: number): RootThunkAction {
  return (dispatch) => {
    setTimeout(() => {
      dispatch({
        type: 'DEL_TODO',
        id,
      })
    }, 1000)
  }
}

在redux-thunk@2.4.0新版中，使用dispatch的时候，会丢失提示，需要降级到2.3.0版本

https://github.com/reduxjs/redux-thunk/issues/326

yarn add redux-thunk@2.3.0

引入通用样式(资料中已经准备好)

import './styles/index.css'

封装频道组件和新闻列表组件

components/Channel.js

import React from 'react'

export default function Channel() {
  return (
    
      开发者资讯
      ios
      c++
      android
      css
      数据库
      区块链
      go
      产品
      后端
      linux
      人工智能
      php
      javascript
      架构
      前端
      python
      java
      算法
      面试
      科技动态
      js
      设计
      数码产品
      html
      软件测试
      测试开发
    
  )
}

components/NewsList.js

import React from 'react'
import avatar from '../assets/back.jpg'
export default function NewsList() {
  return (
    
      
        python数据预处理 ：数据标准化
        
          
        
        
          13552285417
          0评论
          2018-11-29T17:02:09
        
      
    
  )
}

根组件中渲染

import React from 'react'
import Channel from './components/Channel'
import NewsList from './components/NewsList'
export default function App() {
  return (
    
      
      
    
  )
}

准备静态资源

获取频道列表

http://geek.itheima.net/v1_0/channels

获取频道新闻

http://geek.itheima.net/v1_0/articles?channel_id=频道id×tamp=时间戳

步骤：

在store/reducers/channel.ts

const initValue = {
  channelList: [],
  active: 0
}

export default function channel(state = initValue, action: any) {
  return state
}

在store/actions/channel.ts

import axios from 'axios'
import { RootThunkAction } from '..'

export function getChannelList(): RootThunkAction {
  return async (dispatch) => {
    const res = await axios.get('http://geek.itheima.net/v1_0/channels')
    console.log(res)
  }
}

在components/Channel.tsx中

export default function Channel() {
  const dispatch = useDispatch()
  useEffect(() => {
    dispatch(getChannelList())
  }, [dispatch])

在store/actions/channel.ts

import axios from 'axios'
import { RootThunkAction } from '..'

// 1. 提供了Channel的类型
export type Channel = {
  id: number
  name: string
}

// 2. 提供了ChannelAction的类型
export type ChannelAction = {
  type: 'channel/getChannelList'
  payload: Channel[]
}
export function getChannelList(): RootThunkAction {
  return async (dispatch) => {
    const res = await axios.get('http://geek.itheima.net/v1_0/channels')
    
    // 3. dispatch ChannelAction  问题： dispatch的时候没有提示
    dispatch({
      type: 'channel/getChannelList',
      payload: res.data.data.channels
    })
  }
}

在store/index.ts

import { TodoAction } from './actions/todos'
import { ChannelAction } from './actions/channel'

export type RootAction = TodoAction | ChannelAction
export type RootThunkAction = ThunkAction

在store/reducers/index.ts

import { Channel, ChannelAction } from '../actions/channel'

// 提供了channel默认的数据的类型
type ChannelType = {
  channelList: Channel[]
  active: number
}

// 指定初始值的类型
const initValue: ChannelType = {
  channelList: [],
  active: 0
}

// 指定了action的类型和返回值的类型
export default function channel(
  state = initValue,
  action: ChannelAction
): ChannelType {
  if (action.type === 'channel/getChannelList') {
    return {
      ...state,
      channelList: action.payload
    }
  }
  return state
}

import { RootState } from '../store'

const channel = useSelector((state: RootState) => state.channel)

  {channel.channelList.map((item) => {
    return (
      
        {item.name}
      
    )
  })}

在store/actions/channel.ts

export type ChannelAction =
  | {
      type: 'channel/getChannelList'
      payload: Channel[]
    }
  | {
      type: 'channel/changeActive'
      payload: number
    }

export function changeActive(id: number): RootThunkAction {
  return (dispatch) => {
    dispatch({
      type: 'channel/changeActive',
      payload: id
    })
  }
}

在store/reducers/channel.ts

export default function channel(
  state = initValue,
  action: ChannelAction
): ChannelType {
  if (action.type === 'channel/getChannelList') {
    return {
      ...state,
      channelList: action.payload
    }
  }
  if (action.type === 'channel/changeActive') {
    return {
      ...state,
      active: action.payload
    }
  }
  return state
}

在components/Channel.tsx组件中注册事件

 dispatch(changeActive(item.id))}
>

在store/actions/article.ts

import axios from 'axios'
import { RootThunkAction } from '..'

export function getArticleList(id: number): RootThunkAction {
  return async (dispatch) => {
    const res = await axios.get(
      `http://geek.itheima.net/v1_0/articles?channel_id=${id}×tamp=${Date.now()}`
    )
    console.log(res)
  }
}

在组件中components/NewsList.tsx中

export default function NewsList() {
  const active = useSelector((state: RootState) => state.channel.active)
  const dispatch = useDispatch()
  useEffect(() => {
    dispatch(getArticleList(active))
  }, [dispatch, active])

在store/actions/article.ts

import axios from 'axios'
import { RootThunkAction } from '..'

export type Article = {
  art_id: string
  title: string
  aut_id: string
  comm_count: number
  pubdate: string
  aut_name: string
  is_top: number
  cover: {
    type: number
    images: string[]
  }
}
export type ArticleAction = {
  type: 'article/getArticleList'
  payload: Article[]
}

export function getArticleList(id: number): RootThunkAction {
  return async (dispatch) => {
    const res = await axios.get(
      `http://geek.itheima.net/v1_0/articles?channel_id=${id}×tamp=${Date.now()}`
    )
    dispatch({
      type: 'article/getArticleList',
      payload: res.data.data.results
    })
  }
}

在store/reducers/article.ts中

import { Article, ArticleAction } from '../actions/article'

type AritcleType = Article[]
const initValue: AritcleType = []
export default function article(
  state = initValue,
  action: ArticleAction
): AritcleType {
  if (action.type === 'article/getArticleList') {
    return action.payload
  }
  return state
}

在组件中渲染

import { useEffect } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import avatar from '../assets/back.jpg'
import { RootState } from '../store'
import { getArticleList } from '../store/actions/article'
export default function NewsList() {
  const active = useSelector((state: RootState) => state.channel.active)
  const dispatch = useDispatch()
  const articleList = useSelector((state: RootState) => state.article)
  useEffect(() => {
    dispatch(getArticleList(active))
  }, [dispatch, active])
  return (
    
      {articleList.map((item) => {
        return (
          
            {item.title}
            
              
            
            
              13552285417
              0评论
              2018-11-29T17:02:09
            
          
        )
      })}
    
  )
}