webentwicklung-frage-antwort-db.com.de

Der Typ '{}' kann nicht dem Typ 'IntrinsicAttributes & IntrinsicClassAttributes' zugeordnet werden

ich mache gerade eine einfache Reaktionsanwendung. das ist mein 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();

und hier habe ich meinen 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;

und auch mein Suchleistencontainer:

    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;

und zum Schluss habe ich meinen 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"
  ]
}

Ich erhalte nach Fehlern immer wieder andere Fehler, und wenn ich einen Fehler behebe, erscheint ein anderer, ich bin nicht sicher, was ich getan habe, um es so zu machen ... Das ist der letzte Fehler:

./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 '{}'.

Ich habe versucht, das Problem durch Modifizieren meines tsconfig.json zu beheben, aber es wird immer noch derselbe Fehler angezeigt. Was mache ich falsch und warum TypeScript so läuft? Ich bin in diesem Bereich sehr neu und versuche an diesem Beispiel zu prüfen, wie die Reaktion insgesamt funktioniert.

7
S. N

Hatte gerade das gleiche Problem.

Sie haben einen als Member bezeichneten Begriff in der Prop-Schnittstelle für Ihre App-Klasse definiert, geben jedoch keinen Wert an, wenn Sie Ihr App-Element erstellen.

Versuche Folgendes:

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

Ich habe eine Menge von " nicht zuweisbaren" IntrinsicAttributes & IntrinsicClassAttributes "-Fehlertypen ( Microsoft closed issue ) nur durch gelöst Deklarieren eines Objekts, das vollständig an die Komponente übergeben wird.

Mit dem Beispiel des OP anstelle von term={this.props.term}, verwenden {...searchBarProps} damit es funktioniert:

render() {
  const searchBarProps = { // make sure all required component's inputs/Props keys&types match
    term: this.props.term
  }
  return (
    <div className="App">
      ...
      <div>
          <form>
          <SearchBar {...searchBarProps} />
          </form>
      </div>
    </div>
  );
}
1
CPHPython

Das Problem liegt hier nicht an Ihren TSLINT-Einstellungen. Sehen Sie sich das folgende Code-Snippet an:

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

In class SearchBar extends React.Component<SearchBarProps, SearchBarState> { geben SearchBarProps und SearchBarState den Typ der erwarteten Requisiten und den Zustandstyp für die Komponente SearchBar an. Bei der Verwendung von TypeScript müssen Sie propTypes und stateType angeben.
Sie können das Angeben von Typen vermeiden, indem Sie das Schlüsselwort any verwenden. Es wird jedoch dringend empfohlen, diesen "bösen" Pfad nicht zu befolgen, wenn Sie die Verwendung von TypeScript wirklich nutzen möchten. In Ihrem Fall hat es den Anschein, als hätten Sie die Art des Zustands nicht angegeben und verwendet, um das Problem zu beheben.

Bearbeiten 1
In der Schnittstelle SearchBarProps wird optionalArgument ein optionales Argument, wenn ein Fragezeichen ? davor eingefügt wird. Daher zeigt <SearchBar term='some term' /> keine Fehler, auch wenn Sie optionalArgument nicht explizit übergeben.
Hoffe, das löst dein Problem!

1
Swapnil

Ich hatte auch das gleiche Problem. Fügen Sie den folgenden Code hinzu, um mit .tsx-Komponenten zu arbeiten.

export interface Props {
  term: string;
}

oder

export type Props = {
  term ?: string;
}

Ich kenne den genauen Grund nicht, aber ich denke, dass TypeScript den Typfehler während der Kompilierungsphase kennzeichnet. Lassen Sie mich wissen, ob es bei Ihnen funktioniert.

0
niraj17