.
├── 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<SVGSVGElement>): React.ReactElement
  const url: string
  export default url
}

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

interface IProps {
  count: number
}

const App: React.FC<IProps> = (props) => {
  const {count} = props;
  return (
    <div className="App">
      <span>count: {count}</span>
    </div>
  );
}

interface IProps {
  name: string;
}

interface IState {
  count: number;
}

class App extends React.Component<IProps, IState> {
  state = {
    count: 0
  };
  render() {
    return (
      <div>
        {this.state.count}
        {this.props.name}
      </div>
    );
  }
}

function useState<S>(initialState: S | (() => S)): [S, Dispatch<SetStateAction<S>>];
// 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>(): [S | undefined, Dispatch<SetStateAction<S | undefined>>];
  /**
   * 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<IUser | null>(null);

 function useRef<T>(initialValue: T): MutableRefObject<T>;
 // 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節(jié)點(diǎn)，只讀
const inputRef = useRef<HTMLInputElement>(null);

// 可變，可重新復(fù)制
const idRef = useRef<string | null>(null);
idRef.current = "abc";

 function useCallback<T extends (...args: any[]) => 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
  */

// 會(huì)自動(dòng)推導(dǎo)出類(lèi)型： (a: number, b: number) => number;
const add = useCallback((a: number, b: number) => a + b, [a, b])

// 傳入泛型，則指定函數(shù)類(lèi)型
const toggle = useCallback<(a: number) => number>((a: number) => a * 2, [a])

