TypeScript: Membuat Tipe dari Tipe

Halo sana, para master TypeScript masa depan! Saya sangat senang menjadi panduan Anda dalam perjalanan menarik melalui dunia tipe TypeScript. Sebagai guru ilmu komputer dengan tahun-tahun pengalaman, saya telah melihat secara langsung bagaimana pemahaman tipe dapat mengubah seorang pemula menjadi ahli pemrograman. Jadi, mari kita mulai petualangan ini bersama!

Tipe Union

Bayangkan Anda di toko es krim, dan Anda dapat memilih antara coklat atau vanila. Dalam TypeScript, kita menyebut jenis pilihan ini sebagai "tipe union." Itu seperti mengatakan, "Saya ingin ini atau itu."

Mari kita masuk ke dalam beberapa kode:

type Rasa = "chocolate" | "vanilla";

let esKrimSaya: Rasa;
esKrimSaya = "chocolate"; // Ini baik
esKrimSaya = "strawberry"; // Kesal! Tipe '"strawberry"' tidak dapat diassign ke tipe 'Rasa'.

Dalam contoh ini, Rasa adalah tipe union yang dapat menjadi "chocolate" atau "vanilla". Ketika kita mencoba mengassign "strawberry" ke esKrimSaya, TypeScript mengatakan, "Tunggu! Itu bukan di menu!"

Tipe union sangat berguna ketika Anda ingin membatasi nilai yang mungkin sebuah variabel dapat memiliki. Mari lihat contoh lain:

type Jawaban = "yes" | "no" | "maybe";

function menjawabPertanyaan(jawaban: Jawaban) {
if (jawaban === "yes") {
console.log("Great!");
} else if (jawaban === "no") {
console.log("Oh no!");
} else {
console.log("Saya melihat Anda belum yakin.");
}
}

menjawabPertanyaan("yes"); // Bekerja dengan baik
menjawabPertanyaan("perhaps"); // Kesal! Argumen tipe '"perhaps"' tidak dapat diassign ke parameter tipe 'Jawaban'.

Tipe Intersection

Sekarang, mari bicarakan tentang tipe intersection. Jika tipe union adalah tentang "ini atau itu," tipe intersection adalah tentang "ini dan itu." Itu seperti memesan sebuah combo meal di restoran makanan cepat - Anda mendapat burger dan kentang dan minuman.

Ini bagaimana terlihat dalam kode:

type Nama = {
firstName: string;
lastName: string;
};

type Umur = {
age: number;
};

type Orang = Nama & Umur;

let john: Orang = {
firstName: "John",
lastName: "Doe",
age: 30
};

Dalam contoh ini, Orang adalah tipe intersection yang menggabungkan Nama dan Umur. Itu seperti mengatakan, "Seorang harus memiliki nama depan, nama belakang, dan umur."

Ini adalah contoh lain yang menarik:

type Swimmer = {
swim: () => void;
};

type Flyer = {
fly: () => void;
};

type IkanTerbang = Swimmer & Flyer;

let nemo: IkanTerbang = {
swim: () => console.log("Renang di laut"),
fly: () => console.log("Terbang di atas gelombang")
};

nemo.swim(); // Output: Renang di laut
nemo.fly();  // Output: Terbang di atas gelombang

Tipe Utilitas

TypeScript datang dengan set utilitas tipe yang membantu kita memanipulasi dan mentransformasi tipe yang sudah ada. Mereka seperti pisau multifungsi dari tipe! Mari kita lihat beberapa yang paling sering digunakan:

Partial

Partial<T> membuat semua properti dalam tipe menjadi opsional. Itu seperti mengatakan, "Saya ingin semuanya ini, tapi saya tidak memerlukan semuanya sekarang."

interface Todo {
title: string;
description: string;
completed: boolean;
}

function updateTodo(todo: Todo, fieldsToUpdate: Partial<Todo>) {
return { ...todo, ...fieldsToUpdate };
}

const myTodo = {
title: "Pelajari TypeScript",
description: "Belajar selama 2 jam",
completed: false
};

const updatedTodo = updateTodo(myTodo, {
description: "Belajar selama 3 jam"
});

console.log(updatedTodo);
// Output: { title: "Pelajari TypeScript", description: "Belajar selama 3 jam", completed: false }

Pick<T, K>

Pick<T, K> membentuk tipe dengan memilih set properti K dari T. Itu seperti memilih buah kesukaan Anda dari keranjang buah.

interface User {
id: number;
name: string;
email: string;
age: number;
}

type RingkasanUser = Pick<User, "id" | "name">;

const ringkasanUser: RingkasanUser = {
id: 1,
name: "John Doe"
};

Omit<T, K>

Omit<T, K> membentuk tipe dengan memilih semua properti dari T dan kemudian menghapus K. Itu sebaliknya dengan Pick.

interface Product {
id: number;
name: string;
price: number;
description: string;
}

type PreviewProduct = Omit<Product, "description">;

const previewProduct: PreviewProduct = {
id: 1,
name: "Perangkat Menarik",
price: 99.99
};

Berikut adalah tabel yang menyummarisakan tipe utilitas ini:

Tipe Utilitas	Deskripsi
Partial	Membuat semua properti dalam T opsional
Pick<T, K>	Membentuk tipe dengan memilih set properti K dari T
Omit<T, K>	Membentuk tipe dengan memilih semua properti dari T dan kemudian menghapus K

Operator Typeof

Operator typeof di TypeScript memungkinkan kita untuk membuat tipe berdasarkan bentuk nilai yang sudah ada. Itu seperti mengambil cetakan dari objek untuk membuat objek lain dengan bentuk yang sama.

Mari kita lihat contoh:

const user = {
name: "John",
age: 30,
location: "New York"
};

type User = typeof user;

const anotherUser: User = {
name: "Jane",
age: 25,
location: "London"
};

Dalam contoh ini, kita menggunakan typeof user untuk membuat tipe User yang cocok dengan bentuk objek user. Ini sangat berguna ketika Anda ingin memastikan bahwa beberapa objek memiliki struktur yang sama.

Ini adalah contoh lain di mana typeof sangat berguna:

const colors = ["red", "green", "blue"] as const;
type Color = typeof colors[number];

let myColor: Color = "red"; // OK
myColor = "yellow"; // Kesal: Tipe '"yellow"' tidak dapat diassign ke tipe '"red" | "green" | "blue"'.

Dalam kasus ini, kita menggunakan typeof bersamaan dengan tipe akses indeks untuk membuat tipe gabungan dari array konstanta.

Dan itu adalah, teman-teman! Kita telah melakukan perjalanan melalui negeri tipe TypeScript, membuat tipe baru dari yang sudah ada. Ingat, latihan membuat sempurna, jadi jangan takut untuk mencoba konsep ini dalam proyek Anda sendiri. Selamat coding, dan may the types be ever in your favor!

Credits: Image by storyset