WHAT - React 学习系列（三）

Editor Setup

A properly configured editor can make code clearer to read and faster to write. It can even help you catch bugs as you write them!

Most of the features listed below can be added to VS Code as extensions as well, making it highly configurable! Some editors come with these features built in, but others might require adding an extension.

linting
https://react.dev/learn/editor-setup#linting

formatting
https://react.dev/learn/editor-setup#formatting

Using Typescript

https://react.dev/learn/typescript

Out of the box, TypeScript supports JSX and you can get full React Web support by adding @types/react and @types/react-dom to your project.

The following compiler options need to be set in your tsconfig.json:

1. dom must be included in lib (Note: If no lib option is specified, dom is included by default).
2. jsx must be set to one of the valid options. preserve should suffice for most applications. If you’re publishing a library, consult the jsx documentationon what value to choose.

Every file containing JSX must use the .tsx file extension. This is a TypeScript-specific extension that tells TypeScript that this file contains JSX. These types in .tsx can be used for correctness checking and providing inline documentation in editors

tips：
To get type-checking, you can use the TypeScript Playground or use a more fully-featured online sandbox.
https://www.typescriptlang.org/play

we can look at a few examples of how to provide types for Hooks.
usestate https://react.dev/learn/typescript#typing-usestate
usereducer https://react.dev/learn/typescript#typing-usereducer
usecontext https://react.dev/learn/typescript#typing-usecontext
usememo https://react.dev/learn/typescript#typing-usememo
usecallback https://react.dev/learn/typescript#typing-usecallback

There is quite an expansive set of types which come from the @types/react package, it is worth a read when you feel comfortable with how React and TypeScript interact. You can find them in React’s folder in DefinitelyTyped.
DefinitelyTyped/types/react/index.d.ts at master · DefinitelyTyped/DefinitelyTyped
（1）dom events https://react.dev/learn/typescript#typing-dom-events
（2）children https://react.dev/learn/typescript#typing-children （React.ReactNode、React.ReactElement）
（3）style props https://react.dev/learn/typescript#typing-style-props （React.CSSProperties）

待学习
principles for structuring state
https://react.dev/learn/choosing-the-state-structure#principles-for-structuring-state