J'essaie de créer une application React en TypeScript en utilisant redux et react-router-dom. J'ai rencontré des problèmes de frappe lorsque j'ai ajouté redux à mon application. J'ai donc créé l'exemple minimal suivant avec une seule page de test :
App.jsx
import * as React from 'react';
import { Route, Redirect } from 'react-router-dom'
import Test from './containers/test-page'
import './App.css';
class App extends React.Component {
render() {
return (
<div className="ui container" id="main">
<Route exact path="/" render={() => <Redirect to="/test" />}/>
<Route exact path="/test" component={Test} />
</div>
);
}
}
export default App;
Le conteneur de la page de test ressemble à ceci. Il produit une erreur de frappe dans l'appel à connect .
conteneurs/page-test/index.tsx
import { Dispatch } from 'redux'
import { connect } from 'react-redux'
import TestPage from './test-page'
function mapDispatchToProps(dispatch: Dispatch<any>) {
return dispatch({ type: 'ALERT_USER' });
}
function mapStateToProps(state: any) {
return { label: 'my test label' }
}
export default connect(
mapStateToProps,
mapDispatchToProps
)(TestPage)
Le conteneur utilise le composant React suivant, qui en production doit afficher une page pour le routeur. Cela produit deux erreurs, voir ci-dessous.
conteneurs/page-test/page-test.tsx
import * as React from 'react';
export namespace Test {
export interface Props {
alert: () => void;
label: string;
}
export interface State {
}
}
export default class TestPage extends React.Component {
constructor(props?: Test.Props, state?: Test.State, context?: any) {
super(props, context);
}
sendAlert = () => {
this.props.alert()
}
render() {
return (
<div>
<h1>Test</h1>
<button onClick={this.sendAlert}>{this.props.label}</button>
</div>
);
}
}
proxyConsole.js:54 ./src/containers/test-page/test-page.tsx
(20,18): error TS2339: Property 'alert' does not exist on type 'Readonly<{ children?: ReactNode; }> & Readonly<{}>'.
proxyConsole.js:54 ./src/containers/test-page/test-page.tsx
(27,54): error TS2339: Property 'label' does not exist on type 'Readonly<{ children?: ReactNode; }> & Readonly<{}>'.
proxyConsole.js:54 ./src/containers/test-page/index.tsx
(16,3): error TS2345: Argument of type 'typeof TestPage' is not assignable to parameter of type 'ComponentType<{ label: string; } & { type: string; }>'.
Type 'typeof TestPage' is not assignable to type 'StatelessComponent<{ label: string; } & { type: string; }>'.
Type 'typeof TestPage' provides no match for the signature '(props: { label: string; } & { type: string; } & { children?: ReactNode; }, context?: any): ReactElement<any> | null'.
J'ai essayé de suivre différents guides et j'ai recherché des exemples d'implémentations, mais je n'ai pas pu résoudre ces problèmes. Je ne comprends pas les messages d'erreur du compilateur TypeScript:
this.props
quand je les ai définis?Deux choses que je remarque:
1) Pour autant que je l'ai vu dans les exemples et lorsque vous travaillez avec props
dans TypeScript, votre appel à React.Component
doit spécifier Props
comme argument de type comme ceci:
export default class TestPage extends React.Component<Test.Props, Test.State>{
constructor(props: Test.Props) {
super(props);
}
}
Vous pouvez spécifier que votre composant n'accepte pas props
ou state
en passant des interfaces vides, à savoir:
export default class TestPage extends React.Component<{}, {}>{
// constructor becomes 'useless' at this point and is not needed
constructor() {
super();
}
}
Je pense que cela explique pourquoi votre signature d'appel ne correspond pas et pourquoi aucune propriété n'est visible sur this.props
- TS voit une interface de ReadOnly{}
car aucun argument de type n'a été transmis.
2) Votre fonction mapStateToProps
ne semble pas tout à fait correcte. mapStateToProps
prend deux arguments, state
(référençant votre Redux store
) et ownProps
comme deuxième argument optionnel, qui fait référence à props
passé vers le bas du parent. Donc mapStateToProps
devrait ressembler à ceci:
function mapStateToProps(state: any, ownProps: { label: string }) {
return {
label: ownProps.label
};
}
Ceci est ma supposition pour laquelle connect
génère une erreur - c'est simplement un endroit où vous faites des affirmations sur la façon dont Redux doit gérer la combinaison de props
provenant des store
et props
provenant du parent. Faites-moi savoir si cela fonctionne.
Cela ne fonctionne pas car connect est une fonction générique. Cela signifie que vous devez fournir des paramètres de type supplémentaires.
connect<StateProps, DispatchProps>({
mapStateToProps,
mapDispatchToProps,
})(SomeComponent);
Vous pouvez trouver l'implémentation de frappe ici . Tout ce que vous devez savoir est là C:
La variante de syntaxe de travail pour l'application de script de type est:
import * as React from 'react';
import { connect } from 'react-redux';
import { withRouter } from 'react-router-dom';
class MyComponentName extends React.Component<any, any> {
constructor(props: any) {
super(props);
}
}
export default withRouter(
connect(
mapStateToProps
)(MyComponentName) as any
);
ou:
export default withRouter(
connect<any, any>(
mapStateToProps
)(MyComponentName) as any
);