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.

    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.

    Karteil
    Destinasi Utama Belajar Online dengan Format Tulisan yang Elegan
    Kunjungi Sekarang

    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.

    Follow me on
    Support me
    SaweriaGithub