TypeScript - Tipe Peta: Panduan untuk Pemula

Hai teman-teman, para ahli TypeScript masa depan! Hari ini, kita akan mengemban perjalanan yang menarik ke dalam dunia Tipe Peta. Jangan khawatir jika Anda baru dalam pemrograman - saya akan menjadi panduan yang ramah, dan kita akan berjalan langkah demi langkah. Pada akhir panduan ini, Anda akan dapat memetakan tipe seperti seorang pro!

Apa Itu Tipe Peta?

Sebelum kita masuk ke dalam, mari kita mengerti apa itu Tipe Peta. Bayangkan Anda memiliki kotak cokelat campuran, dan Anda ingin membuat kotak baru dimana setiap cokelat dibungkus foil emas. Itu sebenarnya apa yang dilakukan Tipe Peta di TypeScript - mereka mengambil tipe yang sudah ada dan transformasikan menjadi tipe baru berdasarkan aturan tertentu.

Tipe Peta Bawaan

TypeScript datang dengan beberapa Tipe Peta yang sudah ditentukan dan sangat berguna. Mari kita lihat satu per satu:

1. Partial

Tipe Partial<T> membuat semua properti T menjadi opsional. Itu seperti mengubah resep ketat menjadi yang fleksibel di mana Anda dapat melewatkan beberapa bahan.

interface Recipe {
name: string;
ingredients: string[];
cookingTime: number;
}

type FlexibleRecipe = Partial<Recipe>;

// Sekarang kita dapat membuat resep tanpa semua properti
const quickSnack: FlexibleRecipe = {
name: "Roti Bakar",
// Kita dapat melewati ingredients dan cookingTime
};

Dalam contoh ini, FlexibleRecipe memungkinkan kita membuat resep tanpa menentukan semua properti. Itu sempurna ketika Anda ingin mengupdate hanya sebagian objek.

2. Required

Required<T> adalah kebalikan dari Partial<T>. Itu membuat semua properti diperlukan, bahkan jika mereka adalah opsional dalam tipe asli.

interface UserProfile {
name: string;
age?: number;
email?: string;
}

type CompleteUserProfile = Required<UserProfile>;

// Sekarang kita harus menyediakan semua properti
const user: CompleteUserProfile = {
name: "Alice",
age: 30,
email: "[email protected]"
};

Di sini, CompleteUserProfile memastikan bahwa kita menyediakan semua properti, termasuk age dan email yang optional dalam UserProfile.

3. Readonly

Readonly<T> membuat semua properti T menjadi read-only. Itu seperti memasukkan tipe Anda ke dalam kaca - Anda dapat melihat, tapi Anda tidak dapat sentuh!

interface Toy {
name: string;
price: number;
}

type CollectibleToy = Readonly<Toy>;

const actionFigure: CollectibleToy = {
name: "Superhero",
price: 19.99
};

// Ini akan menyebabkan kesalahan
// actionFigure.price = 29.99;

Dalam contoh ini, setelah kita membuat actionFigure, kita tidak dapat mengubah propertinya. Itu bagus untuk membuat objek immutable.

4. Pick<T, K>

Pick<T, K> membuat tipe baru dengan memilih hanya properti yang ditentukan K dari T. Itu seperti memilih fitur favorit Anda dari tipe.

interface Smartphone {
brand: string;
model: string;
year: number;
color: string;
price: number;
}

type BasicPhoneInfo = Pick<Smartphone, 'brand' | 'model'>;

const myPhone: BasicPhoneInfo = {
brand: "TechBrand",
model: "X2000"
};

Di sini, BasicPhoneInfo hanyatermasuk brand dan model properti dari Smartphone, meninggalkan yang lain.

5. Omit<T, K>

Omit<T, K> adalah kebalikan dari Pick<T, K>. Itu membuat tipe baru dengan menghapus properti yang ditentukan K dari T.

interface Book {
title: string;
author: string;
pages: number;
isbn: string;
}

type BookPreview = Omit<Book, 'pages' | 'isbn'>;

