Definitelytyped: مشكلة في الاتصال () في @ أنواع / رد فعل إعادة المقدمة في 4.4.41

أنا أتلقى هذا الخطأ أيضًا. يبدو الأمر كما لو أن أحد عناصر الكتابة تم تبديله عن طريق الخطأ TOwnProps و TMergedProps / TStateProps ، لكني ألقيت نظرة خاطفة فقط على index.d.ts .

أي تعديل حدث في هذه القضية؟ أعتقد أنه يمكن أن يكون أداة عرض للمطورين الجدد الذين يأتون إلى redux + مطبوعة ، شكرًا لك على العمل الرائع.

brauliodiez لقد دمجت إصلاح blakeembrey # 16969. يجب أن يكون متاحًا في غضون ساعة أو نحو ذلك. اسمحوا لي أن أعرف إذا كان ذلك يساعد.

أعتقد أننا ما زلنا نرى هذه المشكلة حتى مع الإصلاحات من https://github.com/DefinitelyTyped/DefinitelyTyped/pull/16969. إليك مكونًا وهميًا قمت بإنشائه لمحاولة عزل المشكلة:

import * as React from "react"
import { connect, MapStateToProps, MapDispatchToPropsFunction } from "react-redux"


interface RootState {
  globalA: string
  globalB: number
}

interface DumbComponentProps {
  a: string
  b: number
  c?: number
}

const DumbComponent = (props: DumbComponentProps): JSX.Element => {
  return (
    <div>Something: {props.a} {props.b} {props.c}</div>
  )
}

type ConnectedStateProps = Pick<DumbComponentProps, "a" | "b">
type ConnectedOwnProps = Pick<DumbComponentProps, "c">

const mapStateToProps: MapStateToProps<ConnectedStateProps, ConnectedOwnProps> = (
    state: RootState): ConnectedStateProps => {
  return {
    a: state.globalA,
    b: state.globalB
  }
}

const SmartComponent = connect(
  mapStateToProps
)(DumbComponent)

export default SmartComponent

ثم أستخدم SmartComponent في مكان ما وأمر في c (لاحظ أنه من المفترض أن يأتي a & b من الدولة).

...
return (
  <SmartComponent c{2} />
)

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

error TS2322: Type '{ c: 2; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<DumbComponentProps, ComponentState>> & R...'.
  Type '{ c: 2; }' is not assignable to type 'Readonly<DumbComponentProps>'.
    Property 'a' is missing in type '{ c: 2; }'.

