Создание компонента высшего порядка (HOC) с помощью TypeScript

Question

Я пытаюсь определить компонент более высокого порядка, используя TypeScript, и получаю странные ошибки.

Я попытался просмотреть определения типа реакции, чтобы понять проблему, но безуспешно.

Приведенный ниже код является частью приложения реагирования, созданного с помощью команды 'create-реагировать-приложение' - 'создать-реакция-приложение hoc --typescript'

import React from 'react';

const wrapper = (ChildComponent:React.ComponentType) => {

  const ComposedComponent:React.FC = ():JSX.Element => {

      return (
        // The line below results in the error - 'Type 'boolean' is not assignable to type 'Element'.ts(2322)'
        <div>Hello</div> 

      );
  };

  return ComposedComponent;

};

Вот мой файл tsconfig.json -

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react"
  },
  "include": [
    "src"
  ]
}

Вот ошибка машинописи, когда я запускаю приложение -

Unterminated regular expression literal.  TS1161

    3 | const wrapper = (ChildComponent: React.ComponentType) => {
    4 |   const ComposedComponent: React.FC = (): JSX.Element => {
  > 5 |     return <div>Hello</div>;
      |                        ^
    6 |   };
    7 | 
    8 |   return ComposedComponent;

Я не понимаю, почему фрагмент JSX разрешен как логический с помощью Typescript. Что я тут не так делаю?

Answer 1

Это было глупо. Похоже, использовать JSX расширение файла должно 'tsx'. Мой был "тс". Я изменил расширение на «tsx», и ошибка исчезла. Супер расстраивает.

Спасибо всем!

Я не понял, как передать опору обертке и, в конечном счете, ChildComponent