Last updated on 12 Jan 2022
Belajar TypeScript – Utility Types / Tipe Utilitas
- Partial (Rilis versi 2.1)
- Record (Rilis versi 2.1)
- Pick (Rilis versi 2.1)
- 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, });
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' }, }, ];
Pada kode diatas variable cars
memiliki 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', };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'>;
TodoPreview
akan berubah berbentuk menjadi: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