Use TypeScript in React projects (constant updates)

Erection of scaffolding

npm install -g create-react-app
Copy the code

Create a project

create-react-app proName --typescript
Copy the code

A profound

You can comment ts code to see the compiler error message

The Class components

Create pages /home/home.tsx in the SRC folder

import React, { Component } from "react";
// props has a name attribute and is of type string (an error will be reported if props. Name is used in a comment component)
interface IProps {
  name: string;
}
// Specify that state has the color attribute and the value is only red or blue
interface IState {
  color: "red" | "blue";
}
export default class Home extends Component<IProps.IState> {
  constructor(props: IProps) {
    super(props);
    this.state = {
      color: "red"
    };
  }
  render() {
    return (
      <div>
        <span style={{ color: this.state.color}} >{this.props. Name} Come on China!</span>
        <br />
        <button onClick={this.changeColor}>change color</button>
      </div>
    );
  }

  changeColor = (a)= > {
    let color = this.state.color;
    if (color === "red") {
      this.setState({
        color: "blue"
      });
    } else {
      this.setState({
        color: "red"}); }}; }Copy the code

App. The TSX

import React} from "react";
import "./App.css";
// import 
import Home from "./pages/home/Home";
function App() {
  return (
    <div className="App">{/* Pass the value to the Home component if there is no name: string; The code will report an error */}<Home name="Change say:" />
    </div>
  );
}
export default App;
Copy the code

Functional component

SRC folder to create pages/counter/counter. The TSX

/* Simple counter code */
import React from "react";

// props contains count, increment, and Decrement, and the types are specified
interface IProps {
  count: number;
  increment: (a)= > void;
  decrement: (a)= > void;
}

const Counter = ({ count, increment, decrement }: IProps) = > {
  return (
    <div>
      <h1>{count}</h1>
      <button onClick={increment}>+</button>
      <button onClick={decrement}>-</button>
    </div>
  );
};

export default Counter;

Copy the code

App. The TSX

import React, { useState, useCallback } from "react";
import "./App.css";
import Counter from "./pages/counter/Counter";
function App() {
  const [count, setCount] = useState(1);
  const increment = useCallback((a)= > {
    setCount(count + 1);
  }, [count]);

  const decrement = useCallback((a)= > {
    setCount(count - 1);
  }, [count]);

  return (
    <div className="App">{/* Rement must be uploaded to 'count', 'increment', 'Decrement' or 'decrement'.<Counter count={count} increment={increment} decrement={decrement} />
    </div>
  );
}

export default App;

Copy the code

High order component

Create components/Hoc. TSX under SRC

/* Add copyright higher-level components */
import React, { Component } from "react";

export class App extends Component {
  render() {
    return (
      <div>
        <h1>react</h1>
        <p>React. Js is a library for building user interfaces</p>
      </div>); }}/* We need to specify the type of Com. We can use any, but const CopyrightApp = withCopyright(123); The editor does not check for errors, but the code runs withCopyright(which needs to be a component)*/
// specify that Com is the react component type
const withCopyright = (Com: React.ComponentType) = > {
  return class extends Component {
    render() {
      return (
        <>
          <Com />
          <div>@copyright; Copyright @ 2016 ALL Rights Reserved.</div>
        </>); }}; }; const CopyrightApp = withCopyright(App); export default CopyrightApp;Copy the code

App. The TSX

import React from "react";
import "./App.css";
import Hoc from "./pages/components/Hoc";
function App() {
  return (
    <div className="App">
      <Hoc />
    </div>
  );
}

export default App;

Copy the code

Event

Create components/ botton.tsx under SRC

import React, { ReactNode } from "react";

// Is equivalent to interface
type IProps = {
  // react Node type
  children: ReactNode;
  React Mouse event class type
  click(e: React.MouseEvent): void;
};
const Button = (props: IProps) = > {
  return (
    <div>
      <button onClick={props.click}>{props.children}</button>
    </div>
  );
};

export default Button;

Copy the code

App. The TSX

import React, { useState, useCallback } from "react";
import "./App.css";
import Button from "./pages/components/Button";
function App() {
    // If e does not give the type any, the compiler will not prompt you when you type e. But when e gives the type react. MouseEvent, e. The compiler will have a prompt (what properties does the prompt have)
  const click = useCallback((e: React.MouseEvent) = > {
    console.log(e); } []);return (
    <div className="App">
      <Button click={click}>button test</Button>
    </div>
  );
}

export default App;

Copy the code