Definitelytyped: 4.4.41에 도입된 @types/react-redux의 connect() 문제

이 오류도 발생합니다. typedef 중 하나가 실수로 TOwnProps 와 TMergedProps / TStateProps 를 바꾼 것처럼 느껴지지만 index.d.ts 피상적으로 보았습니다.

이 문제에 대한 업데이트가 있습니까? redux + typescript를 사용하는 새로운 개발자에게 쇼스토퍼가 될 수 있다고 생각합니다. 훌륭한 작업에 감사드립니다.

@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 :react-redux/fix-ownprop-inference
이 문제를 해결하는 데 도움을 주고 싶지만 typescript로 내 지식의 한계에 부딪히고 있습니다. 누군가 내 테스트 케이스나 제안 사항에 대해 생각이 있으면 이에 대해 논의하고 싶습니다.

여기에서 루프를 닫으면 - https://github.com/DefinitelyTyped/DefinitelyTyped/pull/17196 이 우리 코드베이스에서 이 문제를 해결하는 것처럼 보입니다.

해결되었나요? 현재 ^5.0.8( IntrinsicAttributes & IntrinsicClassAttributes<Component<Pick ... )에서 이 문제가 발생하고 있습니다. 유일한 차이점은 interfaces types 를 사용하고 있다는 것입니다.

누구나? 이것은 불행히도 나에게 진정한 쇼 스토퍼입니다 ...

@proProbe @types/react-redux , @types/react 및 redux 버전과 오류를 재현하는 샘플을 제공할 수 있습니까?
또한 CC 패키지 작성자: @tkqubo @thasner @kenzierocks @clayne11 @tansongyang @nicholasboll

늦은 답변 죄송합니다! 나는 그것을 재현하기 위해 샘플로 작업하고 있었다. 그런 다음 갑자기 이것이 @types/react-redux: "^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의 반환 값 유형과 내가 원하는 ownProps 유형에 대한 연결을 매개변수화하여 내 코드 기반에서 이 문제를 해결할 수 있었습니다. 다음과 같은 제품 ID 목록으로 내 제품 목록을 호출하려는 경우 컨텍스트에서 제외됩니다.

<ProductList productIDs={productIDs} />

그리고 mapStateToProps 를 가지고 해당 ID를 다음과 같은 목록에 표시할 제품으로 변환합니다.

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);

약간의 조사 후. 간단한 해결책을 찾았습니다. React.Component<,> 구성 요소를 연결하는 경우 tsconfig.json에 "compilerOptions": { "strict": true } 만 있으면 됩니다.

Typescript 2.8.x는 이 문제를 해결합니다. 업그레이드하고 사용해 보세요.

Typescript 3.0.1에서 다시 중단됩니다. 안녕 티엔!

TypeScript 3.2.2에서도 중단.

이 문제에 업데이트가 있습니까?

Typescript 3.2.2도 저를 위해 깨졌습니다. 그러나 connect 에 connect<Props> 주석을 추가하면 문제가 해결되는 것 같습니다.

연결에 주석을 달아도 동일한 문제가 있습니다./

저도 같은 현상인데 업데이트가 전혀 안되나요?

TypeScript 3.2.4에서도 중단.

이것은 곧 해결되지 않을 것 같습니다.

이 문제가 있는 모든 사람에게 연결된 구성 요소를 올바르게 가져오는지 확인하십시오. redux에서 앱 상태에 액세스해야 하는 경우 이미 존재하는 구성 요소를 connect() 함수로 전환했습니다. 이 작업을 수행하는 동안 상태 비저장 함수 내보내기에서 기본 클래스 구성 요소 내보내기로 전환했습니다. 다른 파일로 가져오는 방법을 변경하지 않았을 때 이 오류가 발생했습니다.

작동 중입니다.

이 오류를 로컬에서 최소한 침묵시키는 해결 방법이 있습니까?

확실히 OwnProps 대 StateProps의 어딘가에 플립플롭이 있는 것 같습니다. 나는 자식이 있는 Redux 연결 구성 요소가 있는 이 문제를 보고 있습니다.

이 문제를 침묵시키기 위해 내가 한 것은 <any> 를 사용하는 것입니다.

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

작성을 사용하는 경우에도 작동합니다.

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

이렇게 하면 소품을 '스마트'/연결된 구성 요소에 전달할 때 오류가 사라집니다.

편집: 방금 스레드를 다시 읽었고 @themodernlife 의 해결 방법 이 더 나은 해결 방법인 것 같습니다(즉, Props 인터페이스 또는 유형을 사용하여 연결에 주석을 달거나 작성).

그것은 또한 모든 유형 검사와 Intellisense를 파괴하지 않습니까? 그렇다면 타이핑을 추가하는 요점은 무엇입니까? @dcefram

예, 컴파일러를 침묵시키고 이것이 "쇼 스토퍼"가 되지 않도록 빌드하도록 허용하는 해결 방법입니다(또는 제 경우에는 수정 사항이 나올 때까지 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;

"@types/react-redux": "7.0.1" 및 "typescript": "3.4.5"를 사용하여 connect()와 동일한 문제에 직면합니다. 언급 된 솔루션이 도움이되지 않은 것 같습니다. @TroySchmidt 가능한 경우 일부 샘플 코드가 매우 도움이 될 수 있다면 상위 구성 요소에서 이 "연결"을 사용하는 방법을 공유할 수 있습니까?

안녕하세요 비슷한 오류가 발생했습니다. react-redux는 mapStateToProps의 반환 값을 "TInjectedProps"로 해석하지 않는 것 같습니다. 이로 인해 Omit 도우미 @types/react-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"
  }
}

이에 대한 업데이트가 있습니까?

최근에 redux에 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.1 를 설치할 수 있고 유형 추론이 올바르게 작동하기 때문에 문제가 7.0.2 버전에서 도입된 것이 확실합니다.

나를 위해 작동합니다.
@justemit 은 react 및 redux의 마지막 버전에서 작동하는 올바른 접근 방식을 게시했습니다.

@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<{}>' 유형에 할당할 수 없습니다.
'Readonly<{}>' 유형에 'Readonly 유형의 다음 속성이 없습니다.; 막대: 유효성 검사기<(...인수: 모든[]) => 모든>; }>>': 푸, 바

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/react-redux": "^7.1.9",
"typescript": "^4.0.3"
"redux": "^4.0.5",
{
"종속성": {
"반응": "^16.13.1",
"react-dom": "^16.13.1",
"반응 redux": "^7.2.1",
"redux": "^4.0.5",
},
"devDependencies": {
"@types/react": "16.9.49"
"@types/react-dom": "16.9.8",
"@types/react-redux": "^7.1.9",
"typescript": "^4.0.3"
}
}