关于程序员:TSReactHook类型化

作家 村上春树 在《当我谈跑步时我谈些什么》里说道：“Pain is inevitable,but suffering is optional” 即 苦楚不可避免，但咱们能够抉择不受苦。这个选择权，来自不反抗过来，不担心将来。

大家好，我是 柒八九。

在前几天，咱们开拓了 –TypeScript 实战系列 ，次要讲TS 在React中的利用实战。

大家如果对 React 理解 / 相熟的话，想必都听过 Hook。在当下的React 开发中，函数组件大行其道。而 Hook 就是为了给 函数组件增加外部状态还有解决副作用 的。换句话说，Hook曾经在当初的 React 的开发中，变得不可代替。

而，明天咱们就简略的聊聊，如何利用 TS 对Hook进行类型化解决。有一点须要特地指出，对 hook 进行类型化解决，须要利用 泛型 的语法，如果对泛型没有一个大体的理解，还是须要异步一些惯例材料中，先进行简略的学习。

• TS_React: 应用泛型来改善类型
• typescriptlang_generics

好了，天不早了。咱们开始 粗发。

你能所学到的知识点

React各种 hook 的类型化解决，总有一款，让你骑虎难下

文章概要

1. 依赖类型推断
2. 类型化 useState
3. 类型化 useReducer
4. 类型化 useRef
5. 类型化 forwardRef
6. 类型化 useEffect 和 useLayoutEffect
7. 类型化 useMemo 和 useCallback
8. 类型化 useContext
9. 类型化自定义 hook

1. 依赖类型推断

在绝大部分，TS都能够依据 hook 中的值来推断它们的类型：也就是咱们常说的 类型推断

何为类型推断，简略来说：类型推断 就是 基于赋值表达式推断类型的能⼒ 。ts 采纳将类型标注申明放在变量之后（即 类型后置 ）的形式来对变量的类型进行标注。而使⽤ 类型标注后置 的益处就是 编译器 能够通过代码所在的 高低⽂推导其对应的类型，⽆须再申明变量类型。

像

• 具备 初始化值的变量
• 有 默认值的函数参数
• 函数返回的类型

都能够依据 高低⽂推断 进去。

例如，上面的代码能够在 ts 环境中失常运行，且可能通过类型推断推导出 name 的类型为 string 类型。

const [name, setName] = useState('前端柒八九');

何时不能依赖类型推断

上面的两种情境下，类型推断有点力不从心

• ts推断出的类型 过于宽松
• 类型推断谬误

推断出的类型过于宽松

咱们之前的例子 – 有一个字符串类型的 name。然而咱们假如这个name 只能有两个 预约的值 中的一个。

在这种状况下，咱们会心愿 name 有一个十分具体的类型，例如这个类型。

type Name = '前端柒八九' | '前端工程师' ;

这种类型同时应用 联结类型 和字面类型。

在这种状况下，推断的类型 过于宽松 （是string，而不是咱们想要的 2 个字符串的 特定子集），这种状况下就必须本人指定类型。

const [name, setName] = useState<Name>('前端柒八九');

类型推断谬误

有时，推断的类型是谬误的（或者 限制性太强 不是你想要的类型）。这种状况常常产生在 React 的useState 默认值 中。比方说，name 的初始值是null。

const [name, setName] = useState(null);

在这种状况下，TypeScript 会推断出 name 是null 类型 的（这意味着它 总是 null）。这显然是谬误的：咱们当前会想把 name 设置成一个字符串。

此时你必须通知 TypeScript，它能够是别的类型。

const [name, setName] = useState<string | null>(null);

通过这样解决后，TypeScript 会正确理解 name 能够是 null 也能够是string。

这里要提到的一件事是，当类型推断不起作用时，应该依附泛型参数而不是类型断言。

const [name, setName] = useState<Name>('前端柒八九'); 举荐应用

const [name, setName] = useState('前端柒八九' as Name); 不举荐应用

2. 类型化 useState

在文章结尾，咱们曾经通过类型推断讲过了，如何解决 useState 的各种状况。这里就不在赘述了。

const [name, setName] = useState<string | null>(null);

3. 类型化 useReducer

useReducer 的类型比 useState 要简单一些。如果看过源码的同学，可能有印象，其实 useState 就是 useReducer 的简化版。

针对 useReducer 有两样货色要类型化解决：state和action。

这里有一个 useReducer 的简略例子。针对 input 做简略的数据收集解决。

import {useReducer} from 'react';

const initialValue = {
  username: '',
  email: '',
};

const reducer = (state, action) => {switch (action.type) {
    case 'username':
      return {...state, username: action.payload};
    case 'email':
      return {...state, email: action.payload};
    case 'reset':
      return initialValue;
    default:
      throw new Error(` 未定义的 action: ${action.type}`);
  }
};

const Form = () => {const [state, dispatch] = useReducer(reducer, initialValue);
  return (
    <div>
      <input
        type="text"
        value={state.username}
        onChange={(event) =>
          dispatch({type: 'username', payload: event.target.value})
        }
      />
      <input
        type="email"
        value={state.email}
        onChange={(event) =>
          dispatch({type: 'email', payload: event.target.value})
        }
      />
    </div>
  );
};

export default Form;

类型化 reducer 的 state

咱们有两个抉择来类型化reducer-state。

• 应用初始值（如果有的话）和 typeof 操作符
• 应用 类型别名

应用 typeof 操作符

const initialValue = {
  username: '',
  email: '',
};

+ const reducer = (state: typeof initialValue, action) => {switch (action.type) {
      case 'username':
        return {...state,  username: action.payload};
      case 'email':
        return {...state,  email: action.payload};
      case 'reset':
        return initialValue;
      default:
        throw new Error(` 未定义的 action: ${action.type}`);
    }
};

应用类型别名

+type State = {
+  username: string;
+  email: string;
+};

const initialValue = {
  username: '',
  email: '',
};

+ const reducer = (state: State, action) => {switch (action.type) {
      case 'username':
        return {...state, username: action.payload};
      case 'email':
        return {...state, email: action.payload};
      case 'reset':
        return initialValue;
      default:
        throw new Error(` 未定义的 action: ${action.type}`);
    }
};

类型化 reducer 的 action

reducer-action的类型比 reducer-state 要难一点，因为它的构造会依据具体的 action 而扭转。

例如，对于 username-action，咱们可能冀望有以下类型。

type UsernameAction = {
  type: 'username';
  payload: string;
};

但对于 reset-action，咱们不须要 payload 字段。

type ResetAction = {type: 'reset';};

咱们能够借助 联结类型 区别对待不同的action。

const initialValue = {
  username: "",
  email: ""
};

+type Action =
+  | {type: "username"; payload: string}
+  | {type: "email"; payload: string}
+  | {type: "reset"};

+ const reducer = (state: typeof initialValue, action: Action) => {switch (action.type) {
      case "username":
        return {...state, username: action.payload};
      case "email":
        return {...state, email: action.payload};
      case "reset":
        return initialValue;
      default:
        throw new Error(` 未定义的 action: ${action.type}`);
    }
};

Action 类型 示意的是，它能够承受联结类型中蕴含的 三种类型中的任何一种 。因而，如果 TypeScript 看到 action.type 是username，它就会主动晓得它应该是第一种状况，并且 payload 应该是一个string。

通过对 state/action 类型化后，useReducer可能从 reducer 函数的 type 中推断出它须要的所有。

上面是整体的代码。(省略了，jsx局部)

import {useReducer} from 'react';

const initialValue = {
  username: '',
  email: '',
};

+type Action =
+  | {type: 'username'; payload: string}
+  | {type: 'email'; payload: string}
+  | {type: 'reset'};

+const reducer = (state: typeof initialValue, action: Action) => {switch (action.type) {
    case 'username':
      return {...state, username: action.payload};
    case 'email':
      return {...state, email: action.payload};
    case 'reset':
      return initialValue;
    default:
      throw new Error(`Unknown action type: ${action.type}`);
  }
};

const Form = () => {const [state, dispatch] = useReducer(reducer, initialValue);

  return (... 省略了..);
};

export default Form;

4. 类型化 useRef

useRef 有两个主要用途

• 保留一个 自定义的可变值（它的值变更不会触发更新）。
• 放弃对一个DOM 对象的援用

类型化可变值

它基本上与 useState 雷同。想让 useRef 保留一个自定义的值，你须要通知它这个类型。

function Timer() {+  const intervalRef = useRef<number | undefined>();

  useEffect(() => {const id = setInterval(() => {// ...});
    intervalRef.current = id;
    return () => {clearInterval(intervalRef.current);
    };
  });

  // ...
}

类型化 DOM 节点

在 DOM 节点上应用 useRef 的一个经典用例是解决 input 元素的focus。

mport {useRef, useEffect} from 'react';

const AutoFocusInput = () => {+  const inputRef = useRef(null);

  useEffect(() => {+    inputRef.current.focus();
  }, []);

+  return <input ref={inputRef} type="text" value="前端柒八九" />;
};

export default AutoFocusInput;

TypeScript 有 内置的 DOM 元素类型。这些类型的构造总是雷同的：

如果 name 是你正在应用的HTML 标签的名称，相应的类型将是HTMLNameElement。

这里有几个特例

• <a>标签的类型为HTMLAnchorElement
• <h1>标签的类型为HTMLHeadingElement

对于<input>，该类型的名称将是HTMLInputElement。

mport {useRef, useEffect} from 'react';

const AutoFocusInput = () => {+  const inputRef = useRef<HTMLInputElement>(null);

  useEffect(() => {+    inputRef.current?.focus();
  }, []);

  return <input ref={inputRef} type="text" value="前端柒八九" />;
};

export default AutoFocusInput;

留神 ：在inputRef.current?.focus() 上加了一个 ?。这是因为对于 TypeScript，inputRef.current 可能是空的。在这种状况下，咱们晓得它不会是空的，因为它是在 useEffect 第一次运行之前由 React 填充的。

5. 类型化 forwardRef

有时想把 ref 转发给子组件。要做到这一点，在 React 中咱们必须用 forwardRef 来 包装组件。

import {ChangeEvent} from 'react';

type Props = {
  value: string,
  handleChange: (event: ChangeEvent<HTMLInputElement>) => void,
};

const TextInput = ({value, handleChange}: Props) => {return <input type="text" value={value} onChange={handleChange} />;
};

例如，存在一个组件 TextInput 而咱们想在父组件的 调用处 ，通过ref 来管制子组件input。

此时，就须要用 forwardRef 来解决。

import {forwardRef, ChangeEvent} from 'react';

type Props = {
  value: string;
  handleChange: (event: ChangeEvent<HTMLInputElement>) => void;
};

+const TextInput = forwardRef<HTMLInputElement, Props>(+  ({ value, handleChange}, ref) => {
    return (+      <input ref={ref} type="text" value={value} onChange={handleChange} />
    );
  }
);

此语法只须要向 forwardRef 提供它应该期待的HTMLElement（在这种状况下是HTMLInputElement）。

有一点，须要指出 : 组件参数ref 和props的程序与泛型的 <HTMLInputElement, Props> 不一样。

6. 类型化 useEffect 和 useLayoutEffect

你不用给他们任何类型

惟一须要留神的是 隐式返回 。useEffect 外面的回调应该是什么都不返回，或者是一个会清理任何副作用的 Destructor 函数（析构函数，这个词借用了 C ++ 中类的说法）

7. 类型化 useMemo 和 useCallback

你不用给他们任何类型

8. 类型化 useContext

为 context 提供类型是非常容易的。首先，为 context 的值 创立一个类型，而后把它作为一个 泛型 提供给 createContext 函数。

import React, {createContext, useEffect, useState, ReactNode} from 'react';

+type User = {
+  name: string;
+  email: string;
+  freeTrial: boolean;
+};

+type AuthValue = {
+  user: User | null;
+  signOut: () => void;
+};

+const AuthContext = createContext<AuthValue | undefined>(undefined);

type Props = {children: ReactNode;};

const AuthContextProvider = ({children}: Props) => {const [user, setUser] = useState(null);

  const signOut = () => {setUser(null);
  };

  useEffect(() => {// 副作用解决}, []);

  return (+    <AuthContext.Provider value={{ user, signOut}}>
      {children}
+    </AuthContext.Provider>
  );
};

export default AuthContextProvider;

一旦你向 createContext 提供了泛型，残余的事，都由 ts 为你代劳。

上述实现的一个问题是，就 TypeScript 而言，context的值能够是未定义的。也就是在咱们应用 context 的值的时候，可能取不到。此时，ts可能会拦截代码的编译。

如何解决 context 的值可能是未定义的状况呢。咱们针对 context 的获取能够应用一个 自定义的hook。

export const useAuthContext = () => {const context = useContext(AuthContext);

  if (context === undefined) {throw new Error('useAuthContext 必须在 AuthContext 上下文中应用');
  }

  return context;
};

通过 类型爱护 ，使得咱们在应用context 的时候，总是有值的。

9. 类型化自定义 hook

类型化自定义 hook 基本上和类型化一般函数一样

针对如何类型化一般函数，在一些教程中很多，一搜一大把。这里也不过多形容。

咱们来看一个比拟有意思的例子。有一个自定义hook, 它想要返回一个元祖。

const useCustomHook = () => {return ['abc', 123];
};

而 TypeScipt 将扩充 useCustomHook 的返回类型为(number | string)[](一个能够蕴含数字或字符串的 数组)。显然，这不是你想要的，你想要的是第一个参数总是一个字符串，第二个例子总是一个数字。

所以，这种状况下，咱们能够利用 泛型 对返回类型做一个限度解决。

const useCustomHook = (): [string, number] => {return ['abc', 123];
};

后记

分享是一种态度。

参考资料：

• React_Ts_类型化 hook
• 重写 TS
• TS 官网

全文完，既然看到这里了，如果感觉不错，顺手点个赞和“在看”吧。