React HOC道具的Typescript接口

Question

給定以下將組件的排序狀態添加到組件的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進行相同的WrappedComponent則編譯器不會引發任何錯誤。 例如，即使接口指示此屬性應為字符串， sortOrder={123}編譯sortOrder={123} 。

為什么會這樣呢？ 我在打字稿方面做錯了嗎？

Answer 1

如果您嘗試在WrappedComponent上使用sortOrder = {123}，它應該會失敗，因為它不是它的原因，因為您散布了道具{...this.props} ，而道具不能是部分含義的打字稿足夠聰明，以至於sortOrder={123}只會被sortOrder={this.props.sortOrder}覆蓋

希望這可以幫助。 TL; DR刪除{... this.props}，所有內容都會顯示出來