🔖TypeScript 備忘錄：如何在 React 中完美運用？

前言

一直以來，ssh 身邊都有不少小夥伴對 TS 如何在 React 中運用有不少困惑，他們開始慢慢討厭 TS，以爲各類莫名其妙的問題下降了開發的效率。

其實若是運用熟練的話，TS 只是在第一次開發的時候稍微多花一些時間去編寫類型，後續維護、重構的時候就會發揮它神奇的做用了，仍是很是推薦長期維護的項目使用它的。

其實我一直知道英文版有個不錯的備忘錄，原本想直接推薦給小夥伴，奈何不少人對英文比較頭痛，而它中文翻譯的版本點進去居然是這個景象：

既然如此，就本身動手。結合英文原版裏的一些示例進行一些擴展，總結成這篇備忘錄。

前置基礎

閱讀本文的前提條件是：

• 熟悉 React 的使用。
• 熟悉 TypeScript 中的類型知識。
• 本文會側重使用 React Hook 做爲示例，固然大部分類型知識都是通用的。

也就是說，這篇文章側重點在於 「React 和 TypeScript 的結合」，而不是基礎知識，基礎知識閱讀文檔便可學習。

也推薦看我 初中級前端的高級進階指南 這篇文章中的 React 和 TypeScript 章節，這裏很少贅述。

工具

• TypeScript Playground with React：能夠在線調試 React + TypeScript，只能調試類型，並不能運行代碼
• Stackblitz：雲開發工具，能夠直接運行 React 代碼而且預覽
• Create React App TypeScript: 本地用腳手架生成 React + TS 的項目

選擇你以爲比較中意的調試工具便可。

組件 Props

先看幾種定義 Props 常常用到的類型：

基礎類型

type BasicProps = {
  message: string;
  count: number;
  disabled: boolean;
  /** 數組類型 */
  names: string[];
  /** 用「聯合類型」限制爲下面兩種「字符串字面量」類型 */
  status: "waiting" | "success";
};

對象類型

type ObjectOrArrayProps = {
  /** 若是你不須要用到具體的屬性 能夠這樣模糊規定是個對象 ❌ 不推薦 */
  obj: object;
  obj2: {}; // 同上
  /** 擁有具體屬性的對象類型 ✅ 推薦 */
  obj3: {
    id: string;
    title: string;
  };
  /** 對象數組 😁 經常使用 */
  objArr: {
    id: string;
    title: string;
  }[];
  /** key 能夠爲任意 string，值限制爲 MyTypeHere 類型 */
  dict1: {
    [key: string]: MyTypeHere;
  };
  dict2: Record<string, MyTypeHere>; // 基本上和 dict1 相同，用了 TS 內置的 Record 類型。
}

函數類型

type FunctionProps = {
  /** 任意的函數類型 ❌ 不推薦 不能規定參數以及返回值類型 */
  onSomething: Function;
  /** 沒有參數的函數 不須要返回值 😁 經常使用 */
  onClick: () => void;
  /** 帶函數的參數 😁 很是經常使用 */
  onChange: (id: number) => void;
  /** 另外一種函數語法 參數是 React 的按鈕事件 😁 很是經常使用 */
  onClick(event: React.MouseEvent<HTMLButtonElement>): void;
  /** 可選參數類型 😁 很是經常使用 */
  optional?: OptionalType;
}

React 相關類型

export declare interface AppProps {
  children1: JSX.Element; // ❌ 不推薦 沒有考慮數組
  children2: JSX.Element | JSX.Element[]; // ❌ 不推薦 沒有考慮字符串 children
  children4: React.ReactChild[]; // 稍微好點 可是沒考慮 null
  children: React.ReactNode; // ✅ 包含全部 children 狀況
  functionChildren: (name: string) => React.ReactNode; // ✅ 返回 React 節點的函數
  style?: React.CSSProperties; // ✅ 推薦 在內聯 style 時使用
  // ✅ 推薦原生 button 標籤自帶的全部 props 類型
  // 也能夠在泛型的位置傳入組件 提取組件的 Props 類型
  props: React.ComponentProps<"button">;
  // ✅ 推薦 利用上一步的作法 再進一步的提取出原生的 onClick 函數類型 
  // 此時函數的第一個參數會自動推斷爲 React 的點擊事件類型
  onClickButton：React.ComponentProps<"button">["onClick"]
}