عند فحص الأنواع في VS Code ، لاحظت أنه يلتقط النوع الخطأ لـ SmartComponent. يعتقد أنه React.ComponentClass<DumbComponentProps> ... لكن يجب أن يكون React.ComponentClass<Pick<DumbComponentProps, "c">> (على سبيل المثال ، يجب أن يقبل OwnProps فقط. هذا منطقي من الأنواع ، حيث ComponentDecorator هي وظيفة تقوم بإرجاع ComponentClass<T> (حيث T extends TOwnProps ) ... لسوء الحظ لا أعرف لماذا لم يتم التعيين بشكل صحيح.

هل أفعل شيئًا خاطئًا بشكل واضح هنا؟ هل هناك طريقة لجعل المترجم يظهر لي خطوة بخطوة ما يستنتج؟

يبدو أن mapDistpachToProps ليس اختياريًا الآن. هل هو جيد أم أنه حشرة؟

تحديث لتعليقي أعلاه ، بعد البحث قليلاً - لقد قمت بإنشاء حالة اختبار تفشل حاليًا (لكنني أعتقد أنه لا ينبغي ذلك) وإصلاح الكتابة التي تتعامل مع حالتي ، ولكن لا تتعامل مع الحالة التي يجب أن يخمن ما هي OwnProps (على سبيل المثال connect()(DumbComponent) ). مجموعة التغييرات الخاصة بي هنا:
https://github.com/DefinitelyTyped/DefinitelyTyped/compare/master...ritwik : رد فعل- redux / fix-ownprop-inference
أرغب في المساعدة في حل هذا ولكني أضرب حدود معرفتي باستخدام الكتابة المطبوعة. إذا كان لدى أي شخص أفكار حول حالة الاختبار أو الاقتراحات الخاصة بي ، فأنا أحب مناقشة هذه الأفكار.

ما عليك سوى إغلاق الحلقة هنا - https://github.com/DefinitelyTyped/DefinitelyTyped/pull/17196 يبدو أنه يصلح هذا لقاعدة التعليمات البرمجية الخاصة بنا.

هل تم حل هذا؟ أتلقى هذه المشكلة حاليًا في ^ 5.0.8 ( IntrinsicAttributes & IntrinsicClassAttributes<Component<Pick ... ). الاختلاف الوحيد هو أنني أستخدم types بدلاً من interfaces .

أي واحد؟ هذا هو عرض حقيقي بالنسبة لي للأسف ...

proProbe هل يمكنك تقديم إصدارات @types/react-redux ، @types/react ، و redux ، ونموذج يعيد إنتاج الخطأ؟
مؤلفو حزمة CC أيضًا : tkqubothasnerkenzierocks @ clayne11tansongyangnicholasboll

متأسف على الرد المتأخر! كنت أعمل مع عينة لإعادة إنتاجها. ثم أدركت فجأة أن هذا قد تم إصلاحه في @ أنواع / رد فعل إعادة الإرسال: "^ 5.0.8". شكرا على كل حال!

لا يزال الحصول عليه مع "^ 5.0.10" :(

"@types/react": "^15.6.4",
"redux": "3.7.2",
"@types/react-redux": "^5.0.10"

يمكنني مشاركة مقتطف رمز مع مؤلف الحزمة ولكن للأسف ليس علنًا.

أدى الرجوع إلى الإصدار 4.4.40 على النحو المقترح أعلاه إلى إزالة الخطأ على الفور.

لقد تمكنت من حل هذا في قاعدة التعليمات البرمجية الخاصة بي عن طريق تحديد معلمات النوع ، قم بالاتصال بنوع القيمة المرجعة لـ mapStateToProps وما أردت أن تكون عليه العروض الخاصة. تم إخراجها من السياق إذا كنت أرغب في الاتصال بقائمة المنتجات الخاصة بي مع قائمة بمعرف المنتج مثل:

<ProductList productIDs={productIDs} />

ولديك mapStateToProps لترجمة تلك المعرفات إلى منتجات لتظهر في القائمة مثل:

const mapStateToProps = (state: RootState, ownProps: {productIDs: List<UUID>}) => {
  return { products: state.get('products').filter(
    (p: Product) => ownProps.productIDs.contains(p.uuid)) };
};

ثم اضطررت إلى تحديد معلمات connect مثل:

const ProductList = connect<ProductListProps, void, {productIDs: List<UUID>}>(mapStateToProps)(ProductListComponent);

بعد بعض التحقيقات. لقد وجدت حلا بسيطا. ما عليك فعله فقط هو أن يكون لديك "compilerOptions": {"strict": true} في ملفك tsconfig.json إذا كنت توصل مكون React.Component <،>.

تم كتابة نصوص الإصدار 2.8.x على هذا الأمر. قم بالترقية وجربها.

فواصل مرة أخرى في نسخة مطبوعة 3.0.1. مرحبا ثين!

كسر مع TypeScript 3.2.2 أيضا.

هل هذه المشكلة بها أي تحديثات؟

انكسر بالنسبة لي مع Typescript 3.2.2 أيضًا. ومع ذلك ، يبدو أن التعليق connect بـ connect<Props> يصلح الأمر.

لدي نفس المشكلة ، حتى مع ربط التعليق التوضيحي: /

لدي نفس المشكلة أيضًا ، لا يوجد تحديث على الإطلاق؟

كسر مع TypeScript 3.2.4 أيضًا.

يبدو أن هذا لن يتم حله قريبًا.

لكل شخص لديه هذه المشكلة ، تأكد من استيراد المكون المتصل بشكل صحيح. لقد قمت بتبديل مكون موجود بالفعل للحصول على وظيفة connect () بمجرد احتياجها للوصول إلى حالة التطبيق من redux. أثناء القيام بذلك ، قمت بالتبديل من تصدير وظيفة عديمة الحالة إلى تصدير مكون الفصل الخاص بي بشكل افتراضي. عندما لم أغير طريقة استيراده في ملفات أخرى ، ظهر هذا الخطأ.

انه يعمل.

هل هناك أي حل بديل على الأقل لإسكات هذا الخطأ محليًا؟

بالتأكيد يبدو أن هناك تقليبًا في مكان ما في OwnProps مقابل StateProps. أرى هذه المشكلة حيث لدينا مكون متصل Redux له أطفال.

كل ما فعلته لإسكات هذه المشكلة هو استخدام <any> :

export default connect<any>(states, actions)(SomeComponent);

يعمل أيضًا إذا كنت تستخدم إنشاء:

export default compose<any>(
  connect(states, actions),
  withStyles(styles)
)(SomeFunctionalComponent);

يجب أن يؤدي ذلك إلى إسكات الخطأ عند تمرير الخاصيات إلى المكون "الذكي" / المتصل.

تحرير: لقد أعدت للتو قراءة سلسلة الرسائل مرة أخرى ، ويبدو أن الحل البديل themodernlife هو الحل الأفضل (على سبيل المثال. التعليق التوضيحي على الاتصال أو الإنشاء باستخدام واجهة Props أو النوع):

ألا يؤدي ذلك أيضًا إلى تدمير كل أنواع الفحص والتحسس؟ إذن ما هو الهدف من إضافة الكتابة على الإطلاق؟ تضمين التغريدة

نعم ، إنه حل بديل فقط لإسكات المترجم والسماح له بالبناء لمنع هذا من أن يكون "سدادة عرض" (أو في حالتي ، لمنعني من إعادة كتابة كل شيء بعيدًا عن TS أو التوقف حتى انتهاء الإصلاح ). هذا ليس الحل بالرغم من ذلك.

أنا أيضًا ، في انتظار الإصلاح لهذا :)

الحل الأفضل هو كتابة مكالمة connect يدويًا مثل هذا:

type StateProps = {
  // Attributes that you want mapped from redux store
}
type DispatchProps = {
  // Dispatch actions
}
type OwnProps = {
  // Other props that component expects when being created
}
type Props = StateProps & DispatchProps & OwnProps;
class ExampleComponent extends React.Component<Props> { /* ... */ }

const mapStateToProps = (state: State, ownProps: OwnProps): StateProps => { /* .. */ }
const mapDispatchToProps = (dispatch: Dispatch): DispatchProps => { /* ... */ }

export default connect<StateProps, DispatchProps, OwnProps>
  (mapStateToProps, mapDispatchToProps)(ExampleComponent)

يجب أن يؤدي هذا إلى إنشاء مكون متصل صحيح يتوقع OwnProps عند إنشائه وليس هناك حالة أخرى أو خاصيات إرسال.

سلبي. ما زالت تحاول استنتاج الأنواع. بدلاً من ذلك ، لا بد لي من تجاوز كتابة const يدويًا ثم إعادة ذلك كإعداد افتراضي.

const connected: React.ComponentType<OwnProps> = connect<StateProps, DispatchProps, OwnProps>(......)(Component);
export default connected;

مواجهة نفس المشكلة مع connect () باستخدام "@ types / reaction-redux": "7.0.1" و "typecript": "3.4.5". لا يبدو أن الحلول المذكورة قد ساعدت. TroySchmidt هل يمكنك مشاركة كيفية استخدامك لهذا "متصل" في المكون الرئيسي إذا كان ذلك ممكنًا سيكون بعض نماذج التعليمات البرمجية مفيدة جدًا

مرحبًا ، لقد كان لدي خطأ مشابه. لا يبدو أن رد الفعل-إعادة الإرسال يحل القيمة المرجعة لـ mapStateToProps كـ "TInjectedProps" ، مما يتسبب في استبعاد خاطئ في Omit helper @ types / reaction-redux index.d.ts: 110 export type InferableComponentEnhancerWithProps .

تعريف النوع في وظيفة الاتصال يحل المشكلة

// connect Redux
export const RCHeader = connect
<IHeaderStateToProps, //returned by mapStateToProps
 {}, // not necessary
 IHeaderProps, // props you want to pass through jsx/tsx
 IHeaderConnectedReduxStateProps, // combined from IHeaderMapStateToProps and IHeaderProps
 {}// not necessary
>(
    (state: ISettingsState ): IHeaderStateToProps => {
        return {
            headerLogoURL: state.settings.headerLogoURL
        }
    },
    undefined,
    undefined,
    { forwardRef: true }
)(Header);

{
  "dependencies": {
    "react": "^16.8.6",
    "react-redux": "^6.0.1",
    "redux": "^4.0.1"
  },
  "devDependencies": {
    "@types/react": "^16.8.17",
    "@types/react-redux": "^7.0.6",
    "react-scripts-ts": "^4.0.8",
    "typescript": "^3.4.5"
  }
}

هل هناك أي تحديث لهذا؟

في الآونة الأخيرة ، قمت بكتابة مكون من شأنه أن يعيده connect . عندما أستخدم هذا المكون في مكان آخر ، فإن كل الدعائم الخاصة به مفقودة. وإصلاحه عن طريق:

type StateProps = {
  /* some code */
};

type DispatchProps = {
  /* some code */
};

type OwnProps = {
  /* some code */
};

type Props = StateProps & DispatchProps & OwnProps;

const mapStateToProps = (state: IReduxState): StateProps => ({
  /* some code */
});

const mapDispatchToProps = (dispath: Dispatch<AnyAction>): DispatchProps => {
  /* some code */
};

const BaseComponent: React.FC<Props> = (props: Props) => {
  /* some code */
};

export const ConnectedComponent: React.ComponentType<OwnProps> = connect<
  StateProps,
  DispatchProps,
  OwnProps,
  IReduxState
>(
  mapStateToProps,
  mapDispatchToProps
)(BaseComponent);

التبعيات أدناه:

{
  "dependencies": {
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-redux": "^7.1.0",
    "redux": "^4.0.1",
  },
  "devDependencies": {
    "@types/react": "^16.8.22",
    "@types/react-dom": "^16.8.4",
    "@types/react-redux": "^7.1.0",
    "@types/redux": "^3.6.0",
    "typescript": "^3.5.2"
  }
}

إن إضافة كل هذه الأنواع بدلاً من وجود نوع أساسي من الاستدلال لا يبدو حلاً جيدًا بالنسبة لي ...

هذا لا يزال يبدو وكأنه مشكلة. من المؤكد إلى حد ما أن المشكلة قد تم تقديمها في الإصدار 7.0.2 ، حيث يمكنني تثبيت 7.0.1 وكتابة الاستدلال يعمل بشكل صحيح.

يعمل لدي.
نشر justemit الأسلوب الصحيح الذي يعمل على الإصدارات الأخيرة من رد الفعل والإعادة.

justemit شكرا لك هذا دفعني للجنون 🙌

تحرير: لقد أصلحت المشكلة باستخدام React.FC<Props> 😅

أعتقد أن هذه المشكلة لا تزال قائمة وبصحة جيدة في @types/react-redux@^7.1.2 :

const propTypes = {
  foo: PropTypes.number.isRequired,
  bar: PropTypes.func.isRequired
};

// inferring the Props type
interface Props extends PropTypes.InferProps<typeof propTypes> {}
// although doing it explicitly also yields the same result
interface Props {
  foo: number,
  bar: (...args: any[]) => any
}

const Foo = (props : Props) => <></> // EDIT: incorrect way to define functional components
const Foo : React.FC<Props> = (props) => <></> // EDIT: the correct way
//          ^^^^^^^^

Foo.propTypes = propTypes;
/* Foo.defaultProps = {
  foo: 1,
  bar: () => {}
} //*/

const mapStateToProps = (state : any) => ({
  foo: 1
})
const mapDispatchToProps = {
  bar: () => {}
}
const Bar = connect(mapStateToProps, mapDispatchToProps)(Foo)

const Baz = () => <Bar /> // throws an error

Type '{}' is missing the following properties from type 'Readonly<Pick<Pick<Props, never>, never> & Pick<InferProps<{ foo: Validator<number>; bar: Validator<(...args: any[]) => any>; }>, "foo" | "bar">>': foo, bar



md5-e744aa0bac3ac7f45f015259c5597ea9

النوع 'ConnectedComponentClass <...>' غير قابل للتخصيص لنوع 'ComponentType <{}>'.
يفتقد النوع "للقراءة فقط <{}>" الخصائص التالية من النوع "للقراءة فقط؛ bar: Validator <(... args: any []) => any> ؛ } >> ': foo، bar

And even if typing everything explicitly helped, I agree with <strong i="16">@alexandrudanpop</strong> that it should be possible to infer those types instead of doing everything manually 🤔 

**Edit:** for anyone looking for inspiration for a workaround, I currently resort to explicitly casting using `unknown`:
```ts
// assumes `mapDispatchToProps` is an object, could be a function if used with `ReturnType`
type OwnProps = Omit<Props, keyof ReturnType<typeof mapStateToProps> | keyof mapDispatchToProps>
connect(mapStateToProps, mapDispatchToProps)(Foo) as unknown as React.ComponentType<OwnProps>

هناك شيء قد يساعد في الاستدلال (لا يزال بعض الأعمال اليدوية) يفعل شيئًا كهذا
الخروج من مثال kdmadej

type StateProps = ReturnType<typeof mapStateToProps>;
type DispatchProps = typeof mapDispatchToProps;
type OwnProps = {
  a: string;
  b: number;
}

type Props = StateProps & DispatchProps & OwnProps;

const Foo = (props : Props) => <></>

const mapStateToProps = (state : any) => ({
  foo: 1
})

const mapDispatchToProps = {
  bar: () => {}
}

export default connect(mapStateToProps, mapDispatchToProps)(Foo)


// In another file
const Baz = () => <Bar /> <-- this should throw error expecting `a` and `b`

لكن المشكلة التي أواجهها هي عندما أقوم بإضافة OwnProps إلى المزيج. يجب أن يؤدي استخدام <Bar /> في أي مكان إلى ظهور خطأ بسبب فقدان الدعائم a و b ، لكنه ليس كذلك ، وهو يزعجني حقًا (لا يقصد التورية).

لقد تمكنت من الالتفاف حول هذا باستخدام هذا

const ConnectedBar: React.ComponentType<OwnProps> = connect(mapStateToProps, mapDispatchToProps)(Bar);
export default ConnectedBar;

أو مكافئ

export default connect(mapStateToProps, mapDispatchToProps)(Foo) as React.ComponentType<OwnProps>;

لقد أصلحت مشكلاتي باستخدام React.FC<Props> لكتابة مكون الوظيفة بشكل صحيح 😉
تم تحديث المنشور الأصلي

أي تحديثات على هذا؟ كما قال alexandrudanpop ، فإن إضافة كل هذه الأنواع بدلاً من الحصول على نوع أساسي من الاستدلال لا يبدو كحل جيد. أنا أستخدم 7.2.1 وما زلت أعاني من نفس المشكلة.

في مكوناتي الأخرى لدي:

const connector = connect(mapStateToProps, mapDispatchToProps);
type PropsFromRedux = ConnectedProps<typeof connector>;
type Props = PropsFromRedux & OwnProps;

لكن يبدو أن هذا لا يعمل إذا كان الوالد يرسل أيضًا بعض الدعائم.

أيضا تواجه نفس المشكلة.
بدأ الانقطاع بعد تحديث npm.
الإصلاح الخاص بي هو كما يلي:
export default connect(mapStateToProps)(ConnectedIntlProvider) as unknown as ComponentType<unknown>;
غير معروف لأنه لا يوجد OwnProps. يجب أن يكون هناك OwnProps فقط.

ومع ذلك ، فهذه الطريقة تعمل:
export default connect<StateFromProps, null, OwnProps, ApplicationState>(mapStateToProps)(viewWithIntl);

لكن بهذه الطريقة لا:
export default connect<StateFromProps, DispatchFromProps, OwnProps, ApplicationState>( mapStateToProps, mapDispatchToProps, )(attachmentFormWithIntel)
وتتطلب اللاحقة:
as unknown as ComponentType<OwnProps>;

استخدام
"@ أنواع / رد فعل": "16.9.49"،
"@ types / reaction-redux": "^ 7.1.9"،
"typecript": "^ 4.0.3"
"redux": "^ 4.0.5"،
{
"التبعيات": {
"تفاعل": "^ 16.13.1" ،
"رد فعل دوم": "^ 16.13.1" ،
"رد فعل - إعادة": "^ 7.2.1"،
"redux": "^ 4.0.5"،
} ،
"devDependencies": {
"@ أنواع / رد فعل": "16.9.49"
"@ أنواع / رد فعل دوم": "16.9.8"،
"@ types / reaction-redux": "^ 7.1.9"،
"typecript": "^ 4.0.3"
}
}