TypeScript - Type Annotations: A Beginner's Guide

Hai teman-teman, bakal bintang coding! ? Selamat datang ke perjalanan menarik kami ke dunia TypeScript dan anotasi tipe. Sebagai guru ilmu komputer yang ramah di lingkungan sekitar Anda, saya sangat senang untuk mengantar Anda dalam perjalanan ini. Jangan khawatir jika Anda baru dalam programming – kita akan mulai dari awal dan belajar bersama. Jadi, ambil tas virtual Anda, dan mari kita masuk ke dalam!

Apa Itu Type Annotations?

Bayangkan Anda sedang memesan untuk sebuah perjalanan. Anda memiliki beg yang berbeda untuk jenis item yang berbeda – satu untuk pakaian, satu untuk peralatan mandi, dan satu untuk elektronik. Type annotations di TypeScript seperti label pada beg-beg ini. Mereka memberitahu kita dan komputer tentang jenis "barang" (data) yang kita hadapi.

Dalam dunia TypeScript, type annotations adalah cara untuk secara eksplisit memberitahu compiler tentang jenis nilai yang bisa ditangkap oleh variabel, parameter fungsi, atau properti objek. Itu seperti memberi tahu komputer apa yang akan dicek.

Mengapa Menggunakan Type Annotations?

1. Menangkap kesalahan awal: Mereka membantu kita menemukan kesalahan sebelum menjalankan kode.
2. Dokumentasi kode yang lebih baik: Mereka membuat kode kita lebih mudah untuk dipahami.
3. Pengalaman pengembangan yang lebih baik: Mereka menyediakan autocomplete dan IntelliSense yang lebih baik di editor kode kita.

Sekarang, mari kita lihat berbagai cara kita dapat menggunakan type annotations.

Type Annotations Variabel

Ketika kita membuat variabel di TypeScript, kita dapat menambahkan anotasi tipe untuk menentukan jenis nilai yang harus ditangkapnya.

Sintaks Dasar

let namaVariabel: Type = nilai;

mari lihat beberapa contoh:

let namaSaya: string = "Alice";
let umurSaya: number = 30;
let adalahMurid: boolean = true;

Dalam contoh ini, kita memberitahu TypeScript:

• namaSaya hanya boleh mengandung teks (string)
• umurSaya hanya boleh bilangan
• adalahMurid hanya boleh benar atau salah (boolean)

Jika kita mencoba mengassign nilai jenis lain kemudian, TypeScript akan memperingatkan kita:

namaSaya = 42; // Kesalahan: Type 'number' tidak dapat diassign ke type 'string'

Array dan Jenis Khusus

Kita juga dapat menandai array dan menggunakan jenis khusus:

let favorit: string[] = ["pizza", "coding", "kucing"];
let apaSaja: any = "Saya bisa menjadi apa saja!";
let mungkin: unknown = 4;

• string[] berarti array string
• any adalah jenis spesial yang bisa menjadi apa saja (gunakan dengan hati-hati!)
• unknown adalah alternatif yang lebih aman daripada any

Type Annotations Fungsi

Fungsi dapat memiliki type annotations untuk parameter dan nilai kembalinya.

Sintaks Dasar

function namaFungsi(param1: Type1, param2: Type2): JenisKembalian {
// tubuh fungsi
}

mari lihat beberapa contoh:

function salam(nama: string): string {
return `Halo, ${nama}!`;
}

function tambah(a: number, b: number): number {
return a + b;
}

function catatPesan(pesan: string): void {
console.log(pesan);
}

Dalam contoh ini:

• salam mengambil string dan mengembalikan string
• tambah mengambil dua bilangan dan mengembalikan bilangan
• catatPesan mengambil string tapi tidak mengembalikan apa-apa (void)

Arrow Functions

Fungsi panah juga dapat memiliki type annotations:

const perkalian = (a: number, b: number): number => a * b;

Type Annotations Properti Objek

Ketika bekerja dengan objek, kita dapat menandai propertinya.

Sintaks Dasar

let namaObjek: { properti1: Type1; properti2: Type2 } = {
properti1: nilai1,
properti2: nilai2
};

mari lihat sebuah contoh:

let pengguna: { nama: string; umur: number; isAdmin: boolean } = {
nama: "Bob",
umur: 25,
isAdmin: false
};

Di sini, kita mendefinisikan objek dengan jenis properti tertentu.

Interface untuk Objek Kompleks

Untuk objek yang lebih kompleks, kita dapat menggunakan interface:

interface Orang {
nama: string;
umur: number;
hobi: string[];
salam: () => void;
}

let karyawan: Orang = {
nama: "Charlie",
umur: 30,
hobi: ["membaca", "bermain game"],
salam: () => console.log("Halo!")
};

Interface membantu kita mendefinisikan bentuk objek yang dapat digunakan kembali.

Menggabungkan Semua

Sekarang kita telah belajar tentang berbagai type annotations, mari kita lihat mereka dalam aksi dengan contoh yang lebih kompleks:

interface Buku {
judul: string;
penulis: string;
halaman: number;
sudahDiterbitkan: boolean;
}

function buatDaftarBuku(buku: Buku[]): string[] {
return buku.map(buku => `${buku.judul} oleh ${buku.penulis}`);
}

const bukuSaya: Buku[] = [
{ judul: "TypeScript 101", penulis: "Code Wizard", halaman: 200, sudahDiterbitkan: true },
{ judul: "JavaScript Adventures", penulis: "JS Ninja", halaman: 150, sudahDiterbitkan: false }
];

const judulBuku: string[] = buatDaftarBuku(bukuSaya);
console.log(judulBuku);

Contoh ini menggabungkan berbagai konsep yang kita pelajari:

• Kita mendefinisikan interface Buku
• Kita membuat fungsi buatDaftarBuku yang mengambil array Buku dan mengembalikan array string
• Kita membuat array Buku
• Kita memanggil fungsi dan menyimpan hasilnya dalam variabel dengan anotasi tipe yang benar

Kesimpulan

Selamat! Anda telah mengambil langkah pertama ke dunia anotasi tipe TypeScript. Ingat, anotasi tipe ini seperti petunjuk yang ramah mengarahkan Anda dan kode Anda ke keselamatan. Mereka mungkin tampak mengintimidasi pada awalnya, tapi dengan latihan, mereka akan menjadi biasa.

Sekiranya Anda terus belajar dan mencoba berbagai jenis dan anotasi, jangan takut untuk membuat kesalahan – itu adalah bagaimana kita belajar dan tumbuh!

Tetap coding, tetap ciek, dan ingat – setiap master pernah menjadi pemula. Selamat belajar TypeScript! ??‍??‍?

Credits: Image by storyset