0Pricing
TypeScript Academy · Урок

Настройки target, lib, module и JSX

Выбирайте подходящие target и lib для генерируемого JS и доступных глобальных сущностей; настраивайте module и JSX в соответствии со средой выполнения и сборщиком.

«Настройки target, lib, module и JSX» — бесплатный урок TypeScript Academy на CoddyKit. Это урок 2 из 3. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения TypeScript Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс TypeScript Academy содержит 3 уроков всего.

Введение

Цель: выбрать подходящие целевой уровень (вывод JS), библиотеки (глобальные объявления), модуль (форма import/export) и стратегию JSX для приложения.

Параметр target

target задаёт версию ECMAScript для создаваемого JS (например, ES2018 или ES2020). Выбирайте самую низкую версию, которую поддерживает среда выполнения.

// tsconfig.json (excerpt)
{
  "compilerOptions": {
    "target": "ES2020"
  }
}

// TS may downlevel features based on target
const n = 10n; // BigInt requires ES2020+

Параметр lib

lib определяет, объявления типов каких глобальных объектов будут включены (например, ES2020, DOM, WebWorker).

// tsconfig.json (excerpt)
{
  "compilerOptions": {
    "lib": ["ES2020", "DOM"]
  }
}

// Now Promise, fetch, and DOM globals are typed if included

Параметр module

module задаёт систему модулей (CommonJS, ESNext, NodeNext и другие). Согласуйте её с требованиями Node или сборщика.

// tsconfig.json (excerpt)
{
  "compilerOptions": {
    "module": "ESNext"
  }
}

// ESM example
import { join } from "path";
export const p = join("a", "b");

Параметр jsx

jsx выбирает способ преобразования JSX в TS (react, react-jsx, preserve). Выберите вариант, которого ожидает ваш фреймворк или сборщик.

// React 17+ recommended
// tsconfig.json (excerpt)
{
  "compilerOptions": {
    "jsx": "react-jsx"
  }
}

// JSX files compile to React 17 runtime helpers (no need for import React)

Предустановки

Используйте предустановки, соответствующие вашему стеку. Веб-приложениям нужен DOM; проекты Node обычно не включают его и выбирают NodeNext для модулей.

// Web app (Vite/React)
{
  "compilerOptions": {
    "target": "ES2020",
    "lib": ["ES2020", "DOM"],
    "module": "ESNext",
    "jsx": "react-jsx"
  }
}

// Node (ESM)
{
  "compilerOptions": {
    "target": "ES2020",
    "lib": ["ES2020"],
    "module": "NodeNext"
  }
}

Проверка параметра lib

Быстрая проверка: что определяет параметр lib?

Повторение

Повторение: target ⇒ уровень создаваемого JS; lib ⇒ доступные глобальные объекты; module ⇒ форма import/export; jsx ⇒ режим преобразования JSX.

Часто задаваемые вопросы

Урок «Настройки target, lib, module и JSX» бесплатный?

Да — полный текст урока «Настройки target, lib, module и JSX» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс TypeScript Academy, подпишись на CoddyKit PRO. Курс TypeScript Academy содержит 3 уроков всего.

Чему я научусь в уроке «Настройки target, lib, module и JSX»?

Выбирайте подходящие target и lib для генерируемого JS и доступных глобальных сущностей; настраивайте module и JSX в соответствии со средой выполнения и сборщиком. Ты практикуешь TypeScript Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать TypeScript Academy?

Предыдущий опыт не требуется. TypeScript Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 3.

Сколько времени занимает урок «Настройки target, lib, module и JSX»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке TypeScript Academy?

Да. Каждый урок TypeScript Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Флаги строгости
  2. Настройки target, lib, module и JSX
  3. Ссылки на проекты (введение)
← Назад к TypeScript Academy