Ошибка машинописного текста на типах пропеллера React-компонента без состояния - PullRequest
Новая
       8

Ошибка машинописного текста на типах пропеллера React-компонента без состояния

0 голосов
/ 04 января 2019

В моем проекте кто-то написал следующие строки кода, которые приводят к ошибке 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; }'.

Есть идеи, как быстро это исправить?

1 Ответ

0 голосов
/ 04 января 2019

Если вы хотите использовать TypeScript, вам нужно предоставить информацию о типе, чтобы TS мог выполнить проверку типа.

На данный момент вы не предоставили никакой информации о типе реквизита, поэтому он знает толькоу этого есть дополнительная опора детей.Вот почему он говорит: Property '...' does not exist on type '{ children?: ReactNode; }'.

Вот пример с превосходного React Redux Руководство по написанию шрифтов от Piotrek Witek: 

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>
  );
};
...