web-dev-qa-db-ja.com

タイプ '{}'は、タイプ 'IntrinsicAttributesおよびIntrinsicClassAttributesに割り当てることができません

私は現在、単純な反応アプリケーションを作成しています。これは私の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();

ここに私の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;

また、私の検索バーコンテナ：

    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;

そして最後に私の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"
  ]
}

エラーの後、さまざまなエラーが発生し続け、1つのエラーを修正するたびに別のエラーが表示されます。これは最新のエラーです。

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

tsconfig.jsonを変更して修正しようとしましたが、同じエラーが表示されます。何が間違っているのか、なぜTypeScriptがこのように動いているのですか。私はこれに非常に新しく、この例によって、反応がどのようにすべて一緒に機能するかを判断しようとしています。

jsonreactjstypescript
14
S. N

これと同じ問題が発生しました。

AppクラスのPropインターフェイスで定義されたtermというメンバーがありますが、App要素を作成するときに値を提供していません。

以下を試してください：

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

ここでの問題は、tslintの設定にありません。次のコードスニペットを見てください。

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

class SearchBar extends React.Component<SearchBarProps, SearchBarState> {で、SearchBarPropsとSearchBarStateはそれぞれ、コンポーネントSearchBarの予想される小道具のタイプと状態のタイプを示します。 TypeScriptを使用する場合は、propTypesとstateTypeを指定する必要があります。
キーワードanyを使用して型を指定することを避けることができますが、TypeScriptの使用を本当に活用したい場合は、この「悪」のパスをたどらないことを強くお勧めします。あなたの場合、状態のタイプを指定して使用していないようです。それを修正すると、この問題が解決します。

編集1
インターフェイスSearchBarPropsで、?の前に疑問符<SearchBar term='some term' />を追加すると、optionalArgumentはオプションの引数になります。 optionalArgumentを明示的に渡さない場合でもエラーが発生します。
これで問題が解決することを願っています！

2
Swapnil

私は多くの「「IntrinsicAttributes＆IntrinsicClassAttributes」タイプに割り当てられない」タイプのエラー（ Microsoftが発行した問題 ）を解決しましたコンポーネントに完全に渡されるオブジェクトを宣言します。

OPの例では、term={this.props.term}を使用する代わりに、{...searchBarProps}を使用して動作させます。

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

私も同じ問題に直面しました。以下のコードを追加して、.tsxコンポーネントを操作します。

export interface Props {
  term: string;
}

または

export type Props = {
  term ?: string;
}

正確な理由は分かりませんが、TypeScriptはコンパイル段階で型エラーにフラグを立てると思います。うまくいくかどうか教えてください。

0
niraj17