Anotasi Pertama

TypeScript memperkenalkan anotasi tipe (type annotation) sebagai cara menyatakan nilai seperti apa yang boleh disimpan sebuah variabel atau dikembalikan sebuah fungsi. Topik ini membahas penulisan anotasi pertama dengan : string dan : number pada variabel, kemudian pada parameter dan nilai kembalian fungsi. Setelah membacanya, anotasi pada berkas TypeScript sederhana dapat ditulis sendiri, beserta cara membaca pesan error dasar yang muncul ketika tipe tidak cocok.

Anotasi tipe pada variabel#

Anotasi tipe ditulis tepat setelah nama variabel, diawali tanda titik dua, lalu diikuti nama tipenya. Bentuk : string menyatakan variabel hanya boleh berisi teks, sedangkan : number menyatakan variabel hanya boleh berisi angka. Pemeriksaan dilakukan oleh compiler saat kode ditulis, jauh sebelum program dijalankan. Apabila nilai yang ditugaskan tidak sesuai dengan anotasinya, compiler menampilkan error dan berkas itu tidak dianggap siap dijalankan.

Berkas berikut memakai kedua anotasi tersebut pada data pembacaan suhu ruang kerja. Dua variabel menyimpan label dan nilai suhu, sedangkan dua fungsi mengolah data tersebut menjadi kalimat deskripsi dan hasil konversi satuan. Fungsi dijelaskan lebih rinci pada bagian berikutnya, sehingga fokus di sini adalah dua baris deklarasi pertama.

const labelSuhu: string = "Suhu ruang kerja";
const suhuCelsius: number = 27.5;

function celsiusKeFahrenheit(celsius: number): number {
  return (celsius * 9) / 5 + 32;
}

function deskripsiSuhu(label: string, nilai: number): string {
  return `${label}: ${nilai} derajat Celsius`;
}

console.log(deskripsiSuhu(labelSuhu, suhuCelsius));
console.log(celsiusKeFahrenheit(suhuCelsius));

Suhu ruang kerja: 27.5 derajat Celsius
81.5

Variabel labelSuhu dianotasi dengan : string, sehingga penugasan teks apa pun diterima, sedangkan penugasan angka akan ditolak. Variabel suhuCelsius menggunakan : number untuk nilai 27.5. TypeScript memakai satu tipe number untuk bilangan bulat maupun pecahan, tanpa pembagian seperti int dan float pada bahasa lain.

Tanda tangan fungsi#

Bagian yang mendeklarasikan nama fungsi beserta tipe parameter dan tipe kembaliannya disebut tanda tangan fungsi (function signature). Setiap parameter dianotasi seperti variabel biasa, sedangkan tipe kembalian ditulis setelah daftar parameter dan diawali tanda titik dua. Kedua anotasi ini membuat pemanggil fungsi mengetahui masukan yang dibutuhkan dan hasil yang diperoleh tanpa membaca isi fungsinya.

Berkas berikut mendefinisikan fungsi pembuat kartu peminjaman buku. Parameter judulBuku dianotasi : string dan tahunTerbit dianotasi : number, sementara anotasi : string setelah daftar parameter menegaskan hasilnya berupa teks. Nilai kembalian tersebut kemudian disimpan pada variabel yang juga dianotasi dengan : string.

function buatKartu(judulBuku: string, tahunTerbit: number): string {
  return `${judulBuku} (${tahunTerbit})`;
}

const kartuBaru: string = buatKartu("Kamus Bahasa", 2019);
const kartuLama: string = buatKartu("Atlas Dunia", 2008);

console.log(kartuBaru);
console.log(kartuLama);

Kamus Bahasa (2019)
Atlas Dunia (2008)

Apabila isi fungsi mengembalikan nilai yang bukan teks, misalnya angka tahun yang dikembalikan tanpa dikonversi menjadi teks, compiler melaporkan error pada baris return. Pemeriksaan ini berlaku untuk setiap jalur keluar fungsi, sehingga satu cabang yang lupa mengembalikan nilai juga terdeteksi. Anotasi kembalian menjamin bahwa fungsi selalu memenuhi tanda tangan yang tertulis.

Alur memeriksa dan menjalankan berkas#

Berkas TypeScript tidak dijalankan Node.js apa adanya, sehingga alur kerjanya dimulai dari pemeriksaan tipe. Perintah tsc --noEmit memeriksa tipe berkas yang disebutkan tanpa menghasilkan berkas keluaran apa pun. Apabila pemeriksaan tidak menemukan kesalahan, perintah tsc tanpa opsi tersebut mengompilasi berkas menjadi JavaScript, lalu hasilnya dijalankan dengan Node.js.

# memeriksa tipe tanpa menghasilkan berkas keluaran
tsc --noEmit konversi-suhu.ts

# mengompilasi menjadi JavaScript, lalu menjalankannya
tsc konversi-suhu.ts && node konversi-suhu.js

Suhu ruang kerja: 27.5 derajat Celsius
81.5

Perintah pertama tidak mencetak apa pun karena tidak ada kesalahan tipe. Perintah kedua menghasilkan berkas konversi-suhu.js, lalu Node.js mengeksekusinya dan mencetak dua baris pada keluaran di atas. Tipe yang dianotasi tidak mengubah perilaku eksekusi, karena anotasi hilang pada proses kompilasi.

Pesan error tipe yang tidak cocok#

Cara tercepat memahami anotasi adalah melihat reaksi compiler ketika aturannya dilanggar. Berkas berikut sengaja memuat dua penugasan yang tipe keduanya tidak cocok. Berkas semacam ini tidak dieksekusi, dan pesan errornya diperoleh melalui perintah pemeriksaan tipe.

// tidak-dijalankan
const jumlahPengunjung: number = "dua ratus";

function kalikanDua(nilai: number): number {
  return nilai * 2;
}

const ringkasan: string = kalikanDua(50);

# menampilkan pesan error tanpa mengeksekusi berkas
tsc --noEmit anotasi-salah.ts

anotasi-salah.ts(2,7): error TS2322: Type 'string' is not assignable to type 'number'.
anotasi-salah.ts(8,7): error TS2322: Type 'number' is not assignable to type 'string'.

Setiap baris pesan memuat nama berkas, posisi baris dan kolom seperti (2,7), kode error TS2322, lalu penjelasannya. Frasa not assignable menyatakan bahwa nilai bertipe tertentu tidak dapat ditempatkan pada variabel bertipe lain. Pesan pertama menolak teks "dua ratus" untuk variabel number, sedangkan pesan kedua menolak hasil kalikanDua yang bertipe number untuk variabel string. Perbaikannya adalah menyesuaikan salah satu sisi, yaitu mengubah nilai yang ditugaskan atau mengubah anotasinya.

Kesalahan umum#

Kesalahan berikut sering muncul saat anotasi pertama dipraktikkan.

• Menganggap anotasi sebagai alat konversi. Penulisan const jumlah: number = "10" tidak mengubah teks menjadi angka, sehingga compiler tetap menolaknya. Nilai harus dikonversi terlebih dahulu, misalnya dengan Number, sebelum ditugaskan.
• Menempatkan anotasi setelah nilai. Penulisan let nilai = 5: number bukan anotasi, melainkan error sintaks. Anotasi selalu berada tepat setelah nama variabel atau parameter, sebelum tanda sama dengan.
• Mencampur beberapa tipe pada satu variabel dengan harapan anotasi mengizinkannya. Variabel : number hanya menerima angka, sehingga penugasan teks di kemudian hari tetap ditolak. Gunakan gabungan tipe (union) bila satu variabel memang memuat lebih dari satu tipe.
• Membiarkan fungsi publik tanpa anotasi kembalian. Kesalahan tipe baru terlihat pada berkas pemanggil dengan pesan yang lebih sulit dilacak, sedangkan anotasi kembalian membuat error muncul tepat pada fungsinya.

Ringkasan#

• Anotasi tipe ditulis setelah nama variabel atau parameter dengan pola nama: tipe, misalnya : string untuk teks dan : number untuk angka.
• Tanda tangan fungsi mencakup tipe setiap parameter dan tipe kembaliannya, dan compiler memeriksa setiap jalur return terhadap anotasi tersebut.
• Alur kerja berkas tunggal memakai tsc --noEmit untuk pemeriksaan, lalu tsc dan node untuk kompilasi serta eksekusi.
• Pesan error seperti TS2322 menyebut berkas, baris, kolom, dan alasan penolakan, sehingga perbaikan dapat dilakukan tepat pada sumbernya.

Referensi#

• Everyday Types — The TypeScript Handbook — Panduan tipe yang dipakai sehari-hari, termasuk anotasi pada variabel dan tipe primitif.
• Functions — The TypeScript Handbook — Aturan pengetikan parameter dan nilai kembalian pada fungsi.