TypeScript - Jenis: Panduan Pemula

Hai sana, bintang coding masa depan! Hari ini, kita akan melihat dunia yang menarik jenis dalam TypeScript. Jangan khawatir jika Anda belum pernah menulis baris kode sebelumnya - saya akan menjadi panduan temananda dalam perjalanan yang menarik ini. Pada akhir tutorial ini, Anda akan terkejut betapa banyak yang Anda pelajari. Jadi, mari kita mulai!

Apa Itu Jenis dalam TypeScript?

Sebelum kita melompat ke lubang dalam, mari bicarakan apa itu jenis dan mengapa itu penting. Bayangkan jenis sebagai label yang kita tempelkan pada data kita. Seperti bagaimana kita mengatur lemari pakaian kita dengan bagian yang berbeda untuk kaos, celana, dan sepatu, jenis membantu kita mengatur kode kita dan mencegah kita dari menempatkan sepatu metaphoris di dalam drawer kaos!

TypeScript adalah superset dari JavaScript yang menambahkan tipe statis opsional. Ini berarti kita dapat memberitahu TypeScript tepat apa jenis data yang kita gunakan, yang membantu menangkap kesalahan sebelum kode kita bahkan dijalankan. Itu seperti memiliki seorang teman yang membantu melihat bahu Anda, menunjukkan kesalahan potensial sebelum Anda membuatnya.

Jenis Any: Joker TypeScript

Mari kita mulai dengan jenis yang paling fleksibel dalam TypeScript: any. Itu seperti joker di dalam kartu - itu bisa menjadi apa saja!

let myVariable: any = 42;
myVariable = "Hello, World!";
myVariable = true;

Dalam contoh ini, myVariable bisa menjadi number, kemudian string, kemudian boolean. Itu sangat fleksibel, tapi dengan kekuatan yang besar datang tanggung jawab yang besar. Menggunakan any terlalu sering menghapus tujuan menggunakan TypeScript, jadi gunakanlah itu hati-hati!

Jenis Bawaan: Fondasi TypeScript

TypeScript datang dengan beberapa jenis bawaan yang mencakup kebutuhan kita. Mari kita jelajahi mereka satu per satu:

1. Number

let age: number = 30;
let price: number = 9.99;

Jenis Number dalam TypeScript bisa adalah integer atau nilai pecahan. Tidak perlu khawatir tentang jenis number yang berbeda seperti dalam beberapa bahasa lain!

2. String

let name: string = "Alice";
let greeting: string = `Hello, ${name}!`;

String dapat didefinisikan dengan tanda petik tunggal, tanda petik ganda, atau backtick. Backtick memungkinkan kita untuk menanamkan ekspresi menggunakan ${}.

3. Boolean

let isStudent: boolean = true;
let hasPassedExam: boolean = false;

Boolean adalah sederhana - mereka adalah true atau false. Bayangkan mereka sebagai pertanyaan ya/tidak untuk kode Anda.

4. Array

let numbers: number[] = [1, 2, 3, 4, 5];
let fruits: Array<string> = ["apple", "banana", "orange"];

Array dapat menampung beberapa nilai dari jenis yang sama. Kita dapat mendefinisikan mereka menggunakan kurung siku atau sintaks Array<T>.

5. Tuple

let person: [string, number] = ["Alice", 30];

Tuple adalah array dengan jumlah elemen tetap, di mana setiap elemen dapat memiliki jenis yang berbeda. Mereka seperti kotak kecil, teratur dengan kompartemen spesifik untuk setiap item.

6. Enum

enum Color {
Red,
Green,
Blue
}
let favoriteColor: Color = Color.Blue;

Enums memungkinkan kita mendefinisikan set konstanta yang dinamai. Mereka bagus untuk merepresentasikan set opsi tetap.

7. Void

function logMessage(message: string): void {
console.log(message);
}

Void digunakan untuk menandakan bahwa fungsi tidak mengembalikan apa-apa. Itu seperti mengirim surat tanpa mengharapkan jawaban.

8. Null dan Undefined

let notDefined: undefined = undefined;
let empty: null = null;

Jenis ini merepresentasikan keabsenan nilai. Mereka seperti kotak kosong - satu yang kosong dengan kehendak (null) dan satu yang belum diisi (undefined).

Berikut adalah tabel yang menggabungkan jenis bawaan yang kita pelajari:

