关于javascript:🔖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} />
  )
}

❤️ 谢谢反对

喜爱的话别忘了分享、点赞、在看三连哦~。
关注「前端从进阶到入院」，获取我分类整理的原创精选面试热点文章，Vue、React、TS、手写题等包罗万象，我进入字节、滴滴、百度的小伙伴们说文章对他们帮忙很大，心愿也能帮忙到你。

本文由博客群发一文多发等经营工具平台 OpenWrite 公布

关于javascript:🔖TypeScript-备忘录如何在-React-中完美运用

前言

前置根底

工具

组件 Props

根底类型

对象类型

函数类型

React 相干类型

函数式组件

Hooks

useState

useReducer

useEffect

useRef

useImperativeHandle

自定义 Hook

React API

forwardRef

❤️ 谢谢反对

评论

发表回复取消回复

更多文章

DDN HPC 存储硬件架构设计深度分析

探秘IO500：从Lustre并行文件系统出发，开启HPC存储性能新征程

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

关于javascript:🔖TypeScript-备忘录如何在-React-中完美运用

前言

前置根底

工具

组件 Props

根底类型

对象类型

函数类型

React 相干类型

函数式组件

Hooks

useState

useReducer

useEffect

useRef

useImperativeHandle

自定义 Hook

React API

forwardRef

❤️ 谢谢反对

评论

发表回复 取消回复

更多文章

DDN HPC 存储硬件架构设计深度分析

探秘IO500：从Lustre并行文件系统出发，开启HPC存储性能新征程

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

发表回复取消回复