TypeScript 2.3에서 새로 추가된 지원을 사용하여 TypeScript에서 반응 어린이 유형을 어떻게 제한하십니까?

TypeScript 2.3에서 새로 추가된 지원을 사용하여 TypeScript에서 반응 어린이 유형을 어떻게 제한하십니까?

나는 최근에 추가된 TypeScript 컴파일러와 @type/react에 있는 아이들의 타이핑에 대한 지원을 이용하려고 하지만, 어려움을 겪고 있다.나는 TypeScript 버전 2.3.4를 사용하고 있다.

내가 이런 코드를 가지고 있다고 말해봐:

interface TabbedViewProps {children?: Tab[]}
export class TabbedView extends React.Component<TabbedViewProps, undefined> {

  render(): JSX.Element {
    return <div>TabbedView</div>;
  }
}

interface TabProps {name: string}
export class Tab extends React.Component<TabProps, undefined> {
  render(): JSX.Element {
    return <div>Tab</div>
  }
}

다음과 같은 구성 요소를 사용하려고 할 때:

return <TabbedView>
  <Tab name="Creatures">
    <div>Creatures!</div>
  </Tab>
  <Tab name="Combat">
    <div>Combat!</div>
  </Tab>
</TabbedView>;

다음과 같은 오류가 발생한다.

ERROR in ./src/typescript/PlayerView.tsx
(27,12): error TS2322: Type '{ children: Element[]; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<TabbedView> & Readonly<{ children?: ReactNode; }> ...'.
  Type '{ children: Element[]; }' is not assignable to type 'Readonly<TabbedViewProps>'.
    Types of property 'children' are incompatible.
      Type 'Element[]' is not assignable to type 'Tab[] | undefined'.
        Type 'Element[]' is not assignable to type 'Tab[]'.
          Type 'Element' is not assignable to type 'Tab'.
            Property 'render' is missing in type 'Element'.

그것은 단지 아이들의 유형을 유추하고 있는 것 같다.Element[]대신에Tab[]그게 내가 사용하는 유일한 타입의 아이인데도 말이야

편집: 어린이 부품에서 특정 소품을 꺼내면 되기 때문에 어린이 부품 유형을 직접 제한하는 대신 어린이 소품의 인터페이스를 제한하는 것도 괜찮을 것 같아.

편집 2: 이 접근방식으로 인해 경고가 차단되지만 코멘트에 따르면TabProps제대로 점검되지 않았다.

TabbedViewProps 인터페이스의 하위 항목을 다음과 같이 설정하십시오.

interface TabbedViewProps { children?: React.ReactElement<TabProps>[] }

여기서의 생각은 당신의 생각을 말하지 않는 것이다.TabbedView의 종류가 있다.Tab, 그러나 그대신 그대에게 말한다.TabbedView그는 일련의element특정한 소품들이 필요하거든당신의 경우TabProps.

편집(tx to Matei ):

interface TabbedViewProps {
    children?: React.ReactElement<TabProps>[] | React.ReactElement<TabProps>
}

포인터가 이미 나간 경우, 선언TabbedView.children다음과 같이.

children: React.ReactElement<TabProps> | React.ReactElement<TabProps>[];

오류는 없앨 수 있겠지만 아이들을 제대로 타이핑하지 못할 겁니다.즉, 당신은 여전히 다른 아이들을 합격시킬 수 있을 것이다.TabProps로TabbedView아무런 오류도 발생하지 않으므로 이 또한 유효하다.

return (
  <TabbedView>
    <Tab name="Creatures">
      <div>Creatures!</div>
    </Tab>

    <Tab name="Combat">
        <div>Combat!</div>
    </Tab>

    <NotTabButValidToo />
  </TabbedView>
);

대신 할 수 있는 일은 소품을 선언하는 것이다, 라고 하자.tabs: TabProps[], 이러한 소품을 만드는 데 필요한 소품을 전달하기 위해Tab 것이다.TabbedView:

interface TabbedViewProps {
  children?: never;
  tabs?: TabProps[];
}

...

const TabbedView: React.FC<TabbedViewProps > = ({ tabs }) => {
  return (
    ...

    { tabs.map(tab => <Tab key={ ... } { ...tab } />) }

    ...
  );
};

나는 그 유형을 주장하려고 노력했다.던질 수도 있고 그냥 무시할 수도 있다.

interface TabbedViewProps {
  children?: React.ReactElement<ITabProps> | React.ReactElement<ITabProps>[]
}

그리고 구성 요소 자체에서 아이들을 지도하고 단언하거나 무시한다.

{React.Children.map(props.children, (tab) => {
  if(tab?.type != Tab) return;
  console.log(tab?.type == Tab);
  return tab;
})}

탭 렌더 방법으로 반환할 유형은 JSX입니다.요소.이것이 너의 문제를 야기하는 것이다.TabbedView는 Tab 유형을 가진 자식 배열을 기다리고 있다.특정 구성요소를 자식 유형으로 지정할 수 있는지 모르겠다.그것은 끈이나 JSX일 수 있다.요소.탭의 정의 파일을 보여주시겠습니까?

JSX에 대한 자세한 내용은 https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/index.d.ts을 참조하십시오.요소 인터페이스 모양

참조URL: https://stackoverflow.com/questions/44475309/how-do-i-restrict-the-type-of-react-children-in-typescript-using-the-newly-adde