TypeScript - Type Annotations: A Beginner's Guide

Hai sana, bakal bintang pengkomputeran! ? Selamat datang ke perjalanan menarik kita ke dunia TypeScript dan anotasi tipe. Sebagai guru sains komputer tetangga yang ramah, saya sangat gembira untuk memandu anda dalam petualangan ini. Jangan khawatir jika anda baru dalam programming - kita akan mulai dari awal dan bekerja bersama-sama. Jadi, ambil beg virtual anda, dan mari kita masuk ke dalam!

Apa Itu Anotasi Tipe?

Bayangkan anda sedang membawa persiapan untuk perjalanan. Anda memiliki beg yang berbeda untuk item yang berbeda - satu untuk pakaian, satu untuk peralatan mandi, dan satu untuk elektronik. Anotasi tipe di TypeScript seperti label di beg ini. Mereka memberitahu kita dan komputer tentang jenis "barang" (data) yang kita hadapi.

Dalam dunia TypeScript, anotasi tipe adalah cara untuk secara eksplisit memberitahu compiler jenis nilai yang bisa dipegang oleh variabel, parameter fungsi, atau properti objek. Itu seperti memberi komputer petunjuk tentang apa yang akan datang.

Mengapa Menggunakan Anotasi Tipe?

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

Sekarang, mari kita lihat berbagai cara kita bisa menggunakan anotasi tipe.

Anotasi Tipe Variabel

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

Sintaks Dasar

let namaVariabel: Tipe = 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 yang berbeda kemudian, TypeScript akan peringatkan kita:

namaSaya = 42; // Kesalahan: Tipe 'number' tidak dapat diassign ke tipe 'string'

Array dan Tipe Khusus

Kita juga bisa menganotasi array dan menggunakan tipe khusus:

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

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

Anotasi Tipe Fungsi

Fungsi bisa memiliki anotasi tipe untuk parameter dan nilai kembali.

Sintaks Dasar

function namaFungsi(param1: Tipe1, param2: Tipe2): TipeKembali {
// 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)

Fungsi Panah

Fungsi panah juga bisa memiliki anotasi tipe:

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

Anotasi Tipe Properti Objek

Ketika bekerja dengan objek, kita bisa menganotasi propertinya.

Sintaks Dasar

let namaObjek: { properti1: Tipe1; properti2: Tipe2 } = {
properti1: nilai1,
properti2: nilai2
};

mari lihat 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 bisa 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 lagi.

Menggabungkan Semua

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

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

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

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

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

Contoh ini menggabungkan berbagai konsep yang kita telah belajar:

• 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 adalah seperti petunjuk ramah yang memandu anda dan kode anda ke keselamatan. Mereka mungkin terlihat menakutkan pada awalnya, tapi dengan latihan, mereka akan menjadi kebiasaan.

Sekarang, teruskan untuk mencoba berbagai jenis tipe dan anotasi. Jangan takut untuk membuat kesalahan - itu adalah bagaimana kita belajar dan tumbuh!

Berikut adalah tabel praktis yang menggabungkan anotasi tipe yang kita telah pelajari:

Anotasi Tipe	Contoh	Deskripsi
Tipe Dasar	let nama: string = "Alice";	Untuk nilai sederhana seperti string, number, boolean
Tipe Array	let bilangan: number[] = [1, 2, 3];	Untuk array jenis tertentu
Tipe Fungsi	function tambah(a: number, b: number): number	Untuk parameter dan nilai kembali fungsi
Tipe Objek	let pengguna: { nama: string; umur: number; };	Untuk properti objek
Interface	interface Orang { nama: string; umur: number; }	Untuk mendefinisikan bentuk objek kompleks

Teruskan untuk mengoding, tetap curiga, dan ingat - setiap master pernah menjadi pemula. Selamat belajar TypeScript! ??‍??‍?

Credits: Image by storyset