hsblhsn.me

Follow

hsblhsn.me

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

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

Hasibul Hasan's photo
Hasibul Hasan
·Mar 12, 2023·

2 min read

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.