H5W3
当前位置:H5W3 > 其他技术问题 > 正文

【前端问题精选】Typescript+React使用的几个问题

问题描述

问题一

interface Action<T = any> {
  type: T
}
interface AnyAction extends Action {
  [extraProps: string]: any
}
interface Dispatch<A extends Action = AnyAction> {
  <T extends A>(action: T): T
}

上面是@types/react-redux中的部分代码,”<A extends Action = AnyAction>”这里的”=”什么含义?

问题二

// Login.tsx
class Login extends React.Component {
  public state = {
    userName: '',
    password: ''
  }
  public handleChange = (event: any): void => {
    const target: any = event.target;
    const type = target.type;
    // TODO
  }
  public render () {
    // TODO
  }
}

// LoginContainer.tsx
import { connect } from 'react-redux'
import { setUserName } from '../actions'
import { withRouter } from "react-router-dom"
import Login from '../components/Login'

const mapStateToProps = (state: any, ownProps: any) => ({
  hello: `Hello ${state.userName}!!!`
})

const mapDispatchToProps = (dispatch: any, ownProps: any) => ({
  onClick: () => { 
    dispatch(setUserName(ownProps.userName))
    ownProps.history.push('/home')
  }
})

export default withRouter(connect(
  mapStateToProps,
  mapDispatchToProps
)(Login))

上面这段代码,我暂且都用了any类型,实际应该怎么规范的写?

问题三

安装了对应第三方库的@types后,比如@types/react,typescript会自动去 “node_module/@types/react”找的吧,typescript加载@types文件的策略是什么,有官方说明嘛?

问题背景

最近把TS官网教程看了一遍,然后尝试构建typescript+react项目,发现实际动手了后很多地方无法下手了,有哪位热心的朋友帮我解答下呀!

回答:

  1. 泛型的默认类型,如果不定义泛型类型,则为默认类型。
  2. 元素事件基于不同元素不一样,假如为inputonChangeevent: React.ChangeEvent<HTMLInputElement>
  3. 当变量所接受的赋值为已定类型或者你想强制约束变量类型的时候,有必要声明变量类型。

建议从学习typescript入手

本文地址:H5W3 » 【前端问题精选】Typescript+React使用的几个问题

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址