function useMemo<T>(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
    */

// 會(huì)自動(dòng)推導(dǎo)出類(lèi)型： number;
const add = useCallback((a: number, b: number) => a + b, [a, b])

// 傳入泛型，則指定函數(shù)類(lèi)型
const toggle = useCallback<number>((a: number) => a * 2, [a])

function useContext<T>(context: Context<T>/*, (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<ITheme>({ color: "red" });

// 自動(dòng)推導(dǎo)出類(lèi)型為ITheme
const theme = useContext(ThemeContext); // 等同于const theme = useContext<ITheme>(ThemeContext);

function useReducer<R extends Reducer<any, any>>(
    reducer: R,
    initialState: ReducerState<R>,
    initializer?: undefined
): [ReducerState<R>, Dispatch<ReducerAction<R>>];
/**
  * `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<StateType, Actions> = (
  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 (
    <div>
      <div>姓名：{state.name}</div>
      <div>年齡：{state.age}</div>
    </div>
  );
}

// 定義一個(gè)生成Action類(lèi)型的泛型
type ActionMap<M extends Record<string, any>> = {
  [Key in keyof M]: M[Key] extends undefined
    ? {
        type: Key
      }
    : {
        type: Key
        payload: M[Key]
      }
}

type StateType = {
  name: string;
  age: number;
}

// 定義具體的Action類(lèi)型
type PayloadType = {
  Change_Name: string;
  Change_Age: number;
}

/** 
  ActionMap<PayloadType>會(huì)生成類(lèi)型
  {
    Change_Name: {
        type: Types.Name;
        payload: string;
    };
    Change_Age: {
        type: Types.Age;
        payload: number;
    };
  }
  而keyof ActionMap<PayloadType>則會(huì)生成 'Change_Name' | 'Change_Age'的類(lèi)型。
  所以Action最終的類(lèi)型便為：
  type Actions = {
      type: Types.Name;
      payload: string;
  } | {
      type: Types.Age;
      payload: number;
  }
*/
type Actions = ActionMap<PayloadType>[keyof ActionMap<PayloadType>]

const initialState = {
  name: '小明',
  age: 18
}

const reducerAction: Reducer<StateType, Actions> = (
  state,
  action,
) => {
  switch (action.type) {
    case Types.Name:
      return { ...state, name: action.payload };
    case Types.Age:
      return { ...state, age: action.payload };
    default:
      return state;
  }
};

  function useImperativeHandle<T, R extends T>(ref: Ref<T>|undefined, init: () => R, deps?: DependencyList): void;
  // NOTE: this does not accept strings, but this will have to be fixed by removing strings from type Ref<T>
  /**
   * `useImperativeHandle` customizes the instance value that is exposed to parent components when using
   * `ref`. As always, imperative code using refs should be avoided in most cases.
   *
   * `useImperativeHandle` should be used with `React.forwardRef`.
   *
   * @version 16.8.0
   * @see https://reactjs.org/docs/hooks-reference.html#useimperativehandle
   */

interface FancyProps {}

interface FancyRef {
  focus: () => void;
}
const FancyInput = forwardRef<FancyRef, FancyProps>((props, ref) => {
  const inputRef = useRef<HTMLInputElement>(null);
  useImperativeHandle(ref, () => ({
    focus: () => {
      inputRef.current?.focus();
    }
  }));
  return (
    <input ref={inputRef} {...props} />
  );
})
const Parent = () => {
  // 定義子組件ref
  const inputRef = useRef<FancyRef>(null);
  return (
    <div>
      <FancyInput 
        ref={inputRef}
      />
      <button 
        onClick={() => {
          // 調(diào)用子組件方法
          inputRef.current?.focus();
        }}
      >聚焦</button>
    </div>
  )
}

import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios';

// 攔截器定義
export interface RequestInterceptors {
  // 請(qǐng)求攔截
  requestInterceptors?: (config: AxiosRequestConfig) => AxiosRequestConfig
  requestInterceptorsCatch?: (err: any) => any
  // 響應(yīng)攔截
  responseInterceptors?: (config: AxiosResponse) => AxiosResponse
  responseInterceptorsCatch?: (err: any) => any
}

// 生成axios實(shí)例的參數(shù)，實(shí)例可以單獨(dú)傳入攔截器
export interface RequestConfig extends AxiosRequestConfig {
  interceptorsObj?: RequestInterceptors
}

// loading請(qǐng)求數(shù)量
let loadingCount: number = 0;

// 打開(kāi)loading
const showLoading = () => {
  loadingCount ++;
  if(loadingCount > 0) {
    // 顯示loading
    // Loading.show()
  }
}

// 關(guān)閉loading
const hideLoading = () => {
  loadingCount --;
  if(loadingCount <= 0) {
    // 隱藏loading
    // Loading.hide();
  }
}

function RequestBuilder(config: RequestConfig) {
  const { interceptorsObj, ...res } = config;

  const instance: AxiosInstance = axios.create(res);

  // 全局請(qǐng)求攔截器
  instance.interceptors.request.use(
    (request: AxiosRequestConfig) => {
      // 顯示loading
      showLoading();
      console.log('全局請(qǐng)求攔截器');
      // TODO：全局的請(qǐng)求頭操作等等
      return request;
    },
    (err: any) => err,
  )

  /**
   * 實(shí)例請(qǐng)求攔截器 
   * 要注意 axios請(qǐng)求攔截器為倒序執(zhí)行，所以要將實(shí)例請(qǐng)求攔截器注冊(cè)在全局請(qǐng)求攔截器后面
   */
  instance.interceptors.request.use(
    interceptorsObj?.requestInterceptors,
    interceptorsObj?.requestInterceptorsCatch,
  )

  /**
   * 實(shí)例響應(yīng)攔截器
   * axios響應(yīng)攔截器為正序執(zhí)行，所以要將實(shí)例響應(yīng)攔截器注冊(cè)在全局響應(yīng)攔截器前面
   */
  instance.interceptors.response.use(
    interceptorsObj?.responseInterceptors,
    interceptorsObj?.responseInterceptorsCatch,
  )
  
  // 全局響應(yīng)攔截器
  instance.interceptors.response.use(
    (response: AxiosResponse) => {
      console.log('全局響應(yīng)攔截器');
      // 關(guān)閉loading
      hideLoading();
      // TODO: 通用的全局響應(yīng)處理，token過(guò)期重定向登錄等等
      // 返回值為res.data，即后端接口返回的數(shù)據(jù)，減少解構(gòu)的層級(jí)，以及統(tǒng)一響應(yīng)數(shù)據(jù)格式。
      return response.data
    },
    (err: any) => {
      // 關(guān)閉loading
      hideLoading();
      // TODO: 錯(cuò)誤提示等
      return err;
    },
  )

  return instance;
}
export const http = RequestBuilder({baseURL: '/api'});

import * as axios from 'axios';
declare module 'axios' {
  // 定制業(yè)務(wù)相關(guān)的網(wǎng)絡(luò)請(qǐng)求響應(yīng)格式， T 是具體的接口返回類(lèi)型數(shù)據(jù)
  export interface CustomSuccessData<T> {
    code: number;
    msg?: string;
    message?: string;
    data: T;
    [keys: string]: any;
  }
  export interface AxiosInstance {
    // <T = any>(config: AxiosRequestConfig): Promise<CustomSuccessData<T>>;
    request<T = any, R = CustomSuccessData<T>, D = any>(config: AxiosRequestConfig<D>): Promise<R>;
    get<T = any, R = CustomSuccessData<T>, D = any>(url: string, config?: AxiosRequestConfig<D>): Promise<R>;
    delete<T = any, R = CustomSuccessData<T>, D = any>(url: string, config?: AxiosRequestConfig<D>): Promise<R>;
    head<T = any, R = CustomSuccessData<T>, D = any>(url: string, config?: AxiosRequestConfig<D>): Promise<R>;
    post<T = any, R = CustomSuccessData<T>, D = any>(
      url: string,
      data?: D,
      config?: AxiosRequestConfig<D>,
    ): Promise<R>;
    put<T = any, R = CustomSuccessData<T>, D = any>(
      url: string,
      data?: D,
      config?: AxiosRequestConfig<D>,
    ): Promise<R>;
    patch<T = any, R = CustomSuccessData<T>, D = any>(
      url: string,
      data?: D,
      config?: AxiosRequestConfig<D>,
    ): Promise<R>;
  }
}

import { http } from '@/utils/request';

interface Req {
  userId: string;
}

interface Res {
  userName: string;
  userId: string;
}

// 獲取用戶信息接口
const getUserInfo = async (params: Req) => {
  return http.get<Res>('/getUserInfo', {params})
}