React HOC Props 的 Typescript 接口答案

【问题标题】：Typescript interface for React HOC PropsReact HOC Props 的 Typescript 接口
【发布时间】：2019-04-28 07:22:08
【问题描述】：

给定以下向组件添加排序状态的 React HOC：


import React, {Component, ComponentClass, ComponentType} from 'react'

interface WithSortState {
    sortOrder: string
}

interface WithSortInjectedProps {
    sortOrder: string
    onSort: (event: React.ChangeEvent<HTMLSelectElement>) => void
}

const withSort = () => (WrappedComponent: ComponentType<WithSortInjectedProps>): ComponentClass<WithSortInjectedProps> => {
    class WithSort extends Component<WithSortInjectedProps, WithSortState> {

        state = {
            sortOrder: 'created_at_desc'
        };

        handleSort = (sortEvent: React.ChangeEvent<HTMLSelectElement>) => {
            this.setState({
                sortOrder: sortEvent.target.value
            })
        };

        render() {
 `           return (
                <WrappedComponent
                    sortOrder={this.state.sortOrder}
                    onSort={this.handleSort}
                    {...this.props}
                />
            )
        }
    }

    return WithSort
};

export default withSort

当我手动将状态属性 sortOrder 设置为“123”时，编译器会抱怨 sortOrder 是一个字符串。但是，如果我对WrappedComponent 上的sortOrder 执行相同操作，编译器不会抛出任何错误。例如，sortOrder={123} 编译，即使接口指示该属性应该是字符串。

为什么会这样？我在 Typescript 方面做错了吗？

【问题讨论】：

标签： reactjs typescript

【解决方案1】：

如果您尝试在 WrappedComponent 上使用 sortOrder={123} 应该会失败，因为您已经传播了道具 {...this.props} 并且道具不能是 Partial 意味着打字稿很聪明足以让sortOrder={123} 被sortOrder={this.props.sortOrder} 覆盖

希望这会有所帮助。 TL;DR 移除 {...this.props} ，所有内容都会显示出来

【讨论】：

希望对您有所帮助。
谢谢，香农。删除道具传播时，它按预期工作。但是，我不明白为什么。 this.props 不包含键名 sortOrder（注意它来自状态。）所以在我看来，我已经指出“WrappedComponent”接口应该接受一个字符串，但它也接受一个数字。