JSX (JavaScript XML) — это синтаксис, который позволяет писать разметку, похожую на HTML, в JavaScript и TypeScript. В контексте TypeScript существует несколько режимов обработки JSX, которые можно настроить в конфигурационном файле tsconfig.json. Давайте рассмотрим основные из них.

Режимы JSX в TypeScript

react:

Это режим, который компилирует JSX в вызовы React.createElement(), и является предпочтительным режимом для проектов, использующих React.

Пример:

{
  "compilerOptions": {
    "jsx": "react"
  }
}

react-jsx:

Этот режим был введен в React 17 и позволяет использовать JSX без необходимости импортировать React в файлы, где используется JSX. TypeScript автоматически вставит необходимые импорты за вас.

Пример:

{
  "compilerOptions": {
    "jsx": "react-jsx"
  }
}

react-jsxdev:

Этот режим используется преимущественно для разработки. Он похож на react-jsx, но включает дополнительные инструменты для отладки.

Пример:

{
  "compilerOptions": {
    "jsx": "react-jsxdev"
  }
}

preserve:

Этот режим сохраняет JSX в выходных файлах, что может быть полезно, если вы используете другие инструменты для обработки JSX, такие как Babel.

Пример:

{
  "compilerOptions": {
    "jsx": "preserve"
  }
}

none:

Этот режим отключает поддержку JSX.

Пример:

{
  "compilerOptions": {
    "jsx": "none"
  }
}

Пример использования

Ниже представлен простой пример использования режима react в компоненте React:

// src/components/MyComponent.tsx
import React from 'react';

const MyComponent: React.FC = () => {
  return <div>Hello, world!</div>;
};

export default MyComponent;

И ваш tsconfig.json может выглядеть примерно так:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "jsx": "react",
    "strict": true,
    "esModuleInterop": true
  }
}

Заключение

Выбор подходящего режима JSX в TypeScript зависит от ваших нужд и используемой библиотеки. Если вы работаете с React, react-jsx или react чаще всего будут лучшими выборами. И не забывайте о том, что изменение режима может повлиять на то, как ваш код компилируется и работает, поэтому стоит тщательно выбирать подходящий для вашего проекта режим.

Предыдущий вопрос

Расскажите о JSX в TypeScript

Следующий вопрос

Что такое оператор типа keyof в TypeScript?

Содержание:

Режимы JSX в TypeScript

Пример использования

Заключение

Редактировать