Definitelytyped: कुछ मौजूदा कनेक्ट कॉल 5.0.16 . से टूट गई हैं

• [x] मैंने @types/xxxx पैकेज का उपयोग करने की कोशिश की और मुझे समस्याएं थीं।
• [x] मैंने tsc के नवीनतम स्थिर संस्करण का उपयोग करने का प्रयास किया। https://www.npmjs.com/package/typescript
• [x] मेरे पास एक प्रश्न है जो StackOverflow के लिए अनुपयुक्त है। (कृपया वहां कोई उपयुक्त प्रश्न पूछें)।
• [x] [उल्लेख] (https://github.com/blog/821-mention-somebody-the-re-notified) लेखक ( Definitions by: में index.d.ts ) ताकि वे कर सकें प्रतिक्रिया.
  
  
  
  • लेखक: @Pajn @tkqubo @thasner @kenzierocks @clayne11 @tansongyang @NicholasBoll @mDibyo @pdeva
  
  

मुद्दे)

नमस्कार! मैंने अभी-अभी 5.0.16 में अपडेट किया है और अपने मौजूदा प्रोजेक्ट में इन नए टाइपिंग का उपयोग करके तुरंत कुछ परेशानी का सामना करना पड़ा। यहाँ कुछ प्रासंगिक संस्करण संख्याएँ हैं:

@types/react-redux: ^5.0.16,
typescript: ^2.8.x,
react-redux: ^5.0.5,

एक विशिष्ट कंटेनर संकलित नहीं करता है

यहां कुछ कोड है जो मुझे लगता है कि संकलित करना चाहिए (और जो 5.0.16 से पहले संकलित किया गया था और यदि हम संस्करण को 5.0.15 वापस सेट करते हैं तो फिर से संकलित होता है):

// components/exampleComponent.ts
import React = require('react')
import { IState, IDateRange, ReportType } from '../../types/index'

export interface IExampleProps {
  label?: string
  dateRange: IDateRange
  onDateRangeChange: (value: IDateRange) => void
}

export class ExampleComponent extends React.Component<IExampleProps> {
  // implementation
}

// containers/exampleComponent.ts
import { connect } from 'react-redux'
import { IState, IDateRange, ReportType } from '../../types/index'

interface IPropsFromState {
  dateRange: IDateRange
}

interface IPropsFromParent {
  reportType: ReportType
}

const mapStateToProps = (state: IState, props: IPropsFromParent): IPropsFromState => {
  const config = state.reporting.reportConfigs[props.reportType]

  return {
    dateRange: config ? config.dateRange : null,
  }
}

const connector = connect<IPropsFromState, null, IPropsFromParent>(
  mapStateToProps,
)

export const ExampleContainer = connector(ExampleComponent) // <-- this does not compile

आम तौर पर मैं इस तरह के कंटेनर का उपयोग करता रहूंगा,

<ExampleContainer reportType={ReportType.USERS_CREATED} />

हालांकि, इस कोड का उपयोग कर के साथ नवीनतम @types/react-redux पर 5.0.16 और कम से टाइपप्रति 2.8.1 मैं बजाय निम्न त्रुटि मिलती है:

[ts]
Argument of type 'typeof ExampleComponent' is not assignable to parameter of type 'ComponentType<IPropsFromState & DispatchProp<any> & IPropsFromParent>'.
  Type 'typeof ExampleComponent' is not assignable to type 'StatelessComponent<IPropsFromState & DispatchProp<any> & IPropsFromParent>'.
    Type 'typeof ExampleComponent' provides no match for the signature '(props: IPropsFromState & DispatchProp<any> & IPropsFromParent & { children?: ReactNode; }, context?: any): ReactElement<any>'.

5.0.16 में पेश किए गए परिवर्तनों का निरीक्षण करने पर, ऐसा लगता है कि टाइप सिस्टम परेशान है क्योंकि connector में InferableComponentEnhancerWithProps<IPropsFromState & IPropsFromParent, IPropsFromParent> टाइप है जिसका अर्थ है कि यह पहले तर्क के प्रकार के होने की उम्मीद कर रहा है IPropsFromState & IPropsFromParent । मेरे मूल घटक में reportType संपत्ति गुम है।

उदाहरण के लिए, यदि मैं इसे लिखता हूं:

const f = <P extends IPropsFromParent & IPropsFromState>(component: Component<P>) => { /**/ }
const g = <P extends IPropsFromParent & IPropsFromState>(props: P) => { /**/ }

const record: IExampleProps = null

f(ExampleComponent)
g(record)

ये न्यूनतम उदाहरण विफल हो जाते हैं। पहले एक ही अपारदर्शी त्रुटि संदेश के साथ उपरोक्त कोड के समान कारण के लिए विफल रहता है। दूसरा विफल हो जाता है क्योंकि, स्पष्ट रूप से, IExampleProps पास reportType: ReportType संपत्ति नहीं है, इसलिए हम IExampleProps से P असाइन नहीं कर सकते हैं। इसमें reportType गुम है। मुझे संदेह है कि यह हुड के नीचे है, जो पहला उदाहरण विफल होने का कारण बन रहा है।

ऐसा लगता है कि 5.0.16 कंटेनरों को उनके लिपटे घटकों के इंटरफेस में नए गुण जोड़ने की अनुमति नहीं है? कोड को देखकर मैं यही देखता हूं।

