打字稿編譯錯誤：類型“ {}”不可分配給類型“ T”

Question

我正在使用帶有Typescript的React來創建一個高階組件（HOC），並且無法理解Typescript編譯器返回的錯誤。 我對我的問題有解決方案，但不明白為什么會起作用。

對於這里發生的一切，我將不勝感激。

我的錯誤是：類型“ {}”不可分配給類型“ T”

我已經閱讀了很多有關類型解析問題的文章，並且在大多數情況下，Typescript似乎在做自己的工作。 我的感覺就是這里，但是，我不明白自己在做什么錯。 我嘗試弄亂類型簽名，在這些情況下，它要么不能解決此問題，要么將錯誤推送到引用代碼。

代碼生成錯誤

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

const withClass = <T extends object>(WrappedComponent: ComponentType<T>, className: string):
    React.FunctionComponent<T> =>
        (props: any) => (
            <div className={className}>
                <WrappedComponent />
            </div>
        );

export default withClass;

帶修復的代碼（注意道具作為包裝組件的參數傳播）

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

const withClass = <T extends object>(WrappedComponent: ComponentType<T>, className: string):
    React.FunctionComponent<T> =>
        (props: any) => (
            <div className={className}>
                <WrappedComponent {...props} />
            </div>
        );

export default withClass;

我希望第一段代碼能夠正確編譯，但事實並非如此。 為什么？

Answer 1

就我所知，因為這是一個功能組件，所以您應該為道具煩惱。 我認為，如果您將使用類組件，則該問題將消失，因為默認情況下會在構造函數中調用類super（props）的類組件中。 我有同樣的錯誤，但是使用樣式props（CSSModules），實際上，我選擇了特定的props，並且沒有在組件中傳遞其余的props（ ... rest ）。 因此，我認為因為您正在擴展TypeScript接口（我不確定），所以您沒有傳遞所需的道具。 傳播之后，您正在傳遞所需的道具。 注意： 傳播屬性

Answer 2

也許我跳得太早了，因為我的錯誤突然變得很明顯！

因此，HOC的整個思想是能夠通過合成來擴展組件的行為。 如果您是來自OO的背景，則這是規范的裝飾器模式，但通過功能組合而不是對象進行配置。

上面第一個示例的問題是Typescript抱怨我已將包裝的組件標記為具有T prop，但沒有使用任何 prop實例化該組件！

獲勝者將獲得...打字稿！

Typescript試圖引導我走上正確的道路，但是，當然，我不想聽，而是試圖將責任歸咎於Typescript。 雖然，我必須承認，此時Typescript規范似乎正在演變為雜技類型。 HOC當然在這方面無濟於事。

而對於那些不幸的人，也可能碰到了這個心理絆腳石。 這是最終的解決方案，帶有屏幕截圖，可以更好地理解我上面要說的內容。

上面的第二個解決方案有效，但是在道具上使用T會更合適。 在這里，我正在使用控制台記錄傳遞給包裝組件的道具。

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

const withClass = <T extends object>(WrappedComponent: ComponentType<T>, className: string):
    React.FunctionComponent<T> =>
        (props: T) => {
            console.log(props);
            return (
                <div className={className}>
                    <WrappedComponent {...props} />
                </div>
            );
        }

export default withClass;