Belajar TypeScript - Testing, Linting, dan Editor Support

#Pendahuluan

Compiler menangkap kesalahan tipe, tapi tidak semua kesalahan logika. Di sinilah lapisan kualitas berikutnya bekerja: testing untuk memverifikasi perilaku, linting untuk menegakkan gaya dan mencegah pola berbahaya, dan editor yang memahami kode untuk umpan balik instan.

Ketiganya berbeda dari compiler, tapi saling melengkapi. Test memastikan kode melakukan hal yang benar. Linter memastikan kode ditulis dengan pola yang disepakati. TypeScript Server membuat semua ini terasa hidup di editor, memberi saran dan refactor yang aman.

Episode 18 membahas setup testing dengan Vitest, linting dengan typescript-eslint, pemeriksaan tipe sebagai gate CI, dan bagaimana editor memanfaatkan TypeScript Server.

#Testing dengan Vitest

#Menulis Test Pertama

Vitest adalah test runner modern yang memahami TypeScript langsung:

bun add -d vitest

import { describe, expect, it } from "vitest";
import { tambah } from "./hitung";
 
describe("tambah", () => {
    it("menjumlahkan dua angka", () => {
        expect(tambah(2, 3)).toBe(5);
    });
});

Fungsi tambah diuji dengan pemanggilan nyata dan ekspektasi. Test memberi kepercayaan bahwa perubahan kode tidak memecah perilaku lama. Vitest membaca TypeScript tanpa konfigurasi tambahan dan berjalan cepat berkat transformasi on-the-fly.

#Menjalankan dan Mengintegrasikan

Skrip test ditambahkan ke package.json:

{
    "scripts": {
        "test": "vitest run",
        "test:watch": "vitest"
    }
}

vitest run menjalankan seluruh test sekali, cocok untuk CI. vitest tanpa argumen berjalan dalam mode watch, memuat ulang test saat kode berubah. Keduanya memakai file .test.ts atau .spec.ts yang menumpang di dekat kode yang diuji.

#Linting dengan typescript-eslint

ESLint dengan plugin TypeScript memahami aturan spesifik sistem tipe:

bun add -d eslint typescript-eslint

{
    "extends": [
        "eslint:recommended",
        "plugin:@typescript-eslint/recommended"
    ]
}

Konfigurasi di atas memuat aturan dasar ESLint plus aturan TypeScript. Plugin memeriksa hal-hal yang tidak bisa dilihat compiler, misalnya pemakaian any yang tidak perlu, promise yang tidak ditangani, dan deklarasi yang tidak pernah dipakai. Menjalankan bun run lint menjadi kontrol kualitas kedua setelah kompilasi.

#Editor dan TypeScript Server

#tsc --noEmit

Perintah utama untuk memeriksa tipe tanpa menghasilkan file:

npx tsc --noEmit

npx tsc --noEmit menjalankan pemeriksaan penuh dan melaporkan error tanpa menulis output. Ini perintah yang paling sering dipakai di CI sebagai gerbang: bila kompilasi gagal, pipeline berhenti. Editor menjalankan pemeriksaan yang sama secara terus-menerus lewat TypeScript Server.

#TypeScript Server di Editor

Editor seperti VS Code menjalankan TypeScript Server sebagai layanan di latar belakang. Server memberi autocomplete, navigasi definisi, rename yang aman, dan saran perbaikan cepat. Bila TypeScript Server kehabisan memori pada proyek besar, opsi tsserver.maxTsServerMemory di pengaturan editor bisa dinaikkan.

#Integrasi ke CI

Ketiga alat disatukan dalam satu pipeline:

bun run lint
bun run typecheck
bun run test
bun run build

Urutan di atas menjalankan linter, pemeriksaan tipe dengan tsc --noEmit, test, lalu build. Bila salah satu gagal, proses berhenti dan kode tidak dirilis. Pipeline ini membuat kualitas bukan tanggung jawab satu orang, melainkan gerbang otomatis yang sama untuk semua orang.

#Penutup

Episode 18 melengkapi toolbox kualitas kalian: Vitest untuk memverifikasi perilaku, typescript-eslint untuk menegakkan pola, tsc --noEmit sebagai gerbang CI, dan TypeScript Server untuk umpan balik real-time di editor.

Inti yang harus dibawa pulang:

• Vitest menjalankan test TypeScript tanpa konfigurasi tambahan.
• Test memverifikasi perilaku yang tidak bisa dilihat compiler.
• typescript-eslint menambahkan aturan spesifik sistem tipe.
• tsc --noEmit memeriksa tipe tanpa menghasilkan file.
• TypeScript Server memberi autocomplete dan refactor di editor.
• CI menggabungkan lint, typecheck, test, dan build sebagai gerbang.

Di episode 19 selanjutnya kita akan membahas strategi penulisan definisi tipe yang scalable, yaitu mendesain tipe yang tetap mudah dirawat saat proyek tumbuh.