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-they-re-notified) 작성자( Definitions by: in 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 컨테이너가 래핑된 구성 요소의 인터페이스에 새 속성을 추가할 수 없는 것처럼 보입니까? 이것은 내가 코드를보고있는 것입니다.

필요한 속성만 기준으로 구성 요소를 정의한 다음 새 인터페이스를 정의하고 redux 저장소를 통해 구성 요소의 속성을 제공하는 HOC로 해당 구성 요소를 확장하는 것이 일반적인 워크플로의 일부입니다. 어떤 경우에는 새 인터페이스가 래핑된 구성 요소 인터페이스의 하위 집합이지만 다른 경우에는 그렇지 않을 수 있습니다. 위의 경우 새 인터페이스에는 호출자가 사용하지만 래핑된 구성 요소는 볼 수 없는 추가 속성 reportType 이 있습니다.

더 독특한 컨테이너는 컴파일되지 않습니다.

이 변경으로 인해 손상된 기술의 또 다른 예가 있습니다.

두 개의 간단한 구성 요소가 있다고 가정합니다.

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

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

name 속성에 대해 전혀 알 필요 없이 이러한 구성 요소에 대해 date 를 제공하는 HOC를 구축하고 싶습니다. 예를 들어, 내가 할 수있는이 방법은하는 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 HOC는 해당 구성 요소의 인터페이스를 완전히 인식하지 않고도 구성 요소를 보강할 수 있습니다. 주어진 컴포넌트가 제공하는 props를 받아들일 수 있다는 것만 알면 됩니다.

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 를 이전 버전으로 설정했으며 모든 것이 정상입니다.