TypeScript - Types: A Beginner's Guide

Halo teman-teman, bakal bintang coding! Hari ini, kita akan masuk ke dunia yang menarik dari TypeScript types. 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 Types dalam TypeScript?

Sebelum kita melompat ke dalam, mari bicarakan tentang apa itu types dan mengapa mereka penting. Bayangkan types sebagai label yang kita tempelkan pada data kita. Seperti halnya kita mengatur lemari pakaian dengan berbagai seksi untuk kaos, celana, dan sepatu, types membantu kita mengatur kode kita dan menghindari kita memasukkan sepatu ke dalam drawer kaos!

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

Tipe Any: Joker di TypeScript

mari mulai dengan tipe yang paling fleksibel di TypeScript: any. Itu seperti joker dalam sebuah 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, tetapi dengan kekuatan yang besar datang tanggung jawab yang besar. Menggunakan any terlalu sering menghapus tujuan menggunakan TypeScript, jadi gunakanlah itu dengan hati-hati!

Tipe Bawaan: Blok Pembangunan TypeScript

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

1. Number

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

Numbers di TypeScript bisa adalah integer atau nilai floating-point. Tidak perlu khawatir tentang jenis number yang berbeda seperti di beberapa bahasa lain!

2. String

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

Strings bisa didefinisikan dengan tanda kutip tunggal, kutip ganda, atau backtick. Backtick memungkinkan kita menanamkan ekspresi menggunakan ${}.

3. Boolean

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

Booleans sangat 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"];

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

5. Tuple

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

Tuples adalah arrays dengan jumlah elemen tetap, di mana setiap elemen bisa memiliki jenis yang berbeda. Mereka seperti sebuah kotak kecil, teratur dengan khusus untuk setiap item.

6. Enum

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

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

7. Void

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

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

8. Null dan Undefined

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

Tipe ini merepresentasikan keabsenan nilai. Mereka seperti kotak kosong - satu yang intentional kosong (null) dan satu yang belum diisi (undefined).

Berikut adalah tabel yang menggabungkan tipe bawaan yang kita bahas:

Tipe	Deskripsi	Contoh
number	Nilai numerik (integer atau floating-point)	let age: number = 30;
string	Data teks	let name: string = "Alice";
boolean	Nilai true atau false	let isStudent: boolean = true;
array	Koleksi nilai dari 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 dinamai	enum Color { Red, Green, Blue }
void	Keabsenan nilai kembali di fungsi	function logMessage(message: string): void { ... }
null	Keabsenan nilai objek intentional	let empty: null = null;
undefined	Variabel yang belum diassign nilai	let notDefined: undefined = undefined;

Tipe yang Didefinisikan Pengguna: Membuat Alat Sendiri

Sekarang kita telah melihat tipe bawaan, mari bicarakan tentang bagaimana Anda bisa membuat tipe custom sendiri. Ini adalah tempat TypeScript benar-benar berkilau!

1. Interfaces

Interfaces memungkinkan kita mendefinisikan struktur dari 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

Classes adalah cara untuk membuat komponen yang dapat digunakan kembali. Mereka seperti cookie cutter - Anda mendefinisikan bentuk sekali, dan kemudian Anda bisa 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 membuat sebuah Student class dengan properti (name dan grade) dan sebuah metode (study). Kita bisa membuat banyak siswa menggunakan class ini.

3. Type Aliases

Type aliases memungkinkan kita membuat nama baru untuk tipe. Mereka berguna untuk membuat tipe kompleks atau memberi nama yang lebih menarik ke tipe yang sudah ada.

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

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

Dalam contoh ini, kita membuat sebuah Point tipe yang mewakili titik di ruang 2D. Itu adalah cara sederhana untuk mengelompokkan properti yang terkait bersama.

4. Union Types

Union types memungkinkan nilai untuk 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 ketika nilai bisa berupa jenis yang berbeda tergantung pada kondisi tertentu.

5. Intersection Types

Intersection types menggabungkan beberapa 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 baik Colorful maupun Circle. Itu harus memiliki baik color dan radius.

Dan itu saja! Kita telah melihat dasar-dasar tipe TypeScript, dari tipe any yang fleksibel ke tipe bawaan dan tipe yang didefinisikan pengguna. Ingat, tipe 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.

Sekarang Anda teruskan perjalanan TypeScript Anda, terus mencoba tipe ini. Cobalah menggabungkan mereka dalam cara yang berbeda-beda, dan jangan takut membuat kesalahan - itu adalah bagaimana kita belajar! Sebelum Anda tahu, Anda akan mengetik seperti seorang pro, menciptakan kode yang kuat dan bebas kesalahan.

Selamat coding, dan semoga tipe Anda selalu kuat!

Credits: Image by storyset