Jenis	Deskripsi	Contoh
number	Nilai numerik (integer atau pecahan)	let age: number = 30;
string	Data teks	let name: string = "Alice";
boolean	Nilai true atau false	let isStudent: boolean = true;
array	Koleksi nilai jenis yang sama	let numbers: number[] = [1, 2, 3];
tuple	Array panjang tetap dengan elemen jenis tertentu	let person: [string, number] = ["Alice", 30];
enum	Set konstanta yang dinamai	enum Color { Red, Green, Blue }
void	Keabsenan nilai kembalian dalam fungsi	function logMessage(message: string): void { ... }
null	Keabsenan nilai objek	let empty: null = null;
undefined	Variabel yang belum diassign nilai	let notDefined: undefined = undefined;

Jenis yang Ditentukan Pengguna: Membuat Alat Sendiri

Sekarang kita telah melihat jenis bawaan, mari bicarakan bagaimana Anda dapat membuat jenis khusus Anda sendiri. Ini adalah tempat TypeScript benar-benar bercahaya!

1. Interfaces

Interfaces memungkinkan kita mendefinisikan struktur objek. Bayangkan mereka sebagai blueprint untuk objek.

interface Person {
name: string;
age: number;
greet(): void;
}

let alice: Person = {
name: "Alice",
age: 30,
greet() {
console.log(`Hello, my name is ${this.name}`);
}
};

Dalam contoh ini, kita telah mendefinisikan sebuah Person interface dan membuat objek yang mengikuti struktur ini. Itu seperti membuat formulir yang semua orang harus mengisi - semua orang perlu menyediakan informasi yang sama.

2. Classes

Kelas adalah cara untuk membuat komponen yang dapat digunakan kembali. Mereka seperti pemotong kue - Anda mendefinisikan bentuk sekali, dan kemudian Anda dapat membuat banyak kue (objek) seperti itu!

class Student {
name: string;
grade: number;

constructor(name: string, grade: number) {
this.name = name;
this.grade = grade;
}

study() {
console.log(`${this.name} is studying hard!`);
}
}

let bob = new Student("Bob", 10);
bob.study(); // Output: "Bob is studying hard!"

Di sini, kita telah membuat kelas Student dengan properti (name dan grade) dan metode (study). Kita dapat membuat banyak siswa menggunakan kelas ini.

3. Type Aliases

Alias jenis memungkinkan kita membuat nama baru untuk jenis. Mereka berguna untuk membuat jenis kompleks atau memberi nama yang lebih menarik ke jenis yang sudah ada.

type Point = {
x: number;
y: number;
};

let center: Point = { x: 0, y: 0 };

Dalam contoh ini, kita telah membuat jenis Point yang merepresentasikan titik dalam ruang 2D. Itu adalah cara sederhana untuk mengelompokkan properti yang berkaitan bersamaan.

4. Union Types

Jenis gabungan memungkinkan nilai menjadi salah satu dari beberapa jenis. Itu seperti mengatakan, "Ini bisa menjadi ini atau itu."

type Result = number | string;

function getResult(value: boolean): Result {
return value ? "Success" : 404;
}

Di sini, Result bisa menjadi number atau string. Ini sangat berguna saat nilai bisa berupa jenis yang berbeda tergantung pada kondisi tertentu.

5. Intersection Types

Jenis silang menggabungkan jenis-jenis menjadi satu. Itu seperti mengatakan, "Ini harus ini DAN itu."

interface Colorful {
color: string;
}

interface Circle {
radius: number;
}

type ColorfulCircle = Colorful & Circle;

let myCircle: ColorfulCircle = {
color: "red",
radius: 5
};

Dalam contoh ini, ColorfulCircle adalah Colorful dan Circle. Itu harus memiliki color dan radius.

Dan itu saja! Kita telah melihat jenis dasar TypeScript, dari jenis any yang fleksibel ke jenis bawaan dan jenis yang ditentukan pengguna. Ingat, jenis dalam TypeScript adalah seperti superpower coding Anda - mereka membantu Anda menulis kode yang lebih bersih dan dapat dipercaya, dan menangkap kesalahan sebelum mereka menjadi masalah.

Buatlanjutkan perjalanan TypeScript Anda, terus mencoba jenis ini. Cobalah menggabungkannya dalam cara yang berbeda, dan jangan takut membuat kesalahan - itu adalah bagaimana kita belajar! Sebelum Anda menyadari, Anda akan mengetik seperti seorang pro, membuat kode yang kuat dan bebas kesalahan.

Selamat coding, dan semoga jenis Anda selalu kuat!

Credits: Image by storyset