Press "Enter" to skip to content

Belajar TypeScript – Tipe Utilitas

1

Last updated on 12 Jan 2022

Belajar TypeScript – Utility Types / Tipe Utilitas

 
Mungkin timbul dibenak kamu, Tipe Utilitas untuk apa ya? bagaimana cara implementasi nya? Oke mari ktia bahas.

Tipe Utilitas di Typescript berguna untuk mentransformasikan bentuk tipe data umum ke dalam bentuk tipe data yang kita inginkan dan kita dapat mengaksesnya dimanapun tanpa perlu melakukan import, kok bisa? karena utilitas tersebut tersedia secara global.

Tipe Utilitas di Typescript ada banyak dan versi rilisnya pun berbeda-beda, so kita akan bahas beberapa tipe utilitas yang umum digunakan saja ya.
 
Beberapa tipe utilitas yang akan kita bahas yaitu:
  1. Partial (Rilis versi 2.1)
  2. Record (Rilis versi 2.1)
  3. Pick (Rilis versi 2.1)
  4. Omit (Rilis versi 3.5)

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:

No Key Tipe
1 todo Todo
2 fieldsToUpdate Partial<Todo>

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:

Keys (Key)

Tipe Data CarBrand

Type (Value)

Tipe Data CarInfo

bmw { transmission: ‘AT’ }
toyota { transmission: ‘MT’ }
daihatsu { transmission: ‘AT’ }

 

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',
};

Link Code

Dengan menggunakan Pick, kita tidak perlu membuat interface baru, melainkan cukup dengan membuat sebuah type lalu Pick beberapa key dari interface tersebut.
 

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'>;
Bisa kita lihat pada type TodoPreview kita mengeliminasi key description, sehingga tipe TodoPreview akan berubah berbentuk menjadi:
interface TodoPreview {
  title: string;
  completed: boolean;
  createdAt: number;
}
jadi dengan cara ini kita tidak perlu membuat interface baru, cukup dengan meng Omit key yang tidak di perlukan. So, kita tinggal pakai saja type nya seperti contoh dibawah ini:
const todo: TodoPreview = {
  title: 'Clean room',
  completed: false,
  createdAt: 1615544252770,
};
Kita juga bisa mengeliminasi lebih dari 1 key dengan cara sebagai berikut:
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