Target, lib, module, JSX settings
Choose proper target/lib for emitted JS and available globals; set module and JSX to match your runtime/bundler.
Target, lib, module, JSX settings is a free TypeScript Academy lesson on CoddyKit — lesson 2 of 3. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the TypeScript Academy learning path, one of 3 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Intro
Goal: Pick the right target (JS output), lib (ambient globals), module (import/export form), and JSX strategy for your app.
target option
target sets the ECMAScript version of emitted JS (e.g., ES2018, ES2020). Choose the lowest your runtime supports.
// tsconfig.json (excerpt)
{
"compilerOptions": {
"target": "ES2020"
}
}
// TS may downlevel features based on target
const n = 10n; // BigInt requires ES2020+lib option
lib controls which global type declarations are included (e.g., ES2020, DOM, WebWorker).
// tsconfig.json (excerpt)
{
"compilerOptions": {
"lib": ["ES2020", "DOM"]
}
}
// Now Promise, fetch, and DOM globals are typed if includedmodule option
module sets the module system (CommonJS, ESNext, NodeNext, etc.). Match this to Node/bundler expectations.
// tsconfig.json (excerpt)
{
"compilerOptions": {
"module": "ESNext"
}
}
// ESM example
import { join } from "path";
export const p = join("a", "b");jsx option
jsx chooses how TS transforms JSX (react, react-jsx, preserve). Pick what your framework/bundler expects.
// React 17+ recommended
// tsconfig.json (excerpt)
{
"compilerOptions": {
"jsx": "react-jsx"
}
}
// JSX files compile to React 17 runtime helpers (no need for import React)Presets
Use presets that match your stack. Web apps need DOM; Node projects usually omit it and pick NodeNext for modules.
// 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 option check
Quick check: What does the lib option control?
Recap
Recap: target ⇒ emitted JS level; lib ⇒ available globals; module ⇒ import/export form; jsx ⇒ JSX transform mode.
Frequently asked questions
Is the “Target, lib, module, JSX settings” lesson free?
Yes — the full text of “Target, lib, module, JSX settings” is free to read here on the web, and the TypeScript Academy course includes 3 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the TypeScript Academy course, upgrade to CoddyKit PRO.
What will I learn in “Target, lib, module, JSX settings”?
Choose proper target/lib for emitted JS and available globals; set module and JSX to match your runtime/bundler. You practise TypeScript Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start TypeScript Academy?
No prior experience is required. TypeScript Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 3, so you can start here or from the beginning and move at your own pace.
How long does the “Target, lib, module, JSX settings” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this TypeScript Academy lesson?
Yes. Every TypeScript Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- Strictness flags
- Target, lib, module, JSX settings
- Project References (intro)