Typescript Tsconfig Compiler Options Strict Moduleresolution Verbatimmodulesyntax

Definisi

tsconfig.json compilerOptions mengatur cara TS mengecek & menargetkan kode. Opsi penting: strict (sekaligus nyalakan null check, no implicit any, dll), moduleResolution (bundler/node16/nodenext), dan verbatimModuleSyntax (wajib import type untuk tipe, cegah salah bundling).

Kapan dipakai

Selalu set strict: true untuk project baru (cegah bug null/any). Pakai moduleResolution: "bundler" untuk Vite/Next; verbatimModuleSyntax bila butuh isolasi type-only import (bundler modern). Project lawas mungkin perlu node.

Cara kerja

contoh

json

{
  "compilerOptions": {
    "strict": true,
    "moduleResolution": "bundler",
    "module": "esnext",
    "target": "ES2022",
    "verbatimModuleSyntax": true
  }
}

ts

import type { User } from './types'; // wajib type-only saat verbatim on
import { fn } from './util';

Struktur alur

Catatan implementasi

• strict mengaktifkan ~7 flag sekaligus; lebih aman dari opt-in manual.
• moduleResolution: "bundler" butuh module: esnext + moduleResolution versi baru (TS 5+).
• verbatimModuleSyntax: true → impor tipe murni wajib import type, otherwise error.
• Jangan campur module: commonjs dengan resolver bundler (inkonsisten).

Kesalahan umum

• strict mati di project lama: banyak error; naikkan bertahap (noImplicitAny dulu).
• moduleResolution salah: node di Vite bikin resolve gagal; pakai bundler.
• Lupa import type saat verbatim on: error "import is only types".
• target terlalu rendah: fitur TS (decorator, etc) butuh target cukup baru.

Referensi terkait

• TypeScript tsconfig Path Aliases dan Project References
• TypeScript Narrowing, Discriminated Unions, Exhaustive Checks
• Next.js next.config.js Lanjut