Компонент с сохранением состояния с Typescript и response-redux: аргумент типа 'typeof MyClass' не может быть назначен параметру типа Component

Я пытаюсь войти в Typescript в сочетании с React и Redux.

Но сейчас я борюсь.

У меня такая ошибка:

./src/containers/Hello.tsx [tsl] ERROR in /home/marc/Development/TypeScript-React-Starter-master/src/containers/Hello.tsx(20,61) TS2345: Argument of type 'typeof Hello' is not assignable to parameter of type 'Component<{ enthusiasmLevel: number; name: string; } & { onIncrement: () => IncrementEnthusiasm; onDecrement: () => DecrementEnthusiasm; }>'. Type 'typeof Hello' is not assignable to type 'ComponentClass<{ enthusiasmLevel: number; name: string; } & { onIncrement: () => IncrementEnthusiasm; onDecrement: () => DecrementEnthusiasm; }>'. Type 'Hello' is not assignable to type 'Component<{ enthusiasmLevel: number; name: string; } & { onIncrement: () => IncrementEnthusiasm; onDecrement: () => DecrementEnthusiasm; }, ComponentState>'. Types of property 'setState' are incompatible. Type '{ (f: (prevState: {}, props: Props) => Pick<{}, K>, callback?: (() => any) | undefined): void; (state: Pick<{}, K>, callback?: (() => any) | undefined): void; }' is not assignable to type '{ (f: (prevState: ComponentState, props: { enthusiasmLevel: number; name: string; } & { onIncrement: () => IncrementEnthusiasm; onDecrement: () => DecrementEnthusiasm; }) => Pick, callback?: (() => any) | undefined): void; (state: Pick<...>, callback?: (() => any)...'. Types of parameters 'f' and 'f' are incompatible. Types of parameters 'props' and 'props' are incompatible. Type 'Props' is not assignable to type '{ enthusiasmLevel: number; name: string; } & { onIncrement: () => IncrementEnthusiasm; onDecrement: () => DecrementEnthusiasm; }'. Type 'Props' is not assignable to type '{ onIncrement: () => IncrementEnthusiasm; onDecrement: () => DecrementEnthusiasm; }'. Types of property 'onIncrement' are incompatible. Type '(() => void) | undefined' is not assignable to type '() => IncrementEnthusiasm'. Type 'undefined' is not assignable to type '() => IncrementEnthusiasm'.

Это мой компонент React:

import * as React from 'react';
import './Hello.css';

export interface Props {
  name: string;
  enthusiasmLevel: number;
  onIncrement?: () => void;
  onDecrement?: () => void;
}

class Hello extends React.Component<Props, {}> {

   render(){
     const { enthusiasmLevel, onIncrement, onDecrement } = this.props;

     if (enthusiasmLevel <= 0) {
       throw new Error('You could be a little more enthusiastic. :D');
     }

     return (
       <div className = "hello">
         <div className = "greeting">
           Hello {name + getExclamationMarks(enthusiasmLevel)}
         </div>
         <div>
           <button onClick = {onDecrement}>-</button>
           <button onClick = {onIncrement}>+</button>
         </div>
       </div>
     );
   }

}

export default Hello;

// helpers

function getExclamationMarks(numChars: number) {
  return Array(numChars + 1).join('!');
}

Это файл, в котором возникает ошибка:

import Hello from '../components/Hello';
import * as actions from '../actions/';
import { StoreState } from '../types/index';
import { connect, Dispatch } from 'react-redux';

export function mapStateToProps({ enthusiasmLevel, languageName }: StoreState) {
  return {
    enthusiasmLevel,
    name: languageName,
  };
}

export function mapDispatchToProps(dispatch: Dispatch<actions.EnthusiasmAction>) {
  return {
    onIncrement: () => dispatch(actions.incrementEnthusiasm()),
    onDecrement: () => dispatch(actions.decrementEnthusiasm()),
  };
}

export default connect(mapStateToProps, mapDispatchToProps)(Hello);

StoreState Интерфейс:

export interface StoreState {
    languageName: string;
    enthusiasmLevel: number;
}

Я не уверен, что в этом плохого. Единственный обходной путь, который сработал:

export default connect(mapStateToProps, mapDispatchToProps)(Hello as any);

что является уродливым решением в моих глазах.

Можете ли вы опубликовать свой интерфейс StoreState?

Frank 11.01.2019 19:05

@Frank Я добавил это.

M Schott 11.01.2019 21:09

Я работаю на себя. Похоже, проблема не в компоненте. (P.S. Также измените Component <Props, {}> на Component <Props>)

Valerii 11.01.2019 22:11
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
2
3
1 371
1

Ответы 1

Подсказки типа вашего интерфейса Props не совсем соответствуют интерфейсу, ожидаемому connect()(), как указано в сообщении об ошибке:

Type 'Hello' is not assignable to type 'Component<{ enthusiasmLevel: number; name: string; } & { onIncrement: () => IncrementEnthusiasm; onDecrement: () => DecrementEnthusiasm; }, ComponentState>'.

  1. Стойки onIncrement и onDecrement не должны быть дополнительными и
  2. Реквизиты onIncrement и onDecrement возвращают не void, а IncrementEnthusiam и DecrementEnthusiam соответственно.

Ваш интерфейс Props должен выглядеть так:

export interface Props {
  name: string;
  enthusiasmLevel: number;
  onIncrement: () => IncrementEnthusiasm;
  onDecrement: () => DecrementEnthusiasm;
}

Другие вопросы по теме