在React项目中使用TypeScript详情_React_

. ├── README.md ├── global.d.ts ├── mock ├── package.json ├── src │   ├── assets │   ├── components │   │   └── PublicComA │   │   ├── index.d.ts │   │   ├── index.less │   │   └── index.tsx │   ├── layouts │   ├── models │   ├── pages │   │   ├── PageA │   │   │   ├── index.d.ts │   │   │   ├── index.less │   │   │   └── index.tsx │   │   ├── index.less │   │   └── index.tsx │   └── utils ├── tsconfig.json ├── typings.d.ts └── yarn.lock

// typings.d.ts declare module '*.css'; declare module '*.less'; declare module "*.png"; declare module "*.jpeg"; declare module '*.svg' { export function ReactComponent(props: React.SVGProps): React.ReactElement const url: string export default url }

// global.d.ts interface Window { helloWorld: () => void; }

interface IProps { count: number } const App: React.FC = (props) => { const {count} = props; return ( 
count: {count}
 ); }

interface IProps { name: string; } interface IState { count: number; } class App extends React.Component { state = { count: 0 }; render() { return ( 
 {this.state.count} {this.props.name} 
 ); } }

function useState(initialState: S | (() => S)): [S, Dispatch>]; // convenience overload when first argument is omitted /** * Returns a stateful value, and a function to update it. * * @version 16.8.0 * @see https://reactjs.org/docs/hooks-reference.html#usestate */ function useState(): [S | undefined, Dispatch>]; /** * An alternative to `useState`. * * `useReducer` is usually preferable to `useState` when you have complex state logic that involves * multiple sub-values. It also lets you optimize performance for components that trigger deep * updates because you can pass `dispatch` down instead of callbacks. * * @version 16.8.0 * @see https://reactjs.org/docs/hooks-reference.html#usereducer */

const [count, setCount] = useState(1); const [user, setUser] = useState(null);

 function useRef(initialValue: T): MutableRefObject; // convenience overload for refs given as a ref prop as they typically start with a null value /** * `useRef` returns a mutable ref object whose `.current` property is initialized to the passed argument * (`initialValue`). The returned object will persist for the full lifetime of the component. * * Note that `useRef()` is useful for more than the `ref` attribute. It's handy for keeping any mutable * value around similar to how you'd use instance fields in classes. * * Usage note: if you need the result of useRef to be directly mutable, include `| null` in the type * of the generic argument. * * @version 16.8.0 * @see https://reactjs.org/docs/hooks-reference.html#useref */

// 不可变DOM节点，只读 const inputRef = useRef(null); // 可变，可重新复制 const idRef = useRef(null); idRef.current = "abc";

 function useCallback any>(callback: T, deps: DependencyList): T; /** * `useMemo` will only recompute the memoized value when one of the `deps` has changed. * * Usage note: if calling `useMemo` with a referentially stable function, also give it as the input in * the second argument. * * ```ts * function expensive () { ... } * * function Component () { * const expensiveResult = useMemo(expensive, [expensive]) * return ... * } * ``` * * @version 16.8.0 * @see https://reactjs.org/docs/hooks-reference.html#usememo */

// 会自动推导出类型： (a: number, b: number) => number; const add = useCallback((a: number, b: number) => a + b, [a, b]) // 传入泛型，则指定函数类型 const toggle = useCallback<(a: number) => number>((a: number) => a * 2, [a])

function useMemo(factory: () => T, deps: DependencyList | undefined): T; /** * `useDebugValue` can be used to display a label for custom hooks in React DevTools. * * NOTE: We don't recommend adding debug values to every custom hook. * It's most valuable for custom hooks that are part of shared libraries. * * @version 16.8.0 * @see https://reactjs.org/docs/hooks-reference.html#usedebugvalue */

// 会自动推导出类型： number; const add = useCallback((a: number, b: number) => a + b, [a, b]) // 传入泛型，则指定函数类型 const toggle = useCallback((a: number) => a * 2, [a])

function useContext(context: Context/*, (not public API) observedBits?: number|boolean */): T; /** * Returns a stateful value, and a function to update it. * * @version 16.8.0 * @see https://reactjs.org/docs/hooks-reference.html#usestate */

interface ITheme { color: string; } const ThemeContext = React.createContext({ color: "red" }); // 自动推导出类型为ITheme const theme = useContext(ThemeContext); // 等同于const theme = useContext(ThemeContext);

function useReducer>( reducer: R, initialState: ReducerState, initializer?: undefined ): [ReducerState, Dispatch>]; /** * `useRef` returns a mutable ref object whose `.current` property is initialized to the passed argument * (`initialValue`). The returned object will persist for the full lifetime of the component. * * Note that `useRef()` is useful for more than the `ref` attribute. It's handy for keeping any mutable * value around similar to how you'd use instance fields in classes. * * @version 16.8.0 * @see https://reactjs.org/docs/hooks-reference.html#useref */

type StateType = { name: string; age: number; } type Actions = { type: 'Change_Name'; payload: string; } | { type: 'Change_Age'; payload: number; } const initialState = { name: '小明', age: 18 } const reducerAction: Reducer = ( state, action, ) => { switch (action.type) { case 'Change_Name': return { ...state, name: action.payload }; case 'Change_Age': return { ...state, age: action.payload }; default: return state; } }; function Index() { const [state, dispatch] = useReducer(reducerAction, initialState); return ( 
姓名：{state.name}
年龄：{state.age}
 ); }