Path aliases are a powerful tool for simplifying imports in your TypeScript projects. Instead of writing out long file paths, you can use a short alias to reference a specific directory or module. In this tutorial, I'll show you how to set up a simple path alias for @
that points to the src
directory using the Vite build tool.
Step 1: Set Up Path Alias in tsconfig.json
The first step is to set up your path alias in your tsconfig.json
file. Open that file and add a paths
property to the compilerOptions
object. For example:
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["src/*"]
}
}
This sets up a path alias for @
that points to the src
directory. The baseUrl
property specifies the base directory for resolving non-relative module names.
Step 2: Set Up Path Alias in Vite Config
Next, we need to tell Vite how to resolve our path alias. Open your Vite configuration file (vite.config.ts
or vite.config.js
) and add a resolve.alias
property to the object. For example:
import { defineConfig } from 'vite';
import path from 'path';
export default defineConfig({
resolve: {
alias: {
'@': path.resolve(__dirname, 'src')
}
}
});
This maps the @
path alias to the src
directory using the path.resolve
method to get the full file path.
Step 3: Use Path Alias in TypeScript Imports
With our path alias set up, we can now use it in our TypeScript imports. For example:
import React from 'react';
import { Button } from '@/components/Button';
function MyComponent() {
return (
<div>
<Button>Click me</Button>
</div>
);
}
export default MyComponent;
This imports the Button
component from the src/components/Button.tsx
file using the @
path alias. Note that we don't need to write out the full file path to this module – we can use our path alias instead.
Conclusion
By creating a simple path alias for @
that points to the src
directory, we can simplify our imports and make our TypeScript code more readable. This is just a basic example of what's possible with path aliases – you can create as many aliases as you need, and use wildcard characters to match any file or folder names that come after the path alias.