Last updated on 12 Jan 2022

Belajar TypeScript – Utility Types / Tipe Utilitas

1. Partial<Type> (Rilis versi 2.1)

Membangun tipe dengan semua properti Type yang diatur ke opsional. Utilitas ini akan mengembalikan tipe yang mewakili semua himpunan pada bagian dari tipe tertentu dan tentunya bersifat opsional, mari kita bahas code dibawah ini:

interface Laptop {
  title: string;
  year: number;
}

// Bagian ini kita assign value ke variable todo1Partial dengan tipe data Laptop
const todo1Partial: Laptop = {
  title: 'MacBook Pro',
  year: 2021,
};

// Contoh Menggunakan Partial
function updateLaptopPartial(todo: Laptop, fieldsToUpdate: Partial<Laptop>) {
  return { ...todo, ...fieldsToUpdate };
}

const updateLaptop1 = updateLaptopPartial(todo1Partial, {
  year: 2020,
});

// Contoh tidak menggunakan Partial
function updateLaptopNotPartial(todo: Laptop, fieldsToUpdate: Laptop) {
  return { ...todo, ...fieldsToUpdate };
}

// Code di bawah ini pasti akan error, karena key title wajib diisi (required)
const updateLaptop2 = updateLaptopNotPartial(todo1Partial, {
  year: 2020,
});

Link Code

Pada fungsi updateTodo terdapat input properti:

Keduanya memiliki perbedaan yaitu jika pada no 1 kita diwajibkan mengisi semua key (title & description), sedangkan pada no 2 kita bisa mengisi sebagian key nya saja.  

2. Record<Keys, Type> (Rilis versi 2.1)

Membuat Type objek yang key propertinya adalah Keys dan nilai propertinya adalah Type. Utilitas ini dapat digunakan untuk memetakan properti dari suatu tipe ke tipe lain.

Contoh:

interface CarInfo {
  transmission: 'AT' | 'MT';
}
type CarBrand = 'bmw' | 'toyota' | 'daihatsu';

const cars: Record<CarBrand, CarInfo> = {
  bmw: { transmission: 'AT' },
  toyota: { transmission: 'MT' },
  daihatsu: { transmission: 'AT' },
};

// Contoh mapping data berbentuk array object
type CarDataRows = Record<CarBrand, CarInfo>[];

const carDataRows: CarDataRows = [
  {
    bmw: { transmission: 'AT' },
    toyota: { transmission: 'MT' },
    daihatsu: { transmission: 'AT' },
  },
  {
    bmw: { transmission: 'AT' },
    toyota: { transmission: 'MT' },
    daihatsu: { transmission: 'AT' },
  },
];

Link Code

Pada kode diatas variable carsmemiliki keys bmw, toyota dan daihatsu dan ketiga key wajib ada karena memiliki tipe data CarBrand, sedangkan valuenya memiliki tipe data object CarInfo. Untuk detailnya bisa lihat table dibawah ini:

3. Pick<Type, Keys> (Rilis versi 2.1)

Membuat sebuah tipe data dengan memilih 1 atau lebih properti Keys (string literal atau gabungan string literal) dari Type

Contoh:

interface Employee {
  name: string;
  position: 'Frontend' | 'Backend';
  team: string;
  adddress: string;
  date_of_bird: string;
}

// Memilih beberapa key dari interface Employee
type EmployeePreview = Pick<Employee, 'name' | 'position'>;

// Dengan cara ini variable employeePreview
// tidak perlu memasukkan semua key, cukup sebagian key
// yang telah diambil 'name' dan 'position'
const employeePreview: EmployeePreview = {
  name: 'Fahrul',
  position: 'Frontend',
};

4. Omit<Type, Keys> (Rilis versi 3.5)

Berfungsi untuk membuat tipe dengan memilih semua properti dari Type lalu menghapus beberapa key. 

Contoh:

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

// Mengeliminasi key description
type TodoPreview = Omit<Todo, 'description'>;

interface TodoPreview {
  title: string;
  completed: boolean;
  createdAt: number;
}

const todo: TodoPreview = {
  title: 'Clean room',
  completed: false,
  createdAt: 1615544252770,
};

type TodoInfo = Omit<Todo, 'completed' | 'createdAt'>;

const todoInfo: TodoInfo = {
  title: 'Pick up kids',
  description: 'Kindergarten closes at 5pm',
};

Sekian pembahasan tentang TIpe Utilities di TypeScript, semoga bermanfaat untuk kita semua. Aamiiin. Mohon maaf jika ada kalimat yang membingungkan, silahkan diskusi di kolom komentar ya.

Terima kasih