바인딩 요소 'children'을 수정하려면 암시적으로 'any' type.ts(7031)를 사용합니다.

바인딩 요소 'children'을 수정하려면 암시적으로 'any' type.ts(7031)를 사용합니다.

유형 검증을 추가하는 방법에 대한 유효성 검사에서 누락된 것이 있습니다."element 'children'에는 암묵적으로 '임의' 유형이 있습니다."라는 오류가 있습니다.

import * as React from 'react';
import Button from './Styles';

const Button1 = ({ children, ...props }) => (
  <Button {...props}>{children}</Button>
);

Button1.propTypes = {};

export default Button1;

2022년 편집: 리액트 18을 사용하면 FC는 더 이상 하위 기능을 제공하지 않으므로 사용자가 직접 입력해야 FC를 삭제할 수 있습니다.

import React, { ReactNode } from "react";

interface Props {
    children?: ReactNode
    // any props that come into the component
}

const Button1 = ({ children, ...props }: Props) => (
    <Button {...props}>{children}</Button>
);

네, 프로포츠 전체의 타입이 누락되어 있습니다.즉, 타이프 스크립트는 그것을 다음과 같이 인식합니다.any그리고 당신의 ts 규칙은 그것을 허용하지 않습니다.

다음과 같이 소품을 입력해야 합니다.

import React, { FC } from "react";

interface Props {
    // any props that come into the component
}

const Button1: FC<Props> = ({ children, ...props }) => (
    <Button {...props}>{children}</Button>
);

이것은 나에게 큰 문제였고 나는 올바른 해결책을 찾는데 많은 시간을 낭비했다.지금은 하위 도구에 오류가 있지만 앞으로는 매개 변수를 파괴하는 많은 함수에 대해 이 오류가 발생할 수 있습니다.그래서 저는 이 GitHub 문제를 따라가는 것을 제안합니다.

const yourfunc = ({destructuredProps}: {destructuredProps: type}) => {}

다음과 같이 미리 정의된 유형을 기능 구성 요소에 추가할 수도 있습니다.

const Button1: React.FC<{}>  = ({ children }) => (
    <Button>{children}</Button>
);

이렇게 하면, 그 정의를 반복할 필요가 없습니다.children소품

풀 버전은 다음과 같습니다.

interface Props {
// any other props that come into the component, you don't have to explicitly define children.
}

const Button: React.FC<Props> = ({ children, ...props }) => {
  return (
      <Button {...props}>{children}</Button>
  );
};

React 16.8에서는 동작합니다.

또 다른 방법으로 기본 제공 범용 유형인 "React"를 사용할 수 있습니다.어린이용 소품"을 준비했습니다.매우 짧은 코드는 다음과 같습니다.

import React from "react";
import Button from "./Styles";

type MyComponentProps = React.PropsWithChildren<{}>;

export default function MyComponent({ children, ...other}: MyComponentProps) {
  return <Button {...other}>{children}</Button>;
}

타입도 사용할 수 있습니다.

type ButtonProps = {
    children: ReactNode;
    
}

const Button = ({ children }: ButtonProps) => (
    <button>{children}</button>
);

컴포넌트 소품 인터페이스를 확장하여React.HTMLAttributes추가 설정 없이 표준HTML Atribute를 사용할 수 있기 때문입니다.

interface Button1Props extends React.HTMLAttributes<Element> {
  // add any custom props, but don't have to specify `children`
}

const Button1 = ({ children, ...props }: Button1Props) => (
    <Button {...props}>{children}</Button>
)

강제하고 싶은 경우children소품 인터페이스에서 이를 재정의하여 제공할 수 있습니다.

interface Button1Props extends React.HTMLAttributes<Element> {
  children: React.ReactNode
  // add any custom props, but don't have to specify `children`
}

const Button1 = ({ children, ...props }: Button1Props) => (
    <Button {...props}>{children}</Button>
)

에러를 막기 위해서도, 이것을 실행해 주세요: children: React.React Node;

export interface props {
    children?: React.ReactNode; }

const Screen = ({ children }: props) => {
    return (
        <div style={{ margin: '2%' }}>
            {children}
        </div>
    ); };

export default Screen;

이 오류는 변수의 유형을 명시적으로 정의함으로써 수정할 수 있습니다( ).children이 경우)를 암묵적으로 추론하도록 방치하지 않는다.

TypeScript를 사용하여 오류를 완전히 중지할 수 있습니다.--noImplicitAny 컴파일러 옵션

'아무거나'가 필요하니까!

const Button1 = ({ children, ...props } : any)

유형을 보존하려면 기능에서 처리하십시오.

제가 찾았고 공유하고 싶었지만 아마도 매우 인상깊을 답변 중 하나는skipLibCheck로.true당신의 안에서tsconfig.json의 범위 내에서compilerOptions오브젝트를 지정하면 문제가 무시됩니다.

주의사항으로 이 규칙을 추가할 때 무엇을 하고 있는지 확인하십시오.이에 대한 좋은 기사는 https://www.testim.io/blog/typescript-skiplibcheck/에 있습니다.

언급URL : https://stackoverflow.com/questions/55370851/how-to-fix-binding-element-children-implicitly-has-an-any-type-ts7031