I have always wanted to learn TypeScript and try to learn how to write js with types. I happen to have time to write a small example with React these days.

  1. Instead of using WebPack to configure ts+ React, use typescript’s recommended setup methodcreate-react-app my-app --scripts-version=react-scripts-tsJust run this in the terminal and wait for the project to be built and ready to go. The following figure shows the directory structure

    Specific what each directory does is not one explanation, look at the directory name basic can know, because directly with scaffolding generation so basic do not want us to configure, directly start our example

    TSX is the entry file that renders the App component, so we are going to do the next step directly inside the App. The goal is to implement a React render props to display the current mouse position on the screen.

  2. So let’s start with MousePoint and we’re going to do the same thing except we’re going to write some type declarations. So let’s start with Reactimport * as React from 'react'Then, since we want to display the current location on the screen, the next step is to write a Component that shows the location of the mouse.
class MousePoint extends React.Component {
  super(props){
    this.state = {
      x:null.y:null}}const move = (e) = > {
    this.setState({
      x:e.clientX,
      y:e.clientY
    })
  }
  
  render(){
    return (
      <div style={{height:1000px; }} onMouseMove={this.move}>
        {this.props.render({
          x:this.state.x,
          y:this.state.y
        })}
      </div>)}}Copy the code

The code is relatively simple and the only thing that needs to be explained is the render function called, which is the key to implementing the Render props, the way to pass out the mouse position of the MousePoint building. But so far we still do not use ts knowledge, now we still use JS in writing, how to use JS to write, as long as we add our type declaration is perfect.

interface MousePointProps {
  render:(point: {
      x: number|null.y: number|null
  }) => React.ReactElement<HTMLDivElement>
}

interface MOusePointState {
  x: number|null;
  
}

class MousePoint extends React.Component<MousePointProps.MousePointState> {
  super(props: MousePointProps){
    this.state = {
      x:null.y:null}}const move = (e: React.MouseEvent<HTMLDivElement>) = > {
    this.setState({
      x:e.clientX,
      y:e.clientY
    })
  }
  
  render(){
    return (
      <div style={{height:1000px; }} onMouseMove={this.move}>
        {this.props.render({
          x:this.state.x,
          y:this.state.y
        })}
      </div>)}}Copy the code

Interface specifies that the value passed in must have the same name and type as the one defined in the interface. You can go to the typescript website to see how it’s explained better than I can.

  1. Write a component that needs to use the Mouse Point location, which is equivalent to a specific business component in our daily development

interface RenderPointsProps {
    point: {
        x: number|null;
        y: number|null;
    };
}

const RenderPoint: React.SFC<RenderPointsProps> = (props) = > {
  const {point} = props;
  return (
    <div> current posiont of x is {point.x} y is {point.y} </div>)}Copy the code

One thing to note here is that we use React.SFC as the React Function Component type declaration.

  1. Put everything together and it’s over
class App extends React.Component {
    render() {
        return (
            <div>
                <MousePoint 
                    renders={(points: {x: number|null; y: number|null}) => { 
                        return <RenderPoints point={points}/>; 
                    }} 
                />
            </div>
        );
    }
}

export default App;
Copy the code

Summary: This is just a small example, but it gave me some insight into typescript and helped me understand render props. I hope this article gave you some insight.