Several problems in using Typescript+React

problem description

question 1

// 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))

for the above code, I have used the any type for the time being. How should I write it in a standard way?

question 3

after installing @ types corresponding to the third-party library, for example, @ types/react,typescript will automatically go to "node_module/@types/react" to find it. What is the strategy for typescript to load @ types files? is there an official explanation?

question background

recently read the TS official website tutorial, and then try to build a typescript+react project, found that many places can not start after the actual start, which enthusiastic friend to help me answer it!

Jun.24,2022

  1. the default type of a generic type, or the default type if no generic type is defined.
  2. element events are different based on different elements. If it is onChange of input : event: React.ChangeEvent < HTMLInputElement >
  3. it is necessary to declare a variable type when the assignment accepted by a variable is a given type or when you want to force a constraint on the variable type.

it is recommended to start with learning typescript

Menu