Question

我正在尝试在打字稿中实现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＆{子代？：ReactNode;}）=>> TodoModel []'无法分配给类型>'FunctionComponent'。类型'TodoModel []'缺少类型>'ReactElement'中的以下属性：类型，道具，键

我知道错误是什么以及为什么发生，我只是不知道要解决的语法。我已经考虑过归还整个道具，但这似乎很麻烦，而且不是正确的解决方法。

感谢所有帮助！

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

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

1 个答案: