Настройки 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 — локальная установка не требуется.
Все уроки этого курса
- Флаги строгости
- Настройки target, lib, module и JSX
- Ссылки на проекты (введение)