web-dev-qa-db-fra.com

Le type '{}' n'est pas assignable au type 'IntrinsicAttributes & IntrinsicClassAttributes

je suis en train de faire une simple application de réaction. c'est mon index.tsx

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './components/App';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(
  <App />,
  document.getElementById('root') as HTMLElement
);
registerServiceWorker();

et ici j'ai mon app.tsx

    import * as React from 'react';
import SearchBar from '../containers/price_search_bar';

interface Props {
  term: string;
}

class App extends React.Component<Props> {

  // tslint:disable-next-line:typedef
  constructor(props) {
    super(props);
    this.state = {term: '' };
  }

  render() {
    return (
      <div className="App">
        <div className="App-header">
          <h2>Welcome to React</h2>
        </div>
        <p className="App-intro">
          this is my application.
        </p>
        <div>
            <form>
            <SearchBar term={this.props.term} />
            </form>
        </div>
      </div>
    );
  }
}

export default App;

et aussi mon conteneur barre de recherche:

    import * as React from 'react';

interface Props {
    term: string;
}

// tslint:disable-next-line:no-any
class SearchBar extends  React.Component<Props> {

    // tslint:disable-next-line:typedef
    constructor(props) {
        super(props);
        this.state = { term: '' };
    }

    public render() {
        return(
            <form>
                <input 
                    placeholder="search for base budget"
                    className="form-control"
                    value={this.props.term}
                />
                <span className="input-group-btn" >
                    <button type="submit" className="btn btn-secondary" >
                        Submit
                    </button>
                </span>

            </form>
        );
    }
}

export default SearchBar;

et enfin j'ai mon tsconfig.json:

{
  "compilerOptions": {
    "outDir": "build/dist",
    "module": "esnext",
    "target": "es5",
    "lib": ["es6", "dom"],
    "sourceMap": true,
    "allowJs": true,
    "jsx": "react",
    "moduleResolution": "node",
    "rootDir": "src",
    "forceConsistentCasingInFileNames": true,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noImplicitAny": false,
    "strictNullChecks": true,
    "suppressImplicitAnyIndexErrors": true,
    "typeRoots": [
      "node_modules/@types"
    ],
    "noUnusedLocals": true
  },
  "exclude": [
    "node_modules",
    "build",
    "scripts",
    "acceptance-tests",
    "webpack",
    "jest",
    "src/setupTests.ts"
  ]
}

Je continue à avoir des erreurs différentes après les erreurs et chaque fois que je corrige une erreur, une autre en apparaît, je ne suis pas sûr de ce que j'ai fait pour que cela se comporte comme ceci .

./src/index.tsx
(7,3): error TS2322: Type '{}' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<App> & Readonly<{ children?: ReactNode; }> & Reado...'.
  Type '{}' is not assignable to type 'Readonly<Props>'.
    Property 'term' is missing in type '{}'.

J'ai essayé de le réparer en modifiant mon tsconfig.json, mais la même erreur persiste, qu'est-ce que je fais de travers et pourquoi TypeScript est comme ça. Je suis très nouveau dans ce domaine et par cet exemple, j'essaie de comprendre comment réagir réagit tous ensemble.

jsonreactjstypescript
7
S. N

Juste eu ce même problème.

Vous avez un membre appelé terme défini sur l'interface Prop pour votre classe App, mais vous ne fournissez pas de valeur lorsque vous créez votre élément App.

Essayez ce qui suit:

ReactDOM.render(<App term="Foo" />, document.getElementById('root') as HTMLElement);
1
Stephen Hewison

Le problème ici ne vient pas de vos paramètres tslint. Regardez l'extrait de code suivant:

interface SearchBarProps {
  term: string;
  optionalArgument?: string;
}

interface SearchBarState{
  something: number;
}

class SearchBar extends React.Component<SearchBarProps, SearchBarState> {
  constructor(props: SearchBarProps){
    super(props);

    this.state = {
      something: 23
    };
  }

  render() {
    const {something} = this.state;
    return (
      <div>{something}</div>
    )
  }
}

Dans class SearchBar extends React.Component<SearchBarProps, SearchBarState> {, SearchBarProps et SearchBarState désignent respectivement le type d'accessoires attendus et le type d'état pour le composant SearchBar. Vous devez donner propTypes et stateType lorsque vous utilisez TypeScript.
Vous pouvez éviter de donner des types en utilisant le mot clé any, mais je vous suggère fortement de ne pas suivre ce chemin "diabolique" si vous voulez vraiment tirer parti de TypeScript. Dans votre cas, il semble que vous n'ayez pas spécifié le type d'état et que vous l'ayez utilisé, ce qui résoudra le problème.

Modifier 1
Dans l'interface SearchBarProps, optionalArgument devient un argument facultatif, car nous ajoutons un point d'interrogation ? devant celui-ci. Par conséquent, <SearchBar term='some term' /> ne montrera aucune erreur même si vous ne transmettez pas explicitement optionalArgument.
J'espère que ceci résoudra votre problème!

1
Swapnil