Skip to main content
TypeScript Guide

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/*"]
}
}
}
PCB Circuit Preview

How It Works

  1. baseUrl: Set to "." to define the root directory for module resolution

  2. paths: Maps alias patterns to actual file paths

    • "@components/*" maps to "./src/components/*"
    • The * wildcard matches any file or subdirectory
  3. 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/*"]
}
}
}