Typescript+React使用的几个问题

Question

问题描述

问题一

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项目，发现实际动手了后很多地方无法下手了，有哪位热心的朋友帮我解答下呀！

Answer 1

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

建议从学习typescript入手