jsxImportSource în TypeScript

"compilerOptions": {
  "jsx": "react-jsx",
  "jsxImportSource": "preact"
}

Ce face jsxImportSource

Cu react-jsx și react-jsxdev, tsc adaugă automat un import din <pachet>/jsx-runtime (sau jsx-dev-runtime). Implicit, pachetul este react. Bibliotecile compatibile (Preact, Solid, Emotion) au propriul jsx-runtime; cu jsxImportSource alegi pachetul lor.

Pentru un singur fișier, poți scrie la început /** @jsxImportSource solid-js */. Valoarea implicită: react.

Parametri

Parametru	Descriere
"pachet"	Pachetul care are jsx-runtime. Implicit react.

Exemple

Exemplul 1: Import din preact/jsx-runtime

Același tip de element ca la React, dar importul vine din preact.

// tsconfig.json
{
  "compilerOptions": {
    "target": "es2022",
    "module": "esnext",
    "jsx": "react-jsx",
    "jsxImportSource": "preact",
    "outDir": "dist"
  }
}

// src/salut.tsx
export const A = () => <p>Bună</p>;

Rezultat (tsc 5.9)

$ npx tsc && cat dist/salut.js
import { jsx as _jsx } from "preact/jsx-runtime";
export const A = () => _jsx("p", { children: "Bun\u0103" });

Exemplul 2: Comentariu pentru un singur fișier

Fără jsxImportSource în tsconfig, comentariul alege pachetul doar pentru acest fișier.

// src/salut.tsx  (tsconfig: "jsx": "react-jsx")
/** @jsxImportSource solid-js */
export const A = () => <p>Bună</p>;

Rezultat (tsc 5.9)

$ npx tsc && cat dist/salut.js
import { jsx as _jsx } from "solid-js/jsx-runtime";
/** @jsxImportSource solid-js */
export const A = () => _jsx("p", { children: "Bun\u0103" });

Greșeli frecvente

• Să setezi jsxImportSource cu "jsx": "react". Nu are efect; forma clasică folosește jsxFactory.

Comenzi înrudite

• jsx: Spune ce face tsc cu sintaxa JSX din fișierele .tsx: o transformă în apeluri de funcții (React) sau o lasă neschimbată.
• jsxFactory: Pentru jsx: „react”, alege funcția apelată pentru fiecare element (implicit React.createElement) și pentru fragmente.