Kapan Harus Menggunakan satisfies Dalam TypeScript

Kapan Harus Menggunakan satisfies Dalam TypeScript

typescriptsatisfies
Akhmad Salafudin on 21 May 2024

TypeScript 4.9: satisfies operator

Dalam TypeScript 4.9, operator baru telah diperkenalkan yaitu satisfies. Operator satisfies digunakan untuk memeriksa apakah sebuah tipe data sesuai dengan tipe data lainnya. Namun apa bedanya dengan menggunakan type casting? Mari kita bahas kegunaan operator satisfies ini dan kapan waktu yang tepat untuk menggunakannya.

Type Casting

Sebelum adanya operator satisfies, kita hanya dapat menggunakan type casting saat ingin membuat sebuah data agar sesuai dengan tipe data yang dituju. Contoh penggunaan type casting:

interface Config {
	value: string | string[];
}

// cara 1
const config1: Config = {
	value: 'foo'
};

// cara 2
const config2 = {
	value: ['foo', 'bar']
} as Config;

Kedua cara diatas cukup membantu saat kita ingin memastikan bahwa value bertipe string atau string[]. Namun dengan cara ini type data dari value akan berubah menjadi string | string[]. Sehingga kode di bawah ini akan error jika dijalankan:

config1.value.toUpperCase(); // Property 'toUpperCase' does not exist on type 'string | string[]
config2.value.filter((v) => v != 'foo'); // Property 'filter' does not exist on type 'string | string[]'

Lalu bagaimana solusinya?

Operator satisfies

Untuk menyelesaikan masalah yang terjadi pada kode sebelumnya, kita dapat menggunakan operator satisfies. Operator ini pertama kali diperkenalkan pada TypeScript 4.9. Fungsi operator satisfies adalah untuk memeriksa apakah sebuah tipe data sesuai dengan tipe data lainnya tanpa mengubah type data dari variable itu sendiri. Coba kita praktekkan dengan memodifikasi contoh sebelumnya:

interface Config {
	value: string | string[];
}
const config1 = {
	value: 'foo'
} satisfies Config;

const config2 = {
	value: ['foo', 'bar']
} satisfies Config;

const invalidConfig = {
	value: 123 //<- error
} satisfies Config;

config1.value.toUpperCase(); // 'FOO'
config2.value.filter((v) => v != 'foo'); // ['bar']

Yuhuu, akhirnya masalah kita terselesaikan. Saya akan jelaskan apa yang terjadi di contoh kode tersebut. Dengan menggunakan operator satisfies, value pada config1 akan tetap bertipe string dan value pada config2 akan tetap bertipe string[]. Dengan cara ini maka operasi String akan berlaku pada config1.value dan operasi Array akan berlaku pada config2.value.

Demikianlah kegunaan dan kapan waktu yang tepat untuk menggunakan operator satisfies. Semoga dapat bermanfaat saat kalian menggunakan TypeScript.

Diskusi (0)

Silakan Login untuk berdiskusi