Selasa, 18 October 2022

Menggunakan Alias @ dalam Typescript dengan 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.

Typescript
Vite
React

Daftar Isi

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:

npm create vite@latest react-app -- --template react-ts

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:

├── tsconfig.json
└── vite.config.ts

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

{
    "compilerOptions": {...},
    "include": [...],
    "references": [...]
}

compilerOptions

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

{
    "compilerOptions": {
        ...
        "baseUrl": ".",
        "paths": {
            "@/*" : ["src/*"]
        }
    },
    "include": [...],
    "references": [...]
}

Resolve alias

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

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
    plugins: [react()],
});

Maka sekarang Anda bisa memperbaruinya file seperti:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import * as path from 'path';

export default defineConfig({
    plugins: [react()],
    resolve: {
        alias: [{ find: '@', replacement: path.resolve(__dirname, 'src') }],
    },
});

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:

import React from 'react';
// import NavLink from '../components/NavLink';
import NavLink from '@/components/NavLink';

const Navbar = () => {
    return (
        <nav className='flex min-h-screen flex-col justify-between bg-blue-600'>
            <NavLink href='/'>
                Home
            </NavLink>
        </nav>
    );
};

export default Navbar;

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:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
// @ts-ignore
import * as path from 'path';

/** @type {import('vite').UserConfig} */
export default defineConfig({
    plugins: [react()],
    resolve: {
        // @ts-ignore
        alias: [{ find: '@', replacement: path.resolve(__dirname, 'src') }],
    },
});

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.

Irsyad A. Panjaitan

Let's start living like no one can help us in any event, so that when we are helped in certain times, it becomes a plus in itself.

Irsyad A. PanjaitanGo to Irsyad A. Panjaitan profile

Follow me on

Support me

Github