import type
Import samych typów, który w całości znika z wygenerowanego JavaScriptu.
Przykład
#// src/lessons.ts
import type { Course } from './types'
import { type Lesson, formatMinutes } from './format'
export function describeLesson(course: Course, lesson: Lesson): string {
return `${course.title}: ${lesson.title} (${formatMinutes(lesson.minutes)})`
}
// Wynik kompilacji (JavaScript):
// import { formatMinutes } from './format';
// export function describeLesson(course, lesson) {
// return `${course.title}: ${lesson.title} (${formatMinutes(lesson.minutes)})`;
// }Definicja i zastosowanie
#Zapis import type { Course } from "./types" importuje z modułu wyłącznie typy. Po kompilacji taki import znika bez śladu, więc moduł nie jest ładowany w działającym programie. Nie dołożysz przez przypadek kodu do paczki i nie stworzysz cyklicznej zależności tylko dlatego, że potrzebujesz typu z innego modułu.
Pojedyncze nazwy możesz też oznaczyć wewnątrz zwykłego importu: import { type Lesson, formatMinutes } from "./format". Lesson zniknie z JavaScriptu, a formatMinutes pozostanie. Tak samo działa export type { … } przy ponownym eksportowaniu typów z innego modułu.
Nazwy zaimportowanej przez import type można używać tylko jako typu. Klasa czy enum zaimportowane w ten sposób nie nadają się do new, instanceof ani Object.values(). Oznaczanie importów typów jest obowiązkowe przy opcji verbatimModuleSyntax i ułatwia pracę narzędziom, które tłumaczą każdy plik osobno, jak esbuild, SWC czy Babel.
Składnia
#import type { Typ } from "./modul"
import { type Typ, wartosc } from "./modul"
export type { Typ } from "./modul"Więcej przykładów
#import type { Level, Certificate } from './types'
let saved: Certificate | null = null // użycie jako typu: poprawne
const levels = Object.values(Level)
// Błąd: 'Level' cannot be used as a value because it was imported using 'import type'.
const cert = new Certificate('Ania')
// Błąd: 'Certificate' cannot be used as a value because it was imported using 'import type'.// src/index.ts
export type { Course } from './types'
export { type Lesson, formatMinutes } from './format'Dobre praktyki
#- Reguła lintera
@typescript-eslint/consistent-type-importspilnuje oznaczania importów typów i potrafi poprawić je automatycznie. - Jeśli dwa moduły importują się nawzajem tylko po to, żeby korzystać ze swoich typów, zamień te importy na
import type. Cykliczna zależność zniknie z działającego programu. - Przy opcji
verbatimModuleSyntaxzapisimport { type A } from "./a"zostawia w JavaScripcie pusty importimport {} from "./a", aimport type { A }znika całkowicie. Gdy z modułu bierzesz same typy, wybierzimport type.
Powiązane hasła
#- "verbatimModuleSyntax"Importy bez słowa type zostają w JavaScripcie bez zmian, więc importy typów trzeba oznaczać jawnie.
- "isolatedModules"Pilnuje, żeby każdy plik dało się przetłumaczyć na JavaScript osobno, bez wiedzy o reszcie projektu.
- declare i pliki .d.tsOpisywanie typów czegoś, co istnieje poza twoim kodem TypeScript: zmiennych globalnych, bibliotek JavaScript i modułów.
- typeof (w typach)Pobiera typ zmiennej lub wartości, żeby użyć go w innym miejscu.
- interfaceNazwany opis kształtu obiektu, który można rozszerzać i łączyć.
Widzisz błąd albo brakuje przykładu? Napisz do nas.