"verbatimModuleSyntax"

Importy bez słowa type zostają w JavaScripcie bez zmian, więc importy typów trzeba oznaczać jawnie.

Na tej stronie

Przykład
Definicja i zastosowanie
Składnia
Więcej przykładów
Dobre praktyki
Powiązane hasła

Przykład

JSON

{
  "compilerOptions": {
    "module": "ESNext",
    "moduleResolution": "Bundler",
    "verbatimModuleSyntax": true
  }
}

Definicja i zastosowanie

Opcja verbatimModuleSyntax wprowadza prostą zasadę: import lub eksport bez słowa type trafia do wygenerowanego JavaScriptu dokładnie tak, jak go napisano, a import type znika w całości. Kompilator przestaje sam zgadywać, które importy usunąć, bo służą tylko typom.

Dzięki temu wynik jest przewidywalny i taki sam w każdym narzędziu, które tłumaczy pliki pojedynczo, jak esbuild, SWC czy Babel. Import typu bez oznaczenia kończy się błędem, więc od razu widać, co zostanie w kodzie. Opcja włącza też wszystkie sprawdzenia isolatedModules.

Pojawiła się w TypeScripcie 5.0 i zastąpiła starsze opcje importsNotUsedAsValues oraz preserveValueImports. Najlepiej pasuje do projektów z modułami ES. W plikach kompilowanych do CommonJS zabrania składni import i export, bo tej składni nie da się tam zostawić bez zmian.

Składnia

"verbatimModuleSyntax": true

Więcej przykładów

Import typu bez oznaczenia

TypeScript

import { Course, formatTitle } from './course'
// Błąd: 'Course' is a type and must be imported using a type-only import when 'verbatimModuleSyntax' is enabled.

Co zostaje w JavaScripcie

TypeScript

import type { Course } from './course'
import { type Lesson } from './lesson'
import { type Badge, formatTitle } from './format'

export function heading(course: Course, lesson: Lesson, badge: Badge): string {
  return formatTitle(`${course.title}: ${lesson.title} (${badge.name})`)
}

// Wynik kompilacji:
// import {} from './lesson';
// import { formatTitle } from './format';
// export function heading(course, lesson, badge) { … }

Dobre praktyki

Zaczynasz nowy projekt z bundlerem? Włącz verbatimModuleSyntax zamiast samego isolatedModules. Dostajesz te same sprawdzenia i jedną prostą regułę dla importów.
Import, z którego bierzesz same typy, zapisuj jako import type { … }. Wersja import { type A } zostawia w JavaScripcie pusty import import {} from "…", który nadal ładuje moduł.
W projekcie Node.js na CommonJS pojawi się błąd „ECMAScript imports and exports cannot be written in a CommonJS file under 'verbatimModuleSyntax'”. Przejdź na moduły ES (pole type z wartością module w package.json) albo wyłącz tę opcję.

Powiązane hasła

Widzisz błąd albo brakuje przykładu? Napisz do nas.

Darmowy kursPrzećwicz TypeScript w kursie JavaScript i TypeScriptZadania z podpowiedziami, edytor kodu i postępy zapisywane na bieżąco.Zobacz kurs