函數式組件

最簡單的：

interface AppProps = { message: string };

const App = ({ message }: AppProps) => <div>{message}</div>;

包含 children 的：

利用 React.FC 內置類型的話，不光會包含你定義的 AppProps 還會自動加上一個 children 類型，以及其餘組件上會出現的類型：

// 等同於
AppProps & { 
  children: React.ReactNode 
  propTypes?: WeakValidationMap<P>;
  contextTypes?: ValidationMap<any>;
  defaultProps?: Partial<P>;
  displayName?: string;
}

// 使用
interface AppProps = { message: string };

const App: React.FC<AppProps> = ({ message, children }) => {
  return (
    <>
     {children}
     <div>{message}</div>
    </>
  )
};

Hooks

@types/react 包在 16.8 以上的版本開始對 Hooks 的支持。

useState

若是你的默認值已經能夠說明類型，那麼不用手動聲明類型，交給 TS 自動推斷便可：

// val: boolean
const [val, toggle] = React.useState(false);

toggle(false)
toggle(true)

若是初始值是 null 或 undefined，那就要經過泛型手動傳入你指望的類型。

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

// later...
setUser(newUser);

這樣也能夠保證在你直接訪問 user 上的屬性時，提示你它有多是 null。

經過 optional-chaining 語法（TS 3.7 以上支持），能夠避免這個錯誤。

// ✅ ok
const name = user?.name

useReducer

須要用 Discriminated Unions 來標註 Action 的類型。

const initialState = { count: 0 };

type ACTIONTYPE =
  | { type: "increment"; payload: number }
  | { type: "decrement"; payload: string };

function reducer(state: typeof initialState, action: ACTIONTYPE) {
  switch (action.type) {
    case "increment":
      return { count: state.count + action.payload };
    case "decrement":
      return { count: state.count - Number(action.payload) };
    default:
      throw new Error();
  }
}

function Counter() {
  const [state, dispatch] = React.useReducer(reducer, initialState);
  return (
    <>
      Count: {state.count}
      <button onClick={() => dispatch({ type: "decrement", payload: "5" })}>
        -
      </button>
      <button onClick={() => dispatch({ type: "increment", payload: 5 })}>
        +
      </button>
    </>
  );
}

「Discriminated Unions」通常是一個聯合類型，其中每個類型都須要經過相似 type 這種特定的字段來區分，當你傳入特定的 type 時，剩下的類型 payload 就會自動匹配推斷。

這樣：

• 當你寫入的 type 匹配到 decrement 的時候，TS 會自動推斷出相應的 payload 應該是 string 類型。
• 當你寫入的 type 匹配到 increment 的時候，則 payload 應該是 number 類型。

這樣在你 dispatch 的時候，輸入對應的 type，就自動提示你剩餘的參數類型啦。

useEffect

這裏主要須要注意的是，useEffect 傳入的函數，它的返回值要麼是一個方法（清理函數），要麼就是undefined，其餘狀況都會報錯。

比較常見的一個狀況是，咱們的 useEffect 須要執行一個 async 函數，好比：

// ❌ 
// Type 'Promise<void>' provides no match 
// for the signature '(): void | undefined'
useEffect(async () => {
  const user = await getUser()
  setUser(user)
}, [])

雖然沒有在 async 函數裏顯式的返回值，可是 async 函數默認會返回一個 Promise，這會致使 TS 的報錯。

推薦這樣改寫：

useEffect(() => {
  const getUser = async () => {
    const user = await getUser()
    setUser(user)
  }
  getUser()
}, [])

或者用自執行函數？不推薦，可讀性很差。

useEffect(() => {
  (async () => {
    const user = await getUser()
    setUser(user)
  })()
}, [])

useRef

