TypeScriptKonfiguracja tsconfig
"paths"
Aliasy ścieżek w importach, np. @/components zamiast ../../components.
Przykład
#JSON
{
"compilerOptions": {
"paths": {
"@/*": ["./src/*"],
"@components/*": ["./src/components/*"]
}
}
}Definicja i zastosowanie
#Opcja paths pozwala zdefiniować skróty dla ścieżek importu. Zamiast ../../../components/Button piszesz @/components/Button, niezależnie od tego, jak głęboko leży bieżący plik.
Wzorce zawierają gwiazdkę, która zastępuje resztę ścieżki: "@/*": ["./src/*"]. Od TypeScriptu 4.1 opcja baseUrl nie jest do tego wymagana, a ścieżki liczą się względem pliku tsconfig.json.
Ważne: paths wpływa tylko na sprawdzanie typów. Narzędzie, które uruchamia lub buduje kod (Next.js, Vite, bundler, ts-node), musi znać te same aliasy. Frameworki zwykle czytają je z tsconfig automatycznie.
Składnia
#Składnia
"paths": {
"@/*": ["./src/*"]
}Więcej przykładów
#TypeScript
import Button from '@/components/Button'
import { formatPrice } from '@/utils/format'Dobre praktyki
#- Jeden alias
@/*wskazujący nasrczwykle wystarczy. Wiele aliasów utrudnia orientację w projekcie. - Gdy alias działa w edytorze, ale nie w działającej aplikacji, skonfiguruj go także w bundlerze.
Powiązane hasła
#Widzisz błąd albo brakuje przykładu? Napisz do nas.