Typescript 3.2.2 const 类型与输出类型不匹配答案

【问题标题】：Typescript 3.2.2 const type doesn´t match output typeTypescript 3.2.2 const 类型与输出类型不匹配
【发布时间】：2019-10-19 01:47:00
【问题描述】：

我正在尝试在 typescript 中实现 react-redux Todo。 javascript教程链接：https://redux.js.org/basics/usage-with-react。

我现在有一个接口 getVisibilityProps 的 const getVisibleTodos。但是我希望返回一个 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：类型 '(props: getVisibilityProps & { children?: ReactNode; }) => >TodoModel[]' 不可分配给类型 >'FunctionComponent'。类型“TodoModel[]”缺少类型>“ReactElement”中的以下属性：类型、道具、键

我了解错误是什么以及它发生的原因，我只是不知道修复它的语法。我考虑过归还整个道具，但这似乎很麻烦，而且不是正确的做法。

感谢所有帮助！

【问题讨论】：

看来你需要更新你的getVisibleTodos签名：const getVisibleTodos: TodoModel = props:getVisibilityProps
感谢您的回复。我试过了，我得到的错误如下：> TS2740：类型'（props：getVisibilityProps）=> TodoModel []'缺少类型'TodoModel []'中的以下属性：pop，push，concat，join ，还有 24 个。
对不起，我的错...试试：const getVisibleTodos = (props:getVisibilityProps):TodoModel[] => ...
谢谢，这次没有错误！似乎 FC 部分是错误的原因。您为什么以及如何使用 FC，或者何时使用？可能很明显，但我是 typescript 和 react-redux 的新手。
查看我的答案 - 在您创建功能组件的任何地方使用 FunctionComponent<> :-D 在这种情况下，它可以是例如渲染的待办事项列表（带有单个根组件）

标签： reactjs typescript react-redux

【解决方案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，现在看起来很明显。非常感谢！