Константный тип Typescript 3.2.2 не соответствует типу вывода
Я пытаюсь реализовать React-Redux Todo в машинописном тексте. Ссылка на учебник по javascript: https://redux.js.org/basics/использование-с-реакцией.
Теперь у меня есть константа getVisibleTodos интерфейса getVisibilityProps. Однако я хочу вернуть TodoModel[], так как это единственные, которые мне нужны.
interface getVisibilityProps {
todos: TodoModel[],
filter: vfilter
}
const getVisibleTodos: FC<getVisibilityProps> = props => {
switch (props.filter) {
case VisibilityFilter.SHOW_ALL:
return props.todos;
case VisibilityFilter.SHOW_ACTIVE:
return props.todos.filter(t => !t.completed);
case VisibilityFilter.SHOW_COMPLETED:
return props.todos.filter(t => t.completed);
default:
throw new Error('Unknown filter: ' + props.filter)
}
};
Я пробовал играть с типами, среди них:
type visibility1 = TodoModel[] | vfilter
type visibility2 = getVisibilityProps | TodoModel[]
type visibility3 = TodoModel[] & vfilter
type visibility4 = getVisibilityProps & TodoModel[]
и включить их в FC<> но безрезультатно.
Сообщение об ошибке:
TS2322: Type '(props: getVisibilityProps & { children?: ReactNode; }) => >TodoModel[]' is not assignable to type >'FunctionComponent'. Type 'TodoModel[]' is missing the following properties from type >'ReactElement': type, props, key
Я понимаю, что это за ошибка и почему она возникает, я просто не знаю синтаксиса, чтобы исправить это. Я думал о возврате всей опоры, однако это кажется громоздким и неправильным способом.
Я ценю всю помощь!
Спасибо за ответ. Я пробовал это, и я получаю следующую ошибку:> TS2740: тип «(реквизиты: getVisibilityProps) => TodoModel []» отсутствуют следующие свойства из типа «TodoModel []»: pop, push, concat, join , и еще 24.
Извините, мой плохой... попробуйте: const getVisibleTodos = (props:getVisibilityProps):TodoModel[] => ...
Спасибо, на этот раз без ошибок! Кажется, что часть FC<> была причиной ошибки. Вы почему и как использовать FC, или когда? Может быть очевидно, но я новичок в машинописи и реакции-редукции.
см. мой ответ - используйте FunctionComponent<> везде, где вы создаете функциональный компонент :-D В этом случае это будет, например. визуализированный список элементов todo (с одним корневым компонентом)
Ответы 1
Итак, есть пара вещей, которые нужно исправить... во-первых, это не FunctionComponent, потому что он возвращает список задач, а не один узел jsx.
Во-вторых, похоже, что синтаксис вашей функции фильтрации нуждается в настройке, указав тип возвращаемого значения как TodoModel[]:
interface getVisibilityProps {
todos: TodoModel[],
filter: vfilter
}
const getVisibleTodos = (props: getVisibilityProps):TodoModel[] => {
switch (props.filter) {
case VisibilityFilter.SHOW_ALL:
return props.todos;
case VisibilityFilter.SHOW_ACTIVE:
return props.todos.filter(t => !t.completed);
case VisibilityFilter.SHOW_COMPLETED:
return props.todos.filter(t => t.completed);
default:
throw new Error('Unknown filter: ' + props.filter)
}
};
О, теперь я вижу. Путаница действительно была связана с FC, и теперь она кажется очевидной. Большое спасибо!
Похоже, вам нужно обновить свою
getVisibleTodosподпись:const getVisibleTodos: TodoModel = props:getVisibilityProps