Alias @ Typescript w/ Vite.js

Mungkin ini sangat simple, tetapi kadang hal sesimpel ini buat kita pusing. Pertama sekali, saya akan menganggap Anda akan memakai react typescript dengan vite.js.

Install react-ts

Buka terminal, kemudian cd ke workspace Anda. Kemudian jalankan perintah berikut:

1npm create [email protected] react-app -- --template react-ts
2
bashCopy

Buka folder nya di text editor Anda, dan jika Anda perhatikan pada direktori root, harusnya akan ada salah 2 dari semua file yang ada dan itu:

1├── tsconfig.json
2└── vite.config.ts
3
bashCopy

Pertama, buka file tsconfig.json dan pastinya akan ada banyak di dalam peraturan typescript seperti:

1{
2    "compilerOptions": {...},
3    "include": [...],
4    "references": [...]
5}
6
jsonCopy

compilerOptions

Kita akan fokus pada compilerOptions untuk menambahkan kode baseUrl dan paths seperti:

1{
2    "compilerOptions": {
3        ...
4        "baseUrl": ".",
5        "paths": {
6            "@/*" : ["src/*"]
7        }
8    },
9    "include": [...],
10    "references": [...]
11}
12
jsonCopy

Resolve alias

Setelah itu, sekarang buka file vite.config.ts, dan default nya harusnya jika Anda pertama kali install akan seperti:

1import { defineConfig } from 'vite';
2import react from '@vitejs/plugin-react';
3
4export default defineConfig({
5    plugins: [react()],
6});
7
tsxCopy

Maka sekarang Anda bisa memperbaruinya file seperti:

1import { defineConfig } from 'vite';
2import react from '@vitejs/plugin-react';
3import * as path from 'path';
4
5export default defineConfig({
6    plugins: [react()],
7    resolve: {
8        alias: [{ find: '@', replacement: path.resolve(__dirname, 'src') }],
9    },
10});
11
tsxCopy

Jika terlihat error, tidak ada masalah. Itu hanya typescript nya tidak kenal saja. Tetapi behind the scene ini sudah berhasil. Perhatikan kode berikut, saya ada komponen dengan nama NavLink.tsx, dan kemudian saya akan import seperti:

1import React from 'react';
2// import NavLink from '../components/NavLink';
3import NavLink from '@/components/NavLink';
4
5const Navbar = () => {
6    return (
7        <nav className='flex min-h-screen flex-col justify-between bg-blue-600'>
8            <NavLink href='/'>
9                Home
10            </NavLink>
11        </nav>
12    );
13};
14
15export default Navbar;
16
tsxCopy

Fix Error

Dan terakhir, jika Anda tidak suka dengan error yang ada di file vite.config.ts tadi, Anda bisa membuat semacam peraturan untuk menyuruh typescript mengabaikan syntax itu seperti:

1import { defineConfig } from 'vite';
2import react from '@vitejs/plugin-react';
3// @ts-ignore
4import * as path from 'path';
5
6/** @type {import('vite').UserConfig} */
7export default defineConfig({
8    plugins: [react()],
9    resolve: {
10        // @ts-ignore
11        alias: [{ find: '@', replacement: path.resolve(__dirname, 'src') }],
12    },
13});
14
tsCopy

Vue ?

Saya tidak berani bilang benar ini bekerja dengan vue.js, namun harusnya akan sama saja. Semoga artikel ini bermanfaat, like dan share jika Anda suka. Saya Irsyad, saya akan melihat Anda lagi di artikel selanjutnya.