The introduction of the React

import * as React from 'react'
import * as ReactDom from 'react-dom'
Copy the code

This method of introduction is considered to be the most reliable and recommended

Another way to introduce:

import React from 'react'
import ReactDom from 'react-dom'
Copy the code

You need to add additional configuration: “allowSyntheticDefaultImports” : true,

tsconfig.json

{
  "compilerOptions": {
    "target": "es5"."lib": [
      "dom"."dom.iterable"."esnext"]."allowJs": true."skipLibCheck": true."esModuleInterop": true."allowSyntheticDefaultImports": true."strict": true."forceConsistentCasingInFileNames": true."noFallthroughCasesInSwitch": true."module": "esnext"."moduleResolution": "node"."resolveJsonModule": true."isolatedModules": true."noEmit": true."jsx": "react-jsx"
  },
  "include": [
    "src"]}Copy the code

Functional component declaration

First: React.FunctionComponent

React.FC is the recommended form


type AppProps = {
  message: string
}
 
const App: React.FC<AppProps> = ({ message, children }) = > (
  <div>
    {message}
    {children}
  </div>
)
Copy the code

Use React.FC to declare function components versus normal declarations and PropsWithChildren:

  • React.FC explicitly defines the return type; other methods are derived implicitly
  • React.FC provides type checking and auto-completion for static properties: displayName, propTypes, defaultProps
  • React.FC provides implicit types for children (ReactElement | NULL), but there are some problems with the types currently provided

For example, when you use React.FC, you get a type error:

const App: React.FC = props= > props.children
const App: React.FC = () = > [1.2.3]
const App: React.FC = () = > 'hello'
Copy the code

Solutions:

const App: React.FC<{}> = props= > props.children as any
const App: React.FC<{}> = () = > [1.2.3] as any
const App: React.FC<{}> = () = > 'hello' as any
/ / or
const App: React.FC<{}> = props= > (props.children as unknown) as JSX.Element
const App: React.FC<{}> = () = > ([1.2.3] as unknown) as JSX.Element
const App: React.FC<{}> = () = > ('hello' as unknown) as JSX.Element
Copy the code

In most cases, the React.FC declaration mode is the simplest and most effective. If type incompatibility occurs, you are advised to use the following two methods

Second: PropsWithChildren

ReactNode = ReactNode; ReactNode = ReactNode;

type AppProps = React.PropsWithChildren<{ message: string} >const App = ({ message, children }: AppProps) = > (
  <div>
    {message}
    {children}
  </div>
)
Copy the code

Third: direct statement

type AppProps = {
  message: stringchildren? : React.ReactNode }const App = ({ message, children }: AppProps) = > (
  <div>
    {message}
    {children}
  </div>
)
Copy the code

Hooks

use State<T>

Returns a state and a function to update the state

In most cases ts will automatically deduce the type of state:

// 'val' is derived to Boolean, and toggle receives Boolean arguments
const [val, toggle] = React.useState(false)
// obj is automatically derived to type: {name: string}
const [obj] = React.useState({ name: 'sj' })
// arr is automatically derived to type: string[]
const [arr] = React.useState(['One'.'Two'])
Copy the code

Using derived types as interfaces/types:

export default function App() {
  // User is automatically derived to type: {name: string}
  const [user] = React.useState({ name: 'sj'.age: 32 })
  const showUser = React.useCallback((obj: typeof user) = > {
    return `My name is ${obj.name}, My age is ${obj.age}`
  }, [])
  return <div className="App">User: {showUser (user)}</div>
}
Copy the code

However, some states with an initial value of null require an explicit declaration of the type:

type User = {
  name: string
  age: number
}
const [user, setUser] = React.useState<User | null> (null)
Copy the code

useRef<T>

UseRef returns a mutable ref object whose.current property is initialized as the parameter passed in. The ref object returned remains constant throughout the life of the component

When the initial value is null, there are two ways to create it

const ref1 = React.useRef<HTMLInputElement>(null)
const ref2 = React.useRef<HTMLInputElement | null> (null)
Copy the code

The difference between the two is:

  • The first way ref1.current is read-only and can be passed to the built-in ref attribute, binding DOM elements
  • The second way ref2.current is mutable (similar to declaring a member variable of a class)
const ref = React.useRef(0)
React.useEffect(() = > {
  ref.current += 1
}, [])
Copy the code

When using both methods, you need to check the type: