Definitelytyped: react-redux의 'connect'는 데코레이터로 사용할 수 없습니다: 유형 "'void' 유형에 할당할 수 없습니다"

나는 요전에 비슷한 문제가 있었고 연결 기능을 위해 그것을 떨어 뜨 렸습니다. 유형은 무시하고 이전 반응 유형을 사용했습니다. 이 문제를 해결하고 PR을 제출할 수 있습니까?

물론이야! 이러한 유형이 원래 작성된 이후로 많은 것이 변경되었지만, 장식자 지원을 변경하지 않고도 유용한 것이 가능하다는 것은 여전히 ​​회의적입니다. 그러나 이전에 유형 시스템의 다른 부적절함을 해결한 적이 있으므로 시도해 보십시오.

아마도 매핑된 유형이 일부를 얻을 수 있으므로 출력에 최소한 _일부_ 유용한 유형 정보가 있습니까?

욜로

export function myConnect(mapStateToProps, mapDispatchToProps) {
    return function (target) {
        return <any>connect(mapStateToProps, mapDispatchToProps)(target);
    }
}

나는 이것을 yolo-typing에 대한 많은 요점이 없다고 생각합니다. 여기에 나열된 해결 방법과 #8787, 특히 함수 호출에 대한 힌트를 사용하는 것에 대한 해결 방법이 그렇게 나쁘지 않습니다(특히 구성 요소 클래스용 IDE 템플릿 사용). 모든 유형의 구성 요소를 갖는 것은 슬픈 일입니다. :( 함수 호출 대신 데코레이터로 사용하기 위해 아무 입력이나 연결하는 것은 실제로 카트를 말 앞에 두는 것입니다.

@connect 직접 사용하려면(사용자 지정 데코레이터를 도입하지 않고) 다음 해결 방법을 사용합니다.

@(connect(mapStateToProps, mapDispatchToProps) as any)
class MyComponent extends React.Component<...> {...}

그러나 나는 모든 타이핑이 실제로 우리가 원하는 것이 아니라는 @seansfkelley의 말에 전적으로 동의합니다...

데코레이터 구문이 훌륭함에도 불구하고 표준 방식으로 연결과 같은 HOC를 사용하는 것이 더 나은 방법이라고 생각합니다.

1) 데코레이터 사양에 어긋나는 클래스의 유형을 수정합니다.
2) Connect는 데코레이터가 아니라 HOC입니다.
3) stateless 및 stateful 구성 요소에 대해 다른 구문을 사용하여 코드의 이식성을 깨뜨립니다.

따라서 개발자가 잘못된 방식으로 사용할 수 있도록 정의를 제공하지 마십시오.

@npirotte 동의합니다. HOC를 데코레이터로 사용하는 것은 데코레이터 사양을 위반하는 것입니다. 더 이상 기본 클래스가 아니라 완전히 다른 클래스입니다.

사용자 지정 데코레이터와 동일한 문제가 있고 TS에서 지원 상태를 보고 있습니다(아직 플래그 뒤에 있고 AFAICS에는 기본적으로 활성화할 계획이 없습니다). 지원을 중단하려고 합니다. 그들을. 또한 데코레이터는 여전히 w3c 초안입니다.

구성 요소를 새 구성 요소로 래핑하는 가장 좋은 방법은 기존 클래스를 _장식_하려고 하는 대신 고차 함수를 사용하는 것입니다.

가져오기를 해도 같은 오류가 발생합니다. 그러나 다음은 저에게 효과적입니다.

const { connect } = require('react-redux');

@connect(mapStateToProps, mapDispatchToProps)
class MyComponent extends React.Component<...> { ... }

require 입력한 방법에 따라 달라지는 @TriStarGod . 이 경우 connect 를 any 로 입력하게 될 것 같습니다.

다른 솔루션/해결 방법.

이미 자체 앱 상태가 있으므로 다음과 같은 형태의 매우 짧은 기능이 필요합니다.

export interface PageProps {
    routing: RouterState;
}

export interface PageDispatch {
    navigate: () => void
}

@connect<PageProps, PageDispatch>(
    state => ({
        routing: state.routing
    }),
    dispatch => ({
        navigate: () => dispatch(push("/"))
    })
)
export class Page extends React.Component<PageProps & PageDispatch> {
...
}

다음은 래핑된 연결 방법입니다.

import { connect } from "react-redux";
import { ApplicationState } from './rootReducer';

interface MapPropsParam<TProps>{
    (state: ApplicationState, ownProps?: TProps): TProps
}

interface MapDispatchParam<TProps, TDispatchProps>{
   (dispatch: Redux.Dispatch<ApplicationState>, ownProps?: TProps): TDispatchProps;
}

export interface ConnectedComponent<TProps> {
    <TComponent extends React.ComponentType<TProps>>(component: TComponent): TComponent;
}

function connectToAppState<TProps, TDispatchProps = {}>(mapProps: MapPropsParam<TProps>, mapDispatch?: MapDispatchParam<TProps, TDispatchProps>) : ConnectedComponent<TProps> {
    return connect<TProps, TDispatchProps, TProps>(mapProps, mapDispatch) as ConnectedComponent<TProps & TDispatchProps>;    
}

export {
    connectToAppState as connect
}

귀하의 작업에 대한 Thx. 구독하고 이 문제에 대한 진행을 기다리고 있습니다.

@offbeatful mapDispatchToProps 의 다른 변형에 대한 유형 선언을 제공하세요.

객체가 전달되면 내부의 각 함수는 Redux 작업 생성자로 간주됩니다. 함수 이름이 같지만 모든 작업 생성자가 직접 호출될 수 있도록 디스패치 호출로 래핑된 개체는 구성 요소의 소품으로 병합됩니다.

@offbeatful 주석을 기반으로 한 또 다른 해결 방법

myConnect.ts

import {
    connect as originalConnect, MapDispatchToPropsParam, MapStateToPropsParam, MergeProps, Options
} from "react-redux";
import * as React from "react";

export interface InferableComponentEnhancerWithProps<TInjectedProps, TNeedsProps> {
    <TComponent extends React.ComponentType<TInjectedProps & TNeedsProps>>(component: TComponent): TComponent;
}

interface MyConnect {
    <TStateProps = {}, TDispatchProps = {}, TOwnProps = {}>(
        mapStateToProps?: MapStateToPropsParam<TStateProps, TOwnProps>,
        mapDispatchToProps?: MapDispatchToPropsParam<TDispatchProps, TOwnProps>
    ): InferableComponentEnhancerWithProps<TStateProps & TDispatchProps, TOwnProps>;

    <TStateProps = {}, TDispatchProps = {}, TOwnProps = {}, TMergedProps = {}>(
        mapStateToProps?: MapStateToPropsParam<TStateProps, TOwnProps>,
        mapDispatchToProps?: MapDispatchToPropsParam<TDispatchProps, TOwnProps>,
        mergeProps?: MergeProps<TStateProps, TDispatchProps, TOwnProps, TMergedProps>,
        options?: Options<TStateProps, TOwnProps, TMergedProps>
    ): InferableComponentEnhancerWithProps<TMergedProps, TOwnProps>;

}

export const connect = originalConnect as MyConnect;

@pravdomil 스니펫 및 최신 유형(5.0.13)을 기반으로 업데이트됨

import { ApplicationState } from "./rootReducer";

import * as React from "react";
import {
    connect as originalConnect, MapDispatchToPropsParam, MapStateToPropsParam, MergeProps, Options
} from "react-redux";

export type InferableComponentEnhancerWithProps<TInjectedProps, TNeedsProps> = <TComponent extends React.ComponentType<TInjectedProps & TNeedsProps>>(component: TComponent) => TComponent;

interface MyConnect {
    <TStateProps = {}, TDispatchProps = {}, TOwnProps = {}>(
        mapStateToProps?: MapStateToPropsParam<TStateProps, TOwnProps, ApplicationState>,
        mapDispatchToProps?: MapDispatchToPropsParam<TDispatchProps, TOwnProps>
    ): InferableComponentEnhancerWithProps<TStateProps & TDispatchProps, TOwnProps>;

    <TStateProps = {}, TDispatchProps = {}, TOwnProps = {}, TMergedProps = {}>(
        mapStateToProps?: MapStateToPropsParam<TStateProps, TOwnProps, ApplicationState>,
        mapDispatchToProps?: MapDispatchToPropsParam<TDispatchProps, TOwnProps>,
        mergeProps?: MergeProps<TStateProps, TDispatchProps, TOwnProps, TMergedProps>,
        options?: Options<TStateProps, TOwnProps, TMergedProps>
    ): InferableComponentEnhancerWithProps<TMergedProps, TOwnProps>;

}

export const connect = originalConnect as MyConnect;

안녕하세요 @offbeatful (cc: @pravdomil 추측인가요?), 최근에 이 문제와 관련된 스택 오버플로 질문 을 했는데 이것이 현재 지원되지 않는다는 결론이 나왔습니다 . 그 질문의 일부로 내가 시도한 것을 보여줄 저장소 를 준비했습니다. 이것이 현재 지원되지 않는다는 결론이 났으므로 오늘 귀하의 코드 스니펫을 보고 기뻤고 이를 사용하도록 내 저장소를 업데이트하려고 했습니다.

여기에서 코드 조각이 통합된 커밋을 볼 수 있습니다.

이것은 더 이상 이전에 얻었던 오류로 소리 지르지 않지만 구성 요소가 연결되어 있지만 자체 props가 있는 사용 사례에서 이 새로운 서명은 이제 state props도 다음과 같이 필요하도록 만듭니다. 자신의 (TSX) 소품. 내 저장소의 cd my-app && yarn start 는 내가 의미하는 바를 보여줄 것입니다.

이것이 해결될 수 있거나 불가능한 일이라고 생각하십니까?

이 connect 버전을 사용할 수 있습니다.

connect(
        mapStateToProps: MapStateToPropsParam<TStateProps, TOwnProps, State>,
        mapDispatchToProps: MapDispatchToPropsParam<TDispatchProps, TOwnProps>,
        mergeProps: null | undefined,
        options: Options<State, TStateProps, TOwnProps>
): InferableComponentEnhancerWithProps<TStateProps & TDispatchProps, TOwnProps>

만약 그렇다면, 당신은 단지 해결하는 데 필요한 options 매개 변수가 될 Options<any, any, any> 당신은 필요가 없습니다 이런 식으로 TStateProps & TDispatchProps 가 될 것 사촌 문제를 TStateProps & any

간단히 말해서:

const options = { withRef:true } as Options<any, any, any>;
export const Component = connect(mapStateToProps, mapDispatchToProps, null, options)

당신처럼 멋진

@TomasHubelbauer 기본 redux 연결 방법으로 돌아
이상하게 작동할 것입니다.

세 가지 유형 간에 공유 유형을 사용하는 것이 가장 좋습니다.

export type CounterStateProps = {
    count: number;
};

export type CounterDispatchProps = {
    onIncrement: () => void;
};

export type CounterOwnProps = {
    initialCount: number;
};

export type CounterProps = CounterStateProps & CounterDispatchProps & CounterOwnProps;

그런 다음 상태 저장 구성 요소를 구현하십시오.

export class StatefulCounter extends React.Component<CounterProps, CounterStateProps> {
    timer: number;

    componentDidMount() {
        this.timer = setInterval(this.props.onIncrement, 5000);
    }

    componentWillUnmount() {
        clearInterval(this.timer);
    }

    render() {
      return (
        <StatelessCounter count={this.props.count}/>
      );
    }
}

그리고 마지막으로 사용자 지정 연결 코드가 아닌 연결에서 redux의 빌드를 사용하여 커넥터 클래스를 이와 같이 만듭니다.

const mapStateToProps =
    (state: RootState, ownProps: CounterOwnProps): CounterStateProps => ({
        count: countersSelectors.getReduxCounter(state) + ownProps.initialCount,
    });

const mapDispatchToProps =
    (dispatch: Dispatch<CounterActionType>): CounterDispatchProps => bindActionCreators({
        onIncrement: CounterActions.increment,
    }, dispatch);

export const ConnectedCounter =
    connect(mapStateToProps, mapDispatchToProps)(StatefulCounter);

@JohnHandley 예, 저는 이것이 효과가 있다는 것을 알고 있습니다 . 제 예 에서는 데코레이터로 작동하도록 하기 위한 몇 가지 제안을 시도하기 전에 보여주었습니다. 비 데코레이터 변형을 성공적으로 사용하지만 데코레이터도 작동하게 만들고 싶습니다.

또한, 나는 당신이 사용하는, 당신이 당신의 유형을 혼합 생각 CounterStateProps 의 리턴 타입 인 ( mapDispatchToProps 의 구성 요소로 CounterProps (괜찮 인이 돌아 오는 상태를 가지고 props, Redux 디스패치 props 및 JSX 자체 props)뿐만 아니라 구성 요소 상태에 대한 유형으로도 사용됩니다.대신 state 에는 외부 구성 요소의 유형 서명과 관련이 없는 자체 유형이 있어야 합니다.

솔루션을 완전히 이해하지 못했을 수 있으므로 TSX에서 Redux 상태 소품을 지정해야 한다는 오류가 발생하지 않고 내 저장소(TSX에서 자체 props와 Redux 상태 props에서 모두 사용)에서 이 작업을 수행할 수 있다면 , 그것도 좋을거야!

이 문제에 대해 +1

@offbeatful 에서 스니펫을 업데이트했으며 지금 성공적으로 사용하고 있습니다.

connect.ts ( IAppState 는 redux 상태의 인터페이스입니다)

import React from 'react'
import {
    connect as originalConnect,
    MapDispatchToPropsParam,
    MapStateToPropsParam,
    MergeProps,
    Options,
} from 'react-redux'


export type InferableComponentEnhancerWithProps<IInjectedProps, INeedsProps> =
    <IComponent extends React.ComponentType<IInjectedProps & INeedsProps>>(component: IComponent) => IComponent

export interface IConnect {
    <IStateProps = {}, IDispatchProps = {}, IOwnProps = {}>(
        mapStateToProps?: MapStateToPropsParam<IStateProps, IOwnProps, IAppState>,
        mapDispatchToProps?: MapDispatchToPropsParam<IDispatchProps, IOwnProps>,
    ): InferableComponentEnhancerWithProps<IStateProps & IDispatchProps, IOwnProps>

    <IStateProps = {}, IDispatchProps = {}, IOwnProps = {}, IMergedProps = {}>(
        mapStateToProps?: MapStateToPropsParam<IStateProps, IOwnProps, IAppState>,
        mapDispatchToProps?: MapDispatchToPropsParam<IDispatchProps, IOwnProps>,
        mergeProps?: MergeProps<IStateProps, IDispatchProps, IOwnProps, IMergedProps>,
        options?: Options<IStateProps, IOwnProps, IMergedProps>,
    ): InferableComponentEnhancerWithProps<IMergedProps, IOwnProps>

}

export const connect = originalConnect as IConnect

그런 다음 연결된 구성 요소는 다음과 같습니다.

import {connect} from 'path-to-my-connect/connect'

interface IOwnProps {
    ... props exposed for the real parent component
}

interface IStateProps {
    ... props from mapStateToProps
}

interface IDispatchProps {
    ... props from mapDispatchToProps
}

interface IProps extends IStateProps, IDispatchProps, IOwnProps {}

@connect<IStateProps, IDispatchProps, IOwnProps>(
    (state: IAppState) => {
            return {
                foo: getFoo(state), // getFoo is a selector using 'reselect'
            }
        },
    {setFoo, increment, decrement, ... your action creators},
)
class MyComponent extends React.PureComponent<IProps> {
        // your component implementation
}

export default (MyComponent as any) as React.ComponentType<IOwnProps>

MyComponent as React.ComponentType<IOwnProps> 직접 캐스팅은 실패하므로 먼저 any 로 입력했습니다. 나는 그것이 해킹이라는 것을 알고 있지만 부모와 구성 요소 자체에도 잘 작동합니다.

이것은 내가 생각해낼 수 있었던 가장 실행 가능하지만 여전히 제한적인 솔루션입니다.

"react-redux": "^5.0.6",
"typescript": "^2.8.1",
"@types/react-redux": "^6.0.0",

어떤 소식?

@ctretyak 아니요 , 결국 직접 선언 파일을 만들고 데코레이터를 수정해야 합니다. React Eco와 TS는 가장 친한 친구가 아닌 것 같기 때문에 제가 여기로 넘어간 이유입니다.

const DecoratedComponent = require('../DecoratedComponent').default;

이러한 종류의 가져오기를 사용하면 IDE에서 소품을 표시하고 ts 오류를 숨길 수 있습니다. 약간 못생겼지만 데코레이터는 단순한 연결보다 더 좋아 보입니다. 특히 번역 또는 탐색과 같은 일부 선택기를 자동으로 추가하도록 구성하는 경우

react-redux 문제가 아닙니다. @withRouter (React-Router에서) 및 @graphql과 동일한 의견을 가지고 있습니다.

Typescript는 데코레이터가 소품을 주입할 수 있다는 것을 이해하지 못하는 것 같습니다...

Typescript는 데코레이터가 소품을 주입할 수 있다는 것을 이해하지 못하는 것 같습니다...

헐 이게 아직도 문제야? 방금 이것에 부딪쳤습니다.

무언가가 우리의 두뇌를 파괴하고 있다는 사실이 슬프지만, 우리를 더 편안하게 해주도록 설계되었습니다 :(

무언가가 우리의 두뇌를 파괴하고 있다는 사실이 슬프지만, 우리를 더 편안하게 해주도록 설계되었습니다 :(

저도 요 :(

이것은 아마도 모든 사용 사례를 다루지는 않지만 저에게 잘 작동했습니다.
또한 한 곳에서 내 스토어 유형(MyAppStore)을 추가할 수 있는 기회도 제공합니다.

export function connectTs<TDispatchProps={}, TOwnProps=any>(
  mapStateToProps?: (state: MyAppStore, ownProps?: TOwnProps) => any,
  mapDispatchToProps?: MapDispatchToPropsParam<TDispatchProps, TOwnProps>
): any {
  return connect(mapStateToProps, mapDispatchToProps)
}

업데이트가 있습니까?

connect를 데코레이터로도 사용하고 싶습니다.

공식 솔루션이 제공되나요???
많은 개발자가 connect(mapStateToProps,mapDispatchToProps)(components)보다 @connect 를 사용하는 것을 선호한다고 생각합니다.