How to create and use path alias in TypeScript imports with Vite

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.