這個 Hook 在不少時候是沒有初始值的，這樣能夠聲明返回對象中 current 屬性的類型：

const ref2 = useRef<HTMLElement>(null);

以一個按鈕場景爲例：

function TextInputWithFocusButton() {
  const inputEl = React.useRef<HTMLInputElement>(null);
  const onButtonClick = () => {
    if (inputEl && inputEl.current) {
      inputEl.current.focus();
    }
  };
  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
}

當 onButtonClick 事件觸發時，能夠確定 inputEl 也是有值的，由於組件是同級別渲染的，可是仍是依然要作冗餘的非空判斷。

有一種辦法能夠繞過去。

const ref1 = useRef<HTMLElement>(null!);

null! 這種語法是非空斷言，跟在一個值後面表示你判定它是有值的，因此在你使用 inputEl.current.focus() 的時候，TS 不會給出報錯。

可是這種語法比較危險，須要儘可能減小使用。

在絕大部分狀況下，inputEl.current?.focus() 是個更安全的選擇，除非這個值真的不可能爲空。（好比在使用以前就賦值了）

useImperativeHandle

推薦使用一個自定義的 innerRef 來代替原生的 ref，不然要用到 forwardRef 會搞的類型很複雜。

type ListProps = {
  innerRef?: React.Ref<{ scrollToTop(): void }>
}

function List(props: ListProps) {
  useImperativeHandle(props.innerRef, () => ({
    scrollToTop() { }
  }))
  return null
}

結合剛剛 useRef 的知識，使用是這樣的：

function Use() {
  const listRef = useRef<{ scrollToTop(): void }>(null!)

  useEffect(() => {
    listRef.current.scrollToTop()
  }, [])

  return (
    <List innerRef={listRef} />
  )
}

很完美，是否是？

能夠在線調試 useImperativeHandle 的例子。

也能夠查看這個useImperativeHandle 討論 Issue，裏面有不少有意思的想法，也有使用 React.forwardRef 的複雜例子。

自定義 Hook

若是你想仿照 useState 的形式，返回一個數組給用戶使用，必定要記得在適當的時候使用 as const，標記這個返回值是個常量，告訴 TS 數組裏的值不會刪除，改變順序等等……

不然，你的每一項都會被推斷成是「全部類型可能性的聯合類型」，這會影響用戶使用。

export function useLoading() {
  const [isLoading, setState] = React.useState(false);
  const load = (aPromise: Promise<any>) => {
    setState(true);
    return aPromise.finally(() => setState(false));
  };
  // ✅ 加了 as const 會推斷出 [boolean, typeof load]
  // ❌ 不然會是 (boolean | typeof load)[]
  return [isLoading, load] as const;[]
}

對了，若是你在用 React Hook 寫一個庫，別忘了把類型也導出給用戶使用。

React API

forwardRef

函數式組件默認不能夠加 ref，它不像類組件那樣有本身的實例。這個 API 通常是函數式組件用來接收父組件傳來的 ref。

因此須要標註好實例類型，也就是父組件經過 ref 能夠拿到什麼樣類型的值。

type Props = { };
export type Ref = HTMLButtonElement;
export const FancyButton = React.forwardRef<Ref, Props>((props, ref) => (
  <button ref={ref} className="MyClassName">
    {props.children}
  </button>
));

因爲這個例子裏直接把 ref 轉發給 button 了，因此直接把類型標註爲 HTMLButtonElement 便可。

父組件這樣調用，就能夠拿到正確類型：

export const App = () => {
  const ref = useRef<HTMLButtonElement>()
  return (
    <FancyButton ref={ref} />
  )
}

❤️ 謝謝支持

1. 喜歡的話別忘了分享、點贊、在看三連哦~。
2. 關注「前端從進階到入院」，獲取我分類整理的原創精選面試熱點文章，Vue、React、TS、手寫題等應有盡有，我進入字節、滴滴、百度的小夥伴們說文章對他們幫助很大，但願也能幫助到你。

本文由博客羣發一文多發等運營工具平臺 OpenWrite 發佈