यह घटकों को परिभाषित करने के लिए मेरे सामान्य वर्कफ़्लो का हिस्सा है, केवल उन गुणों के संदर्भ में जो उन्हें चाहिए, और फिर उन घटकों को एचओसी के साथ विस्तारित करने के लिए जो एक नया इंटरफ़ेस परिभाषित करते हैं और घटक को रेडक्स स्टोर के माध्यम से इसके गुण प्रदान करते हैं। कुछ मामलों में नया इंटरफ़ेस लिपटे हुए घटक के इंटरफ़ेस का सबसेट है, लेकिन अन्य मामलों में ऐसा नहीं हो सकता है। उपरोक्त मामले में, नए इंटरफ़ेस में एक अतिरिक्त संपत्ति reportType जिसे कॉलर उपयोग करेगा लेकिन लपेटा हुआ घटक कभी नहीं देख पाएगा।

एक अधिक विशिष्ट कंटेनर संकलित नहीं करता है

मेरे पास एक तकनीक का एक और उदाहरण है जिसका मैं उपयोग करता हूं जो इस परिवर्तन से टूटा हुआ है:

मान लीजिए कि हमारे पास दो सरल घटक हैं,

class NameDateComponent extends React.PureComponent<{ name: string, date: string}> {}

class DateOnlyComponent extends React.PureComponent<{ date: string }> {}

मैं एक एचओसी बनाना चाहता हूं जो इन घटकों के लिए date प्रदान करता है बिना name संपत्ति के बारे में कुछ भी जानने की आवश्यकता के बिना। इस तरह मैं, उदाहरण के लिए, एक NameProvider और एक DateProvider बना सकता हूं, और उन्हें इस तरह बना सकता हूं: NameProvider(DateProvider(BaseComponent)) या इस तरह DateProvider(NameProvider(BaseComponent)) , कुछ ऐसा जो मैं सामान्य रूप से एक अच्छी तरह से टाइप किए गए घटक के साथ नहीं कर सकता TOwnProps निर्दिष्ट करने की आवश्यकता के कारण बढ़ाने वाला।

interface IWithDate {
  date: string
}

// ComponenProps defines a component interface that includes IWithDate
// NewAPI defines a new interface that excludes IWithDate
// so the types represent only what will change in the given component, without needing to know the rest of the interface
function DateProvider <ComponentProps extends IWithDate, NewAPI extends Minus<ComponentProps, IWithDate>> (Base: CompositeComponent<ComponentProps>) {

  const enhancer = connect<ComponentProps, null, NewAPI>(
    (_state: IState, props: NewAPI): ComponentProps => {
      // because of the 'never' type, 
      // typescript doesn't think NewAPI & IWithProps == ComponentProps
      // so we have to coerce this (but you and I can see that the above holds)
      const newProps: any = Object.assign({
        date: '2017-01-01'
      }, props)

      return newProps as ComponentProps
    },
    null
  )

  return enhancer(Base) // <-- after 5.0.16 this line does not compile
}

यह नया इंटरफ़ेस अज्ञेयवादी घटक बढ़ाने का उपयोग निम्नानुसार किया जाता है:

const NameOnly = DateProvider(NameDateComponent)
const Nothing = DateProvider(DateOnlyComponent)

.
.
.

<Nothing />
<NameOnly name='Bob' />
<NameDateComponent name='Bob' date='2017-01-01' />

तो DateProvider एचओसी उस घटक के इंटरफ़ेस से पूरी तरह अवगत हुए बिना एक घटक को बढ़ाने में सक्षम है। इसे केवल यह जानने की जरूरत है कि दिया गया घटक उसके द्वारा प्रदान किए जाने वाले प्रॉप्स को स्वीकार करने में सक्षम होगा।

5.0.16 यह अब काम नहीं करता है, इसके बजाय मुझे निम्न त्रुटि संदेश मिलता है:

[ts]
Argument of type 'CompositeComponent<ComponentProps>' is not assignable to parameter of type 'ComponentType<ComponentProps & NewAPI>'.
  Type 'ComponentClass<ComponentProps>' is not assignable to type 'ComponentType<ComponentProps & NewAPI>'.
    Type 'ComponentClass<ComponentProps>' is not assignable to type 'StatelessComponent<ComponentProps & NewAPI>'.
      Types of property 'propTypes' are incompatible.
        Type 'ValidationMap<ComponentProps>' is not assignable to type 'ValidationMap<ComponentProps & NewAPI>'.
          Type 'keyof ComponentProps | keyof NewAPI' is not assignable to type 'keyof ComponentProps'.
            Type 'keyof NewAPI' is not assignable to type 'keyof ComponentProps'.
              Type 'keyof NewAPI' is not assignable to type '"date"'.

चारों ओर खेलते हुए, मैंने निम्नलिखित पर ध्यान दिया है:

interface IWithDate {
  date: string
}

interface IComponentProps {
  name: string
  date: string
}

// I've torn out the internals of the DateProvider above
const connect1 = <T extends IWithDate, U extends Omit<T, keyof IWithDate>>(base: CompositeComponent<T>) => {
  const enhancer: InferableComponentEnhancerWithProps<T & U, U> = () => null

  return enhancer(base) // <-- this is a compile error
}

const connect2 = <T extends IWithDate, U extends Omit<T, keyof IWithDate>>() => {
  const enhancer: InferableComponentEnhancerWithProps<T & U, U> = () => null

  return enhancer
}

const enhancer = connect2<IComponentProps, Omit<IComponentProps, keyof IWithDate>>()
const container = enhancer(NameDateComponent) // <-- this is not a compile error

जब हम स्पष्ट रूप से कनेक्टर टाइप करते हैं, तो सब कुछ काम करता है?

इतना ही! पढ़ने के लिए धन्यवाद;) अभी के लिए मैंने अपने @types/react-redux को पिछले संस्करण में सेट कर दिया है और सब ठीक है।