const preview: BookPreview = {
title: "Petualangan TypeScript",
author: "Wizzard Kode"
};

Dalam kasus ini, BookPreview termasuk semua properti Book kecuali pages dan isbn.

Contoh Penggunaan Tipe Peta

Sekarang kita telah melihat Tipe Peta bawaan, mari kita lihat beberapa contoh penggunaannya dalam situasi dunia nyata.

Contoh 1: Membuat State Form

Bayangkan Anda sedang membuat form, dan Anda ingin mencatat field mana yang telah diubah:

interface LoginForm {
username: string;
password: string;
rememberMe: boolean;
}

type FormTouched = { [K in keyof LoginForm]: boolean };

const touchedFields: FormTouched = {
username: true,
password: false,
rememberMe: true
};

Di sini, kita telah membuat FormTouched tipe yang memiliki semua key seperti LoginForm, tapi semua nilai adalah boolean yang menunjukkan apakah field tersebut telah ditentukan.

Contoh 2: Wrapper Respon API

Asumsikan Anda memiliki API yang mengembalikan jenis data yang berbeda, dan Anda ingin mengemas setiap respon dalam format standar:

interface ApiResponse<T> {
data: T;
status: 'success' | 'error';
timestamp: number;
}

type UserData = { id: number; name: string; email: string };
type ProductData = { id: number; name: string; price: number };

const userResponse: ApiResponse<UserData> = {
data: { id: 1, name: "John Doe", email: "[email protected]" },
status: 'success',
timestamp: Date.now()
};

const productResponse: ApiResponse<ProductData> = {
data: { id: 101, name: "Laptop", price: 999.99 },
status: 'success',
timestamp: Date.now()
};

Contoh ini menunjukkan bagaimana kita dapat menggunakan generik dengan Tipe Peta untuk membuat struktur tipe yang fleksibel dan dapat digunakan kembali.

Membuat Tipe Peta Khusus

Sekarang, mari kita fleksikan otot TypeScript kita dan buat beberapa Tipe Peta khusus!

Tipe Khusus 1: Nullable

Mari kita buat tipe yang membuat semua properti nullable:

type Nullable<T> = { [K in keyof T]: T[K] | null };

interface Person {
name: string;
age: number;
}

type NullablePerson = Nullable<Person>;

const maybePerson: NullablePerson = {
name: "Jane",
age: null  // Ini sekarang valid
};

Tipe Nullable<T> memungkinkan setiap properti untuk menjadi jenis aslinya atau null.

Tipe Khusus 2: Freezable

Mari kita buat tipe yang menambahkan metode freeze ke objek:

type Freezable<T> = T & { freeze(): Readonly<T> };

interface Config {
theme: string;
fontSize: number;
}

function makeFreezable<T>(obj: T): Freezable<T> {
return {
...obj,
freeze() {
return Object.freeze({ ...this }) as Readonly<T>;
}
};
}

const config = makeFreezable<Config>({
theme: "dark",
fontSize: 14
});

const frozenConfig = config.freeze();
// frozenConfig.theme = "light";  // Ini akan menyebabkan kesalahan

Tipe ini menambahkan metode freeze ke setiap objek, memungkinkan kita untuk membuat versi immutable nya.

Kesimpulan

Wah, kita telah menempuh banyak hal hari ini! Dari Tipe Peta bawaan hingga membuat tipe khusus sendiri, Anda telah melihat betapa kuat dan fleksibel TypeScript dapat menjadi. Tipe Peta adalah seperti tongkat sihir di dalam peralatan TypeScript Anda - mereka memungkinkan Anda untuk transformasi dan manipulasi tipe dalam cara yang sangat berguna.

Ingat, kunci untuk menguasai Tipe Peta adalah latihan. Cobalah untuk membuat yang Anda sendiri, eksperimen dengan kombinasi yang berbeda, dan segera Anda akan menulis kode TypeScript yang tidak hanya fungsional, tapi elegan dan aman jenis.

Terus coding, terus belajar, dan yang paling penting, bersenang-senang dengan TypeScript!

Credits: Image by storyset