У JSX-тега есть дочерний элемент, но VSCode сообщает, что в подпрограммах отсутствует свойство `children`

Question

У меня очень простая установка TypeScript / React / TSX, но следующий фрагмент кода показывает ошибку:

import React from 'react';
import Layout from '../components/Layout';

export default function Index() {
    return (
        <Layout>
            <div>Hello world</div>
        </Layout>
    );
}

Тег <Layout [...]> подчеркнут красным, говоря: Property 'children' is missing in type '{}' but required in type 'LayoutProps'.ts(2741).

Действительно, для реквизита (LayoutProps) компонента Layout требуются дочерние элементы:

export interface LayoutProps {
    children: React.ReactNode;
}

Однако, как вы видите в первом фрагменте, на самом деле есть дочерний элемент, a <div/>. Я пытаюсь выяснить, почему он не "обнаружен" TypeScript.

Если я определю опору children в качестве атрибута JSX, как в <Layout children={null} />, ошибка исчезнет, ​​как если бы я мог определять только детей, используя этот синтаксис.

Я использую TypeScript v3.7.4 с базовым c React / Next JS -дружественным tsconfig. json.

Answer 1

Я использовал npm -update-all , чтобы убедиться, что все обновлено, и это исправило мою проблему. Проект был новым, поэтому я ранее предполагал, что npm установит зависимости "fre sh", но, судя по всему, это не так.

Answer 2

Как вы набираете реквизиты компонента Layout? Это должно работать без ошибок машинописи.

Layout.tsx

import React from "react";

interface Props {
  children: React.ReactNode;
}

export const Layout = ({ children }: Props) => {
  return <div>{children}</div>;
};

Index.tsx

import React from "react";
import { Layout } from "./Layout";

export default function Index() {
  return (
    <Layout>
      <div>Hello world</div>
    </Layout>
  );
}