时间戳

首页 > 解决方案 > 返回一个对象数组和函数打字稿

reactjs - 返回一个对象数组和函数打字稿

问题描述

首先，我面临的问题：

我用香草 JS 自制的 React Hook 工作了几个月，代码如下：

import { useState } from 'react';

const useForm = (initialValues) => {
    const [state, setState] = useState(initialValues);

    return [
        state,
        (e) => {
            if (typeof e.target !== 'undefined') {
                setState({
                    ...state,
                    [e.target.name]: e.target.value,
                });
            } else {
                setState({ ...e });
            }
        },
    ];
};

export default useForm;

现在，我决定使用 Typescript。但是无法转换该钩子。除了返回接口/类型之外，我一切都准备好了。相同的钩子 Typescript 版本（返回类型错误）：

import { useState, FormEvent } from 'react';

interface ReturnProps {
  [index: number]: Record<string, unknown>;
  [index: number]: (e: FormEvent<HTMLInputElement>) => void;
}

const useForm = (initialValues: Record<string, unknown>): ReturnProps => {
  const [state, setState] = useState(initialValues);

  return [
    state,
    (e: FormEvent<HTMLInputElement>): void => {
      if (typeof e.currentTarget !== 'undefined') {
        setState({
          ...state,
          [e.currentTarget.name]: e.currentTarget.value,
        });
      } else {
        setState({ ...e });
      }
    },
  ];
};

export default useForm;

问题是：在这种情况下如何返回正确的类型？

标签： reactjstypescriptreact-hooks

解决方案

您只需要修复ReturnProps类型：

interface ReturnProps {
  [index: number]: Record<string, unknown>;
  [index: number]: (e: FormEvent<HTMLInputElement>) => void;
}

你不能有两个这样的重复索引签名。

由于返回数组中的第一个元素将是记录，第二个元素将是回调，因此请改用元组：

type ReturnProps = [
    Record<string, unknown>,
    (e: FormEvent<HTMLInputElement>) => void
]

你甚至可以ReturnProps完全省略，TS 仍然能够推断出正确的类型：

const useForm = (initialValues: Record<string, unknown>) => {

（让 TS 在可能的情况下自动推断类型可以真正减少可能分散脚本主要逻辑的类型噪音。）

推荐阅读