关于前端:TypeScript-React-个人最佳实践WIP持续补充中

浏览 React Doc 中 TS 局部
浏览 TypeScript Playground 中 React 局部

引入 React：永远应用命名空间导入（namespace import）
```
import * as React from 'react';
import {useState} from 'react'; // 能够独自导出一遍外部项
import * as ReactDom from 'react-dom';
```
不举荐 import React from 'react'。👉为什么？
这种引入形式被称为 default export。不举荐的起因是第 React 仅仅是作为一个命名空间存在的，咱们并不会像应用一个值一样来应用 React。从 React 16.13.0 开始，React 的导出形式也曾经更正为 export {xxx, ...} 的模式了 (commit)。之所以default export 还能够应用，是因为目前 React 的构建产物是 Commonjs 标准的，webpack 等构建工具做了兼容。

export interface Props {
  /** The user's name */
  name: string;
  /** Should the name be rendered in bold */
  priority?: boolean
}

const PrintName: React.FC<Props> = (props) => {
  return (
    <div>
      <p style={{fontWeight: props.priority ? "bold" : "normal"}}>{props.name}</p>
    </div>
  )
}

我个别在开发时应用 vscode snippets 疾速生成：

"Functional, Folder Name": {
    "prefix": "ff",
    "body": [
      "import * as React from'react';",
      "","const {useRef, useState, useEffect, useMemo} = React;","",
      "","interface ${TM_DIRECTORY/.*[\\\\\\\\\\\\/](.*)$/$1/}Props {","",
      "}",
      "","const defaultProps: ${TM_DIRECTORY/.*[\\\\\\\\\\\\/](.*)$/$1/}Props = {};","",
      "const ${TM_DIRECTORY/.*[\\\\\\\\\\\\/](.*)$/$1/}: React.FC<${TM_DIRECTORY/.*[\\\\\\\\\\\\/](.*)$/$1/}Props> = (props: React.PropsWithChildren<${TM_DIRECTORY/.*[\\\\\\\\\\\\/](.*)$/$1/}Props> = defaultProps) => {",
      "const { } = props;",
      "","  return (","",
      ");",
      "};",
      "","export default ${TM_DIRECTORY/.*[\\\\\\\\\\\\/](.*)$/$1/};",""
    ],
    "description": "Generate a functional component template"
  },

举荐装置 vscode 插件：React Hooks Snippets 疾速写 hook，进步开发效率。

起因：一些状态初始值为空时，须要显示地申明类型：

const [user, setUser] = React.useState<User | null>(null)

留神：如果初始值为 undefined，可不必在泛型中加上 undefined。

注：不要常常用 useCallback，因为也会减少开销。仅当：

包装在 React.memo()（或 shouldComponentUpdate）中的组件承受回调 prop;
当函数用作其余 hooks 的依赖项时 useEffect(...，[callback])。

function useLoading() {const [isLoading, setLoading] = React.useState(false);
  const load = (aPromise: Promise<any>) => {setLoading(true)
    return aPromise.then(() => setLoading(false));
  }
  // 理论须要: [boolean, typeof load] 类型
  // 而不是主动推导的：(boolean | typeof load)[]
  return [isLoading, load] as const;
}

或者能够间接定义返回类型：

export function useLoading(): [
  boolean,
  (aPromise: Promise<any>) => Promise<any>
] {const [isLoading, setState] = React.useState(false)
  const load = (aPromise: Promise<any>) => {setState(true)
    return aPromise.then(() => setState(false))
  }
  return [isLoading, load]
}

interface GreetProps {age?: number}
const defaultProps: GreetProps = {age: 21};
const Greet = (props: GreetProps = defaultProps) => {/* ... */}

起因：Function Component 的 defaultProps 最终会被废除，不举荐应用。
如果仍要应用 defaultProps，举荐如下形式：

interface IProps {name: string}
const defaultProps = {age: 25,};

// 类型定义
type GreetProps = IProps & typeof defaultProps;
const Greet = (props: GreetProps) => <div></div>
Greet.defaultProps = defaultProps;

// 应用
const TestComponent = (props: React.ComponentProps<typeof Greet>) => {return <h1 />}
const el = <TestComponent name="foo" />

type 和 interface 的区别：type 类型不能二次编辑，而 interface 能够随时扩大。

获取组件参数类型：

// 获取参数类型
import {Button} from 'library' // 然而未导出 props type
type ButtonProps = React.ComponentProps<typeof Button> // 获取 props
type AlertButtonProps = Omit<ButtonProps, 'onClick'> // 去除 onClick
const AlertButton: React.FC<AlertButtonProps> = props => (<Button onClick={() => alert('hello')} {...props} />
)

获取返回值类型：

// 获取返回值类型
function foo() {return { baz: 1}
}
type FooReturn = ReturnType<typeof foo> // {baz: number}

/* ✅ */
/**
 * @param a 正文 1
 * @param b 正文 2
 */
type Test = {
  a: string;
  b: number;
};
const testObj: Test = {
  a: '123',
  b: 234,
};

当 hover 到 Test 时类型提醒更为敌对：

type AppProps = {
  /** string */
  message: string;
  /** number */
  count: number;
  /** boolean */
  disabled: boolean;
  /** 根本类型数组 */
  names: string[];
  /** 字符串字面量 */
  status: 'waiting' | 'success';
  /** 对象：列出对象全副属性 */
  obj3: {
    id: string;
    title: string;
  };
  /** item 为对象的数组 */
  objArr: {
    id: string;
    title: string;
  }[];
  /** 字典 */
  dict: Record<string, MyTypeHere>;
  /** 任意齐全不会调用的函数 */
  onSomething: Function;
  /** 没有参数 & 返回值的函数 */
  onClick: () => void;
  /** 携带参数的函数 */
  onChange: (id: number) => void;
  /** 携带点击事件的函数, 不要再用 e: any 了 */
  onClick(e: React.MouseEvent<HTMLButtonElement>): void;
  /** 可选的属性 */
  optional?: OptionalType;
  children: React.ReactNode; // 最佳，反对所有类型(JSX.Element, JSX.Element[], string)
  renderChildren: (name: string) => React.ReactNode;
  style?: React.CSSProperties;
  onChange?: React.FormEventHandler<HTMLInputElement>; // 表单事件
};

常见的 Eventl 类型：

React.SyntheticEvent<T = Element>
React.ClipboardEvent<T = Element>
React.DragEvent<T = Element>
React.FocusEvent<T = Element>
React.FormEvent<T = Element>
React.ChangeEvent<T = Element>
React.KeyboardEvent<T = Element>
React.MouseEvent<T = Element>
React.TouchEvent<T = Element>
React.PointerEvent<T = Element>
React.UIEvent<T = Element>
React.WheelEvent<T = Element>
React.AnimationEvent<T = Element>
React.TransitionEvent<T = Element>

定义事件回调函数：

type changeFn = (e: React.FormEvent<HTMLInputElement>) => void;

如果不太关怀事件的类型，能够间接应用 React.SyntheticEvent，如果指标表单有想要拜访的自定义命名输出，能够应用类型扩大:

const App: React.FC = () => {const onSubmit = (e: React.SyntheticEvent) => {e.preventDefault();
    const target = e.target as typeof e.target & {password: { value: string;};
    }; // 类型扩大
    const password = target.password.value;
  };
  return (<form onSubmit={onSubmit}>
      <div>
        <label>
          Password:
          <input type="password" name="password" />
        </label>
      </div>
      <div>
        <input type="submit" value="Log in" />
      </div>
    </form>
  );
};

/** ✅ */
interface ICounter {start: (value: number) => string
}

/** ❌ */
interface ICounter1 {start(value: number): string
}

Store.ts

import * as React from 'react';

export interface State {
  state1: boolean;
  state2: boolean;
}

export const initState: State = {
  state1: false,
  state2: true,
};

export type Action = 'action1' | 'action2';

export const StoreContext = React.createContext<{
  state: State;
  dispatch: React.Dispatch<Action>;
}>({state: initState, dispatch: value => { /** noop */} });


export const reducer: React.Reducer<State, Action> = (state, action) => {
 // 用 reducer 的益处之一是能够拿到之前的 state
  switch (action) {
    case 'action1':
      return {...state, state1: !state.state1};
    case 'action2':
      return {...state, state2: !state.state2};
    default:
      return state;
  }
};

WithProvider.tsx

import * as React from 'react';
import {StoreContext, reducer, initState} from './store';

const {useReducer} = React;

const WithProvider: React.FC<Record<string, unknown>> = (props: React.PropsWithChildren<Record<string, unknown>>) => {
  // 将 state 作为根节点的状态注入到子组件中
  const [state, dispatch] = useReducer(reducer, initState);
  const {children} = props;

  return <StoreContext.Provider value={{state, dispatch}}>{children}</StoreContext.Provider>;
};

export default WithProvider;

父组件：

import * as React from 'react';
import WithProvider from './withProvider';
import Component1 from './components/Component1';
import Component2 from './components/Component2';

const {useRef, useState, useEffect, useMemo} = React;

interface RankProps {}

const defaultProps: RankProps = {};

const Rank: React.FC<RankProps> = (props: React.PropsWithChildren<RankProps> = defaultProps) => {const {} = props;

  return (
    <WithProvider>
      <Component1 />
      <Component2 />
    </WithProvider>
  );
};


export default Rank;

子组件只须要 import StoreContext 之后 useContext() 就能失去 state 和 dispatch

import * as React from 'react';
import {StoreContext} from '../../store';

const {useContext} = React;

interface Component1Props {}

const defaultProps: Component1Props = {};

const Component1: React.FC<Component1Props> = (props: React.PropsWithChildren<Component1Props> = defaultProps) => {const { state, dispatch} = useContext(StoreContext);

  const {} = props;

  return (
    <>
      state1: {state.state1 ? 'true' : 'false'}
      <button
        type="button"
        onClick={(): void => {dispatch('action1');
        }}
      >
        changeState1 with Action1
      </button>
    </>
  );
};

export default React.memo(Component1); // 倡议有 context 的中央最好 memo 一下，进步性能

Store.ts 和 WithProvider.tsx 能够配置成 vscode snippets，须要用到时间接应用。

[1] React + TypeScript 实际
[2] 精读《React Hooks 最佳实际》

欢送在评论或 issue 中探讨，指出不合理之处，补充其余最佳实际~

关于前端:TypeScript-React-个人最佳实践WIP持续补充中

前置工作

引入 React：永远应用命名空间导入（namespace import）

组件开发

1. 尽量应用 Function Component 申明，即 React.FC：

Hook 相干

2. useState<T>：当状态初始值为空时，举荐写出残缺泛型，否则能够主动推断类型。

3. useMemo() 和 useCallback() 会隐式推断类型，举荐不传泛型

4. 自定义 hook 如果返回为数组，须要手动增加 const 断言：

其余

5. 应用默认参数值代替默认属性

6. 倡议应用 Interface 定义组件 props（TS 官网举荐做法），应用 type 也可，不强制

7. 应用 ComponentProps 获取未被导出的组件参数类型，应用 ReturnType 获取返回值类型

8. 对 type 或 interface 进行正文时尽量应用 /* /，以便取得更好的类型提醒

9. 组件 Props ts 类型标准

10. 组件中 event 解决

11. 尽量应用 optional channing

12. 尽量应用 React.ComponentProps<typeof Component> 缩小非必要 props 导出

13. 不要在 type 或 interface 中应用函数申明

14. 当部分组件联合多组件进行组件间状态通信时，如果不是特地简单，则不须要用 mobx 或者倡议联合 useReducer() 和 useContext() 一起应用，频繁的组件间通信最佳实际：

参考