allowArbitraryExtensions în TypeScript

"compilerOptions": { "allowArbitraryExtensions": true }

Ce face allowArbitraryExtensions

Bundlerele permit importul fișierelor care nu sunt JavaScript: import clase from "./buton.css". Ca tsc să știe tipul, poți scrie un fișier de declarații lângă el, numit după regula buton.d.css.ts (numele fișierului, .d., extensia, .ts).

tsc găsește acest fișier, dar îl folosește doar cu allowArbitraryExtensions; altfel dă eroarea TS6263. Opțiunea există ca protecție: fără ea, un import de .css nu primește tipuri dintr-un fișier pe care nu l-ai cerut explicit. Implicit: false.

Parametri

Parametru	Descriere
true	Fișierele nume.d.ext.ts dau tipurile pentru import "./nume.ext".
false	Valoarea implicită.

Exemple

Exemplul 1: Clase CSS cu tipuri

buton.d.css.ts spune că fișierul CSS exportă un obiect cu clasa rosu. Fără opțiune, tsc refuză declarația; cu --allowArbitraryExtensions, compilarea trece.

// tsconfig.json
{
  "compilerOptions": {
    "module": "preserve",
    "moduleResolution": "bundler",
    "noEmit": true
  }
}

// buton.css
.rosu { color: red; }

// buton.d.css.ts
declare const clase: { rosu: string };
export default clase;

// index.ts
import clase from "./buton.css";

console.log(clase.rosu);

Rezultat (tsc 5.9)

$ npx tsc
index.ts(1,19): error TS6263: Module './buton.css' was resolved to '/proiect/buton.d.css.ts', but '--allowArbitraryExtensions' is not set.

$ npx tsc --allowArbitraryExtensions

Greșeli frecvente

• Să numești declarația buton.css.d.ts. Numele cerut este buton.d.css.ts.
• Să crezi că opțiunea face Node.js să poată importa CSS. Tipurile sunt pentru tsc; rularea cere un bundler.

Comenzi înrudite

• noUncheckedSideEffectImports: Verifică și importurile fără nume (import „./polyfill.js”): fișierul trebuie să existe, altfel apare eroare.
• resolveJsonModule: Permite importul fișierelor .json, cu tipuri deduse din conținutul lor.
• moduleResolution: Alege regulile după care tsc găsește fișierul din spatele unui import („./calcul.js”, „react”, „@/utile”).