Using TypeScript Path Aliases
TypeScript path aliases allow you to create shorthand references to directories in your project, making imports cleaner and more maintainable. Instead of using relative paths like ../../components/resistor
, you can use aliases like @components/resistor
.
Setting Up Path Aliases
Path aliases are configured in your tsconfig.json
file using the baseUrl
and paths
compiler options.
Example Configuration
Here's a complete example showing how to set up and use path aliases in a tscircuit project:
{
"compilerOptions": {
"target": "ES6",
"module": "ESNext",
"jsx": "react-jsx",
"outDir": "dist",
"strict": true,
"esModuleInterop": true,
"moduleResolution": "node",
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true,
"resolveJsonModule": true,
"sourceMap": true,
"allowSyntheticDefaultImports": true,
"experimentalDecorators": true,
"types": [
"@tscircuit/core"
],
"baseUrl": ".",
"paths": {
"@components/*": ["./src/components/*"]
}
}
}
How It Works
-
baseUrl: Set to
"."
to define the root directory for module resolution -
paths: Maps alias patterns to actual file paths
"@components/*"
maps to"./src/components/*"
- The
*
wildcard matches any file or subdirectory
-
Import: Use the alias in your imports
import { MyComponent } from "@components/MyComponent"
Common Path Alias Patterns
You can define multiple aliases for different parts of your project:
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@components/*": ["./src/components/*"],
"@utils/*": ["./src/utils/*"],
"@lib/*": ["./src/lib/*"],
"@circuits/*": ["./src/circuits/*"]
}
}
}