TypeScript를 사용한 react-router-

TypeScript를 사용한 react-router-

리액트 라우터를 TypeScript와 함께 사용하려고 합니다.다만, Router 기능을 사용할 때 문제가 있습니다.마지막 줄에 꽤 이상한 오류가 나타납니다.

Argument of type 'ComponentClass<{}>' is not assignable to parameter of type 'StatelessComponent<RouteComponentProps<any>> | ComponentClass<RouteComponentProps<any>>'.
  Type 'ComponentClass<{}>' is not assignable to type 'ComponentClass<RouteComponentProps<any>>'.
    Type '{}' is not assignable to type 'RouteComponentProps<any>'.
      Property 'match' is missing in type '{}’

코드는 다음과 같습니다.

import * as React from 'react';
import { connect } from 'react-redux';
import { RouteComponentProps, withRouter } from 'react-router-dom';

interface HomeProps extends RouteComponentProps<any> {
}

interface HomeState { }

class Home extends React.Component<HomeProps, HomeState> {
  constructor(props: HomeProps) {
    super(props);
  }
  public render(): JSX.Element {
    return (<span>Home</span>);
  }
}

const connectModule = connect(
  (state) => ({
    // Map state to props
  }),
  {
    // Map dispatch to props
  })(Home);

export default withRouter(connectModule);

이 문제를 해결하기 위해 다른 방법을 사용합니다.항상 다른 속성(라우터, 일반 및 디스패치)을 구분하기 때문에 컴포넌트에 대해 다음 인터페이스를 정의합니다.

interface HomeRouterProps {
  title: string;   // This one is coming from the router
}

interface HomeProps extends RouteComponentProps<HomeRouterProps> {
  // Add your regular properties here
}

interface HomeDispatchProps {
  // Add your dispatcher properties here
}

이제 모든 속성을 단일 유형으로 결합하는 새 유형을 만들 수 있지만, 구성 요소 정의 중에 항상 유형을 결합합니다(여기에는 상태를 추가하지 않지만 필요한 경우 계속하십시오).컴포넌트 정의는 다음과 같습니다.

class Home extends React.Component<HomeProps & HomeDispatchProps> {
  constructor(props: HomeProps & HomeDispatchProps) {
    super(props);
  }

  public render() {
    return (<span>{this.props.match.params.title}</span>);
  }
}

이제 컨테이너를 통해 부품을 주에 배선해야 합니다.다음과 같습니다.

function mapStateToProps(state, ownProps: HomeProps): HomeProps => {
  // Map state to props (add the properties after the spread)
  return { ...ownProps };
}

function mapDispatchToProps(dispatch): HomeDispatchProps {
  // Map dispatch to props
  return {};
}

export default connect(mapStateToProps, mapDispatchToProps)(Hello);

이 메서드는 완전한 타입의 접속을 가능하게 하기 때문에 컴포넌트와 컨테이너는 완전한 타입으로 리팩터링해도 안전합니다.리팩터링에 안전하지 않은 유일한 것은 루트 내의 파라미터로HomeRouterProps인터페이스입니다.

타이프 타이핑의 컴파일 문제라고 생각합니다만, 회피책을 찾았습니다.

interface HomeProps extends RouteComponentProps<any>, React.Props<any> {
}

성냥, 이력 및 위치 소품을 컴포넌트에 적용하기 위한 적절한 사용법이 있는 것 같습니다.나는 당신의 체크인을 할 것이다.node_modules디렉토리: 어떤 버전의react-router그리고.react-router-dom가지고 있는 것뿐만 아니라@types모듈.

저는 기본적으로 당신과 같은 코드를 가지고 있으며, 제 코드는 다음과 같은 버전으로 동작하고 있습니다.

{
  "@types/react-router-dom": "^4.0.4",
  "react-router-dom": "^4.1.1",
}

이것은 Typescript 타이핑 문제입니다.withRouter()는 실행 시 필요한 라우팅 소품을 제공하기 때문에 소비자에게 다른 소품만 지정하면 된다는 것을 알려주고 싶습니다.이 경우 플레인 Component Class를 사용할 수 있습니다.

export default withRouter(connectModule) as React.ComponentClass<{}>;

또는 전달하고 싶은 다른 소품(Own Props라고 하는 인터페이스에 정의되어 있는 것)이 있는 경우는, 다음과 같이 할 수 있습니다.

export default withRouter(connectModule) as React.ComponentClass<OwnProps>;

여기에서는 조금 더 논의가 있습니다.

타이프스크립트 정의를 검색한 후RouteComponentProps이렇게 컨테이너를 모델링합니다.

type RouteParams = {
    teamId: string; // must be type string since route params
}

interface Props extends RouteComponentProps<RouteParams>, React.Props<RouteParams> { }

type State = {
    players: Array<Player>;
}

export class PlayersContainer extends React.Component<Props, State>{} 

이제 컴포넌트 클래스에서는 다음과 같이 루트 소품에 액세스할 수 있습니다.let teamid = this.props.match.params.teamId;

라몬의 답은 +1입니다.여기에서는 반드시 풀 타입의 커버리지를 받을 수 있습니다.To add - 라우터를 사용하여 콜을 추가했습니다.

interface FooProps extends RouteComponentProps<Foo> {
  foo: string;
}

const Foo = ({ history, foo }: FooProps) => <span/>;

const RoutedFoo = withRouter(Foo);

의존관계:

"@types/react-router-dom": "^4.3.0",
"typescript": "^2.9.2",

내가 이걸 하는 방법:

interface IOwnProps {
  style?: CSSProperties;
}

interface INavProps {
  item?: string;
}

type IProps = IOwnProps & RouteComponentProps<INavProps>;

export default class MapScreen extends PureComponent<IProps> {
  ...
}

언급URL : https://stackoverflow.com/questions/44118060/react-router-dom-with-typescript