Memanfaatkan Typescript pada Proyek JS

Sistem tipe data di TypeScript memiliki tingkat keketatan yang berbeda saat bekerja dengan basis kode:

• Sistem tipe data yang hanya berdasarkan pada inferensi dengan kode JavaScript
• Pengetikkan secara bertahap di JavaScript melalui JSDoc
• Menggunakan // @ts-check di berkas JavaScript
• Kode TypeScript
• TypeScript dengan strict diaktifkan

Setiap langkah mewakili tahapan sistem tipe yang lebih aman, tetapi tidak setiap proyek membutuhkan tingkat verifikasi seperti itu.

TypeScript dengan JavaScript

Ini ketika editor-mu yang menggunakan TypeScript untuk menyediakan tool, seperti auto-complete, jump to symbol, dan refactoring, misalnya penamaan ulang. Di Homepage tersedia daftar editor yang memiliki plugin TypeScript.

Menyediakan Type Hints di JS melalui JSDoc

Di berkas .js, tipe sering kali dapat diketahui. Namun ketika tipe tidak diketahui, mereka bisa ditentukan menggunakan sintaks JSDoc.

Anotasi JSDoc diletakkan sebelum mendeklarasikan suatu hal. Seperti contoh berikut:

js
/** @type {number} */
var x;
 
x = 0; // OK
x = false; // OK?!Try

Anda dapat menemukan daftar lengkap mengenai dukungan pola JSDoc di Tipe-tipe yang didukung JSDoc

@ts-check

Baris terakhir dari contoh kode sebelumnya akan menimbulkan kesalahan dalam TypeScript, tetapi tidak secara bawaan dalam proyek JS. Untuk mengaktifkan galat dalam berkas JavaScript-mu, tambahkan: // @ ts-check ke baris pertama dalam berkas.js Anda agar TypeScript dapat memeriksa kesalahan.

js
// @ts-check
/** @type {number} */
var x;
 
x = 0; // OK
x = false; // Not OK
Type 'boolean' is not assignable to type 'number'.2322Type 'boolean' is not assignable to type 'number'.Try

Jika anda memiliki banyak berkas JavaScript yang ingin ditambahkan pemeriksaan galatnya, Anda bisa beralhir menggunakan jsconfig.json. Dengan begitu, Anda tidak perlu menambahkan // @ts-nocheck di tiap berkasnya.

TypeScript mungkin memberikan galat yang Anda tidak sepakati. Pada kasus tersebut, Anda bisa membiarkan galat itu spesifik dibaris manapun dengan menambahkan // @ts-ignore atau // @ts-expect-error.

js
// @ts-check
/** @type {number} */
var x;
 
x = 0; // OK
// @ts-expect-error
x = false; // Not OKTry

Untuk mempelajari lebih lanjut bagaimana JavaScript diinterpretasi oleh TypeScript, Anda dapat membaca Bagaimana TS Type Memeriksa JS