TypeScript 7.1 Beta: Compiler API Kembali, Vue dan Svelte Dicek Langsung oleh tsc
  easystem   06 November 2026   Developer

Setelah TypeScript 7.0 pada Juli 2026 memindahkan seluruh compiler ke Go dan menjanjikan kecepatan sekitar 10 kali lipat, muncul masalah yang jarang dibicarakan: API programmatik yang selama ini dipakai tooling hilang. Akibatnya Vue, Svelte, Astro, ts-morph, sampai linting berbasis tipe terpaksa bertahan di TypeScript 6. Microsoft merilis TypeScript 7.1 Beta pada 20 Oktober 2026, dan rilis inilah yang mengembalikan API tersebut sekaligus membuka jalan bagi framework komponen agar bisa diperiksa langsung oleh tsc.

API compiler kembali, tapi tidak lagi monolitik

Alih-alih menghidupkan modul raksasa versi lama, TypeScript 7.1 memecah API menjadi beberapa entry point sesuai fungsinya:

  • typescript/sync — client compiler sinkron: opsi compiler, type checker, dan program.
  • typescript/async — versi berbasis Promise dari client sinkron.
  • typescript/fs — filesystem penuh maupun berlapis per request.
  • typescript/ast, typescript/ast/is, typescript/ast/factory — tipe node AST, type guard, serta fungsi pembuat dan pembaru node.

Ada perubahan gaya pemakaian yang perlu diperhatikan: objek API, Program, dan Snapshot adalah Disposable. Karena TypeScript mengalokasikan memori di sisi Go dan JavaScript sekaligus, objek harus ditutup manual (api.close(), program.dispose()) atau dibiarkan tertutup otomatis lewat keyword using:

import { API } from "typescript/sync";

using api = new API();
using program = api.createProgram(files, options);

Konsep snapshot juga baru: satu snapshot mewakili seluruh project dan program pada satu titik waktu, dan snapshot baru bisa diturunkan dari snapshot lama lewat update() tanpa membangun ulang semuanya — persis kebutuhan editor yang harus merespons ketikan pengguna.

Content mappers: file .vue dan .svelte masuk ke dalam tsc

Fitur yang paling banyak dibicarakan adalah content mappers. Selama ini tooling seperti Volar harus menempel ke TypeScript dengan cara yang akrobatik; di versi 7.1 model inti Volar diangkat menjadi warga kelas satu. Content mapper didaftarkan untuk ekstensi file tertentu, lalu menghasilkan representasi virtual file beserta peta balik ke file asli supaya posisi error tetap akurat.

Pendaftarannya lewat tsconfig.json:

{
  "compilerOptions": { },
  "contentMappers": [
    {
      "package": "@vue/content-mapper",
      "extensions": [".vue"],
      "options": { "target": 3.5 }
    }
  ]
}

Karena mapper pada dasarnya adalah program eksternal yang dieksekusi compiler, saat dijalankan dari terminal wajib menambahkan flag --runExternalCode:

npx tsc --runExternalCode

Di VS Code fitur ini aktif otomatis, tetapi mensyaratkan workspace trust dan izin content mapper; bisa dimatikan lewat setelan js/ts.contentMappers.enabled. Catatan penting bagi tim yang peduli keamanan rantai pasok: mapper adalah kode pihak ketiga yang dijalankan compiler, jadi perlakukan seperti plugin build lain. Prototipe mapper sudah tersedia untuk Astro, CSS Modules, Ember, MDX, Svelte, dan Vue. Nama paket @vue/content-mapper di dokumentasi resmi belum tersedia di npm saat beta dirilis.

Hasil benchmark: waktu dan memori sama-sama turun

Angka dari tabel resmi Microsoft (default 4 thread type checker, --noEmit):

  • mui-docs: 22,2 detik menjadi 11,9 detik (1,9x), memori 8.093 MiB menjadi 4.079 MiB.
  • t3code-server: 26,5 detik menjadi 19,1 detik (1,4x).
  • sentry: 19,6 detik menjadi 15,1 detik (1,3x).
  • bluesky: 4,48 detik menjadi 3,89 detik (1,2x).
  • vscode: 21,6 detik menjadi 17,7 detik (1,2x).

InfoQ juga mencatat uji mandiri pada aplikasi admin Directus: 581 komponen Vue di 882 file TypeScript turun dari 14,19 detik menjadi 3,10 detik saat memakai tsc 7.1 plus mapper, sekitar 4,6x lebih cepat dibanding vue-tsc 3. Untuk codebase besar seperti VS Code, keuntungannya lebih moderat, sekitar 1,2x.

Fitur bahasa yang ikut masuk

  • Import attributes di ambient module. Deklarasi modul kini bisa menyebut atribut, sehingga impor yang melewatkan atribut wajib menjadi error:
    declare module "*" with { type: "text" } {
      const content: string;
      export default content;
    }
  • Source phase imports. import source mengambil modul yang sudah diparse tetapi belum dijalankan, berguna untuk WebAssembly yang bisa langsung dilempar ke WebAssembly.instantiate.
  • Target es2026 stabil dengan tambahan seperti Math.sumPrecise(), Map.prototype.getOrInsert(), Uint8Array.prototype.toBase64() dan toHex(), Error.isError(), serta Array.fromAsync().
  • --lib esnext menambah Promise.allKeyed, Iterator.zip, Iterator.prototype.chunks, join, dan includes.

Dua perubahan yang bisa menggagalkan build

Pembaruan tipe DOM di lib.d.ts bisa memunculkan error baru. Selain itu pengecekan tipe distributif kini lebih ketat: di dalam setiap cabang conditional type, type parameter diperlakukan sebagai tipe baru yang hanya subtype dari parameter aslinya dan tidak lagi berhubungan dengan tipe lain yang dibatasi parameter tersebut. Pola seperti berikut akhirnya ditolak:

type Show<A extends number, B extends A> = `${B} extends ${A}`;

type Issue<A extends number, B extends A> =
  A extends B ? never : Show<A, B>;
// error: Type 'B' does not satisfy the constraint 'A'.

Kode yang terkena bisa diperbaiki dengan menghapus constraint yang tidak lagi diperlukan atau menambah pengecekan conditional type tambahan.

Cara mencoba dengan aman

  1. Pasang di proyek percobaan: npm install -D typescript@beta.
  2. Jalankan type check di job CI terpisah, jangan menggantikan build produksi.
  3. Bandingkan daftar error dengan compiler lama sebelum menyimpulkan ada regresi.
  4. Tunggu Release Candidate. Menurut rencana iterasi, RC menyusul sekitar sebulan setelah beta dan rilis stabil tak lama setelahnya.

Bagi tim yang mengelola aplikasi pemerintah atau sistem internal dengan codebase TypeScript besar, daya tarik utamanya bukan sekadar kecepatan, melainkan satu alat: tsc yang sama bisa memeriksa file .ts, .vue, dan .svelte di CI, sehingga hasil di mesin developer dan di pipeline tidak lagi berbeda.

Sumber: Announcing TypeScript 7.1 Beta (Microsoft TypeScript Blog, 20 Oktober 2026); TypeScript 7.1 Beta: Restores the Compiler API and Makes Vue and Svelte First-Class (InfoQ, 6 November 2026).

Tags :

typescript , javascript , compiler , vue , svelte

Bagikan :