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: