无状态React组件的prop类型的Typescript错误

Question

在我的项目中，有人编写了以下代码行，这导致Typescript错误：

export const MaskedField = asField(({ fieldState, fieldApi, ...props }) => 
    {
        const {value} = fieldState;
        const {setValue, setTouched} = fieldApi;
        const {
            forwardedRef,
            guide,
            icon,
            initialValue,
            keepCharPositions,
            maskRegEx,
            onBlur,
            onChange,
            placeholder,
            placeholderChar,
            ...rest
        } = props;
    }
}

首先，Lint给我一个尾随的逗号错误，但是当我在props之后放置一个时，我又遇到了另一个Typescript错误，即散播运算符不能有尾随的逗号。

最重要的是，我在const {...} = props变量的字段上遇到错误，告诉我Property '...' does not exist on type '{ children?: ReactNode; }'. Property '...' does not exist on type '{ children?: ReactNode; }'.

关于如何快速解决此问题的任何想法？

Answer 1

如果要使用TypeScript，则需要提供类型信息，以便TS可以进行类型检查。

目前您还没有提供有关道具类型的任何信息，因此它只知道它具有可选的子道具。 这就是为什么它说： Property '...' does not exist on type '{ children?: ReactNode; }'. Property '...' does not exist on type '{ children?: ReactNode; }'.

这是来自Piotrek Witek出色的React Redux TypeScript Guide网站的示例：

import * as React from 'react';

export interface SFCCounterProps {
  label: string;
  count: number;
  onIncrement: () => any;
}

export const SFCCounter: React.SFC<SFCCounterProps> = (props) => {
  const { label, count, onIncrement } = props;

  const handleIncrement = () => { onIncrement(); };

  return (
    <div>
      <span>{label}: {count} </span>
      <button type="button" onClick={handleIncrement}>
        {`Increment`}
      </button>
    </div>
  );
};