유형 '{}'은 유형 'IntrinsicAttributes & IntrinsicClassAttributes'에 할당할 수 없습니다.

유형 '{}'은 유형 '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"
  ]
}

에러 후에 다른 에러가 계속 발생하는데, 에러를 수정하면 에러가 하나 더 표시될 때마다, 무엇을 했기에 이렇게 동작하고 있는지 잘 모르겠습니다.다음은 최신 오류입니다.

./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하지만 내가 뭘 잘못했는지, 왜 타이프스크립트가 이렇게 뜨는지 같은 오류가 여전히 나타납니다.나는 이것을 매우 처음 접하며 이 예시를 통해 어떻게 반응하는지를 설명하려고 한다.

컴포넌트에 완전히 전달된 오브젝트를 선언하는 것만으로 "IntrinsicAttributes & IntrinsicClassAttributes & IntrinentClassAttributes" 타입의 에러(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>
  );
}

컴포넌트 타입을 올바르게 선언하고 소품 타입을 포함하기만 하면 됩니다.

interface IMyProps {
    myValue: boolean,
}

const MyComponent: React.FC<IMyProps> = (props: IMyProps) => {
    ...
}

export default MyComponent;

다음으로 다음과 같이 사용할 수 있습니다.

import MyComponent from '../MyComponent';

...

return <MyComponent myValue={true} />

그리고 타이프 스크립트는 행복합니다.좋은 점은 타이프 스크립트가 현재 소품 인터페이스에 실제로 존재하는 파라미터만 전달하는지 확인하는 것입니다(오타 방지 등).

표준 컴포넌트의 경우 다음과 같습니다(Swapnill의 예에 이미 포함되어 있는 것).

class MyComponent extends React.Component<IMyProps, IMyState>{
    constructor(props: IMyProps){}
}
export default MyComponent;

여기서의 문제는, 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각각 다음과 같다.을 지정해야 .라고 입력합니다.타이프스크립트를 사용할 때 입력합니다.
유형을 지정하지 를 사용하면 .any하지만 정말로 타이프스크립트를 이용하고 싶다면 이 '악의' 길을 따르지 말 것을 강력히 권한다.당신의 경우 상태 유형을 지정하지 않고 사용하고 있는 것 같습니다.이 문제를 해결할 수 있습니다.

1 집 11
in in interface " " " 。SearchBarProps,optionalArgument.?에서는, , in in in 、 러 、 니 、 니 、 。<SearchBar term='some term' />optionalArgument명쾌하게
!!으!!!!!!!!!!!!

나도 똑같은 문제가 있었어

앱 클래스에 대해 Prop 인터페이스에 정의된 멤버라는 용어가 있지만 앱 요소를 만들 때 값을 제공하지 않습니다.

다음을 시도해 보십시오.

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

저는 별로 자랑스럽지는 않지만, 이 분야의 다른 해결책을 고려하면 충분히 공정한 것 같습니다.

다음 예시는 의 커스텀버전을 나타내고 있습니다.@react-native-community/slider일부 기본 속성이 있지만 외부에서 수신(및 덮어쓰기)할 수 있습니다.

function CustomSlider(props: SliderProps) {
  return (
    <Slider
      style={{ width: '100%', height: 40, marginTop: 12 }}
      minimumValue={0}
      minimumTrackTintColor="#000000"
      maximumTrackTintColor="#000000"
      {...(props as any)}
    />
  );
}

나도 같은 문제에 직면했다..tsx 컴포넌트를 사용하려면 아래 코드를 추가하십시오.

export interface Props {
  term: string;
}

또는

export type Props = {
  term ?: string;
}

정확한 이유는 알 수 없지만, 컴파일 단계에서 typescript가 type 오류에 플래그를 붙였다고 생각합니다.당신에게 효과가 있는지 알려주세요.

다소 엉뚱한 답변인 것은 알지만 Vue3 어플리케이션에서는 전달된 소품이 없어도 컴포넌트에 소품 속성을 할당함으로써 오류를 재현할 수 있습니다.

export default defineComponent({ props:{} .... })

소품 속성을 제거하는 것만으로 컴파일러는 더 이상 불평하지 않습니다.

문제는 인터페이스를 내보내는 것이 아니라 인터페이스 소품을 내보내는 것입니다.그래서:

export interface Props {
  term: string;
}

그것이 해결책이다.

Volar가 내 Vue 3 컴포넌트에서 유사한 오류를 일으키고 있기 때문에 나는 계속 여기에 도착한다.해결책은 항상 소품용 오브젝트를 반납하고 비우는 것입니다.왜냐하면 제 컴포넌트 템플릿에는 편의상 오브젝트가 있지만 사용하지 않았기 때문입니다.

컴포넌트가 사용되는 경우:

<template>
    <div>
        <MyComponent/> <!-- Squiggly error here -->
    </div>
</template>

컴포넌트:

export default defineComponent({
    name: 'MyComponent',
    components: {},
    props: {}, // Remove this
    setup() {
        return {};
    },
});

나처럼 눈이 멀면 다음과 같은 상황에 부딪힐 수 있다.
대신:

interface TimelineProps {
    width: number;
}

const Timeline: FC = (props: TimelineProps) => {
... 

작업:

const Timeline: FC<TimelineProps> = (props: TimelineProps) => {
                        ^^^

기능 컴포넌트의 경우 이 구문은 React 없이 이 오류를 해결합니다.FC 보일러 플레이트:

interface FooProps {
  foo: FooType
}

function FooComponent({ foo }: FooProps): ReactElement {
  ...
}

컴포넌트의 경우 컴포넌트를 다음과 같이 작성했기 때문일 수 있습니다.

    <ClearButton 
        text={"Clear board"} 
        isAnimationInProgress={isAnimationInProgress}
        callSetOptionMethod={clearBoard}
     >
     // empty space here
    </ClearButton>

이것 대신:

    <ClearButton 
        text={"Clear board"} 
        isAnimationInProgress={isAnimationInProgress}
        callSetOptionMethod={clearBoard}
    ></ClearButton>

저는 단순히 아이 컴포넌트 타입을 React에서 변경했을 뿐입니다.FC에서 JSX로요소

이전(경고)

const Component: React.FC = () => {

After (경고 없음)

const Component = (): JSX.Element => {

그냥 지나가는 소품들을 펼치세요.searchval}. 및 컴포넌트에서 소품을 사용하여 원래 유형의 검색값을 할당합니다.이거면 될 것 같아

언급URL : https://stackoverflow.com/questions/48240449/type-is-not-assignable-to-type-intrinsicattributes-intrinsicclassattribu