ريأكت جي إس - مكون React Recompose يسبب خطأ في تايب سكريبت على الخصائص

لدي مكون حالة أساسي جدًا حيث أستخدم recompose لإضافة عدة HOC إلى مكوني (في مثالي أستخدم واحدًا فقط من أجل البساطة). لسبب ما، يعطي TypeScript خطأ بخصوص الخصائص التي تدخل إلى مكوني. كيف يمكنني التخلص من هذا الخطأ؟

إليك رمزي:

import * as React from 'react';
import { connect } from 'react-redux';
import { compose } from 'recompose';

interface IStoreState {
  readonly sessionState: {
    authUser: { email: string; }
  }
}

interface IAccountPageProps { 
  authUser: { email: string } 
}

const AccountPage = ({ authUser }: IAccountPageProps ) =>
    <div>
      <h1>Account: {authUser.email}</h1>
    </div>

const mapStateToProps = (state: IStoreState) => ({
  authUser: state.sessionState.authUser,
});

export default compose(
  connect(mapStateToProps)
)(AccountPage);

والخطأ الذي أحصل عليه هو:

Argument of type '({ authUser }: IAccountPageProps) => Element' is not assignable to parameter of type 'ComponentType<{}>'.
  Type '({ authUser }: IAccountPageProps) => Element' is not assignable to type 'StatelessComponent<{}>'.
    Types of parameters '__0' and 'props' are incompatible.
      Type '{ children?: ReactNode; }' is not assignable to type 'IAccountPageProps'.
        Property 'authUser' is missing in type '{ children?: ReactNode; }'.

إذا لم أستخدم إعادة التركيب وبدلاً من ذلك أكتب

export default connect(mapStateToProps)(AccountPage)

أنا لا أحصل على أي أخطاء.

الإجابة رقم 1

كتابة compose الحالية غير مفيدة إلى حد كبير. إذا كنت تريد استخدام compose، يجب عليك تحديد نوع props للمكونات الأصلية والنهائية يدوياً، ولا يوجد أي تحقق من أن الأنواع التي حددتها تتوافق مع قائمة مكونات المستوى الأعلى التي قمت بتمريرها:

export default compose<IAccountPageProps, {}>(
  connect(mapStateToProps)
)(AccountPage);

أوصي بعدم استخدام compose في TypeScript.

الإجابة رقم 2

يسمح لك الكتابة في التركيب بتحديد نوع المكون الناتج ونوع المكون الذي يمكن استدعاؤه عليه، لذلك سيتجنب هذا الأخطاء:

export default compose<IAccountPageProps, {}>(
  connect(mapStateToProps)
)(AccountPage);

لسوء الحظ، لا يقوم Compose بأي شيء لضمان سلامة النوع أو توافق الدوال الممررة إليه.

لذا، على سبيل المثال، هذا لن يولّد خطأ كتابة حتى لو كان من الواضح أنه غير صالح:

export default compose<IAccountPageProps, {}>(
  connect(mapStateToProps),
  () => 'compose typing allows any function'
)(AccountPage);

من الأكثر أمانًا تداخل استدعاءات HOC:

export default 
connect(mapStateToProps)(
  firstHoc(
    secondHoc(
      AccountPage
    )
  )
);