TypeScript Operators: Tipe, Penggunaan, dan Contoh

TypeScript, sebuah superset JavaScript, menawarkan sistem tipe statis yang kuat yang meningkatkan keandalan dan kemampuan pemeliharaan kode. Operator memainkan peran penting dalam memanipulasi data dan mengontrol alur eksekusi. Memahami operator TypeScript sangat penting untuk menulis kode yang efisien dan bebas kesalahan. Artikel ini membahas berbagai operator TypeScript, jenisnya, penggunaannya, dan contoh praktis.

Daftar Isi

1. Pendahuluan
2. Operator Aritmatika
   1. Penambahan (+)
   2. Pengurangan (-)
   3. Perkalian (*)
   4. Pembagian (/)
   5. Modulus (%)
   6. Eksponensiasi (**)
   7. Increment (++)
   8. Decrement (–)
3. Operator Penugasan
   1. Penugasan Sederhana (=)
   2. Penugasan Penambahan (+=)
   3. Penugasan Pengurangan (-=)
   4. Penugasan Perkalian (*=)
   5. Penugasan Pembagian (/=)
   6. Penugasan Modulus (%=)
   7. Penugasan Eksponensiasi (**=)
4. Operator Perbandingan
   1. Sama Dengan (==)
   2. Tidak Sama Dengan (!=)
   3. Sama Dengan Ketat (===)
   4. Tidak Sama Dengan Ketat (!==)
   5. Lebih Besar Dari (>)
   6. Kurang Dari (<)
   7. Lebih Besar Dari Atau Sama Dengan (>=)
   8. Kurang Dari Atau Sama Dengan (<=)
5. Operator Logika
   1. Logika AND (&&)
   2. Logika OR (||)
   3. Logika NOT (!)
6. Operator Bitwise
   1. & (Bitwise AND)
   2. | (Bitwise OR)
   3. ^ (Bitwise XOR)
   4. ~ (Bitwise NOT)
   5. << (Left Shift)
   6. >> (Right Shift)
   7. >>> (Unsigned Right Shift)
7. Operator Tipe
   1. typeof
   2. instanceof
8. Operator String
   1. Concatenation (+)
9. Operator Kondisional (Ternary)
10. Operator Nullish Coalescing (??)
11. Operator Optional Chaining (?.)
12. Operator Spread (…)
13. Type Assertion (as)
14. Operator Non-null Assertion (!)
15. Prioritas Operator
16. Praktik Terbaik dalam Menggunakan Operator TypeScript
17. Kesimpulan

1. Pendahuluan

Operator adalah simbol yang melakukan operasi pada operand (nilai atau variabel). TypeScript mendukung berbagai operator yang dapat dikelompokkan menjadi beberapa kategori: aritmatika, penugasan, perbandingan, logika, bitwise, dan lainnya. Memahami setiap operator dan bagaimana mereka berinteraksi adalah kunci untuk menulis kode TypeScript yang bersih, efisien, dan bebas kesalahan.

2. Operator Aritmatika

Operator aritmatika digunakan untuk melakukan operasi matematika pada angka.

• Penambahan (+): Menambahkan dua operand.
• Pengurangan (-): Mengurangi operand kedua dari yang pertama.
• Perkalian (*): Mengalikan dua operand.
• Pembagian (/): Membagi operand pertama dengan yang kedua.
• Modulus (%): Mengembalikan sisa dari pembagian.
• Eksponensiasi (**): Menaikkan operand pertama ke pangkat operand kedua.
• Increment (++): Menambahkan 1 ke operand (dapat digunakan sebagai prefix atau postfix).
• Decrement (–): Mengurangi 1 dari operand (dapat digunakan sebagai prefix atau postfix).

Contoh:

“`typescript
let x: number = 10;
let y: number = 5;

console.log(x + y); // Output: 15
console.log(x – y); // Output: 5
console.log(x * y); // Output: 50
console.log(x / y); // Output: 2
console.log(x % y); // Output: 0
console.log(x ** y); // Output: 100000

x++;
console.log(x); // Output: 11

y–;
console.log(y); // Output: 4
“`

3. Operator Penugasan

Operator penugasan digunakan untuk memberikan nilai ke variabel.

• Penugasan Sederhana (=): Memberikan nilai dari operand kanan ke operand kiri.
• Penugasan Penambahan (+=): Menambahkan operand kanan ke operand kiri dan menugaskan hasilnya ke operand kiri.
• Penugasan Pengurangan (-=): Mengurangi operand kanan dari operand kiri dan menugaskan hasilnya ke operand kiri.
• Penugasan Perkalian (*=): Mengalikan operand kiri dengan operand kanan dan menugaskan hasilnya ke operand kiri.
• Penugasan Pembagian (/=): Membagi operand kiri dengan operand kanan dan menugaskan hasilnya ke operand kiri.
• Penugasan Modulus (%=): Menghitung modulus operand kiri dengan operand kanan dan menugaskan hasilnya ke operand kiri.
• Penugasan Eksponensiasi (**=): Menaikkan operand kiri ke pangkat operand kanan dan menugaskan hasilnya ke operand kiri.

Contoh:

“`typescript
let a: number = 5;

a += 5; // a = a + 5; // a adalah 10
console.log(a); //Output: 10

a -= 3; // a = a – 3; // a adalah 7
console.log(a); //Output: 7

a *= 2; // a = a * 2; // a adalah 14
console.log(a); //Output: 14

a /= 2; // a = a / 2; // a adalah 7
console.log(a); //Output: 7

a %= 3; // a = a % 3; // a adalah 1
console.log(a); //Output: 1

a **= 4; // a = a ** 4; // a adalah 1
console.log(a); //Output: 1
“`

4. Operator Perbandingan

Operator perbandingan digunakan untuk membandingkan dua operand.

• Sama Dengan (==): Mengembalikan true jika operand sama setelah konversi tipe jika diperlukan.
• Tidak Sama Dengan (!=): Mengembalikan true jika operand tidak sama setelah konversi tipe jika diperlukan.
• Sama Dengan Ketat (===): Mengembalikan true jika operand sama dan memiliki tipe yang sama.
• Tidak Sama Dengan Ketat (!==): Mengembalikan true jika operand tidak sama atau tidak memiliki tipe yang sama.
• Lebih Besar Dari (>): Mengembalikan true jika operand kiri lebih besar dari operand kanan.
• Kurang Dari (<): Mengembalikan true jika operand kiri kurang dari operand kanan.
• Lebih Besar Dari Atau Sama Dengan (>=): Mengembalikan true jika operand kiri lebih besar dari atau sama dengan operand kanan.
• Kurang Dari Atau Sama Dengan (<=): Mengembalikan true jika operand kiri kurang dari atau sama dengan operand kanan.

Contoh:

“`typescript
let num1: number = 10;
let num2: number = 5;
let str1: string = “10”;

console.log(num1 == str1); // Output: true (karena konversi tipe)
console.log(num1 === str1); // Output: false (karena tipe berbeda)

console.log(num1 != num2); // Output: true
console.log(num1 !== str1); // Output: true

console.log(num1 > num2); // Output: true
console.log(num1 < num2); // Output: false console.log(num1 >= num2); // Output: true
console.log(num1 <= num2); // Output: false ```

5. Operator Logika

Operator logika digunakan untuk menggabungkan atau membalikkan ekspresi boolean.

• Logika AND (&&): Mengembalikan true jika kedua operand true.
• Logika OR (||): Mengembalikan true jika salah satu operand true.
• Logika NOT (!): Membalikkan nilai boolean operand.

Contoh:

“`typescript
let isTrue: boolean = true;
let isFalse: boolean = false;

console.log(isTrue && isFalse); // Output: false
console.log(isTrue || isFalse); // Output: true
console.log(!isTrue); // Output: false
“`

6. Operator Bitwise

Operator bitwise melakukan operasi pada level bit dari operand.

• & (Bitwise AND): Melakukan operasi AND pada setiap bit dari dua operand.
• | (Bitwise OR): Melakukan operasi OR pada setiap bit dari dua operand.
• ^ (Bitwise XOR): Melakukan operasi XOR pada setiap bit dari dua operand.
• ~ (Bitwise NOT): Membalikkan setiap bit dari operand.
• << (Left Shift): Menggeser bit operand ke kiri dengan jumlah posisi yang ditentukan.
• >> (Right Shift): Menggeser bit operand ke kanan dengan jumlah posisi yang ditentukan (mempertahankan tanda).
• >>> (Unsigned Right Shift): Menggeser bit operand ke kanan dengan jumlah posisi yang ditentukan (mengisi dengan nol).

Contoh:

“`typescript
let numA: number = 5; // 0101 dalam biner
let numB: number = 3; // 0011 dalam biner

console.log(numA & numB); // Output: 1 (0001)
console.log(numA | numB); // Output: 7 (0111)
console.log(numA ^ numB); // Output: 6 (0110)
console.log(~numA); // Output: -6 (komplemen dua)
console.log(numA << 1); // Output: 10 (1010) console.log(numA >> 1); // Output: 2 (0010)
console.log(numA >>> 1); // Output: 2 (0010)
“`

7. Operator Tipe

Operator tipe digunakan untuk mendapatkan informasi tentang tipe data.

• typeof: Mengembalikan string yang menunjukkan tipe data operand.
• instanceof: Memeriksa apakah sebuah objek adalah instance dari kelas tertentu.

Contoh:

“`typescript
let myVar: number = 10;
let myString: string = “Hello”;
let myObj: {name: string} = { name: “John” };

console.log(typeof myVar); // Output: “number”
console.log(typeof myString); // Output: “string”
console.log(typeof myObj); // Output: “object”

class MyClass {}
let myInstance = new MyClass();

console.log(myInstance instanceof MyClass); // Output: true
“`

8. Operator String

TypeScript mendukung operator untuk memanipulasi string.

• Concatenation (+): Menggabungkan dua string.

Contoh:

“`typescript
let strA: string = “Hello”;
let strB: string = ” World”;

console.log(strA + strB); // Output: “Hello World”
“`

9. Operator Kondisional (Ternary)

Operator kondisional (juga dikenal sebagai operator ternary) adalah cara singkat untuk menulis pernyataan if-else.

Sintaks: kondisi ? ekspresi_jika_benar : ekspresi_jika_salah

Contoh:

“`typescript
let age: number = 20;
let isAdult: boolean = age >= 18 ? true : false;

console.log(isAdult); // Output: true

let message: string = age >= 18 ? “You are an adult” : “You are not an adult”;
console.log(message); // Output: You are an adult
“`

10. Operator Nullish Coalescing (??)

Operator nullish coalescing (??) mengembalikan operand sebelah kanan jika operand sebelah kiri adalah null atau undefined, jika tidak, ia mengembalikan operand sebelah kiri. Ini memberikan cara untuk menyediakan nilai default untuk variabel yang mungkin null atau tidak terdefinisi.

Contoh:

“`typescript
let name: string | null = null;
let defaultName: string = “Guest”;

let displayName: string = name ?? defaultName;

console.log(displayName); // Output: “Guest”

let userAge: number | undefined = undefined;
let defaultAge: number = 0;

let actualAge: number = userAge ?? defaultAge;

console.log(actualAge); // Output: 0

let existingValue: string = “Some Value”;
let newValue: string = existingValue ?? “Default Value”;

console.log(newValue); // Output: “Some Value”
“`

11. Operator Optional Chaining (?.)

Operator optional chaining (?.) memungkinkan Anda mengakses properti objek yang mungkin null atau tidak terdefinisi tanpa menyebabkan kesalahan. Jika properti sebelum ?. adalah null atau undefined, ekspresi mengevaluasi menjadi undefined alih-alih melemparkan kesalahan.

Contoh:

“`typescript
interface User {
address?: {
street?: string;
};
}

let user1: User = { address: { street: “Main Street” } };
let user2: User = {};
let user3: User = { address: {} };
let user4: User = undefined; //tidak umum, tetapi mungkin dalam beberapa kasus

console.log(user1?.address?.street); // Output: “Main Street”
console.log(user2?.address?.street); // Output: undefined
console.log(user3?.address?.street); // Output: undefined
console.log(user4?.address?.street); //Output: undefined

// Without optional chaining, you’d need to do this:
// console.log(user1 && user1.address && user1.address.street); //Much more verbose
“`

12. Operator Spread (…)

Operator spread (...) memungkinkan Anda memperluas iterable (seperti array atau string) menjadi elemen individual. Ini berguna untuk membuat salinan array, menggabungkan array, dan meneruskan argumen ke fungsi.

Contoh:

Array:
“`typescript
let arr1: number[] = [1, 2, 3];
let arr2: number[] = […arr1, 4, 5]; // Spread arr1 into arr2

console.log(arr2); // Output: [1, 2, 3, 4, 5]

let arr3: number[] = [0, …arr1, 6];
console.log(arr3); //Output: [0, 1, 2, 3, 6]
“`

Objek:
“`typescript
let obj1 = { a: 1, b: 2 };
let obj2 = { …obj1, c: 3 };

console.log(obj2); //Output: { a: 1, b: 2, c: 3 }
“`

Fungsi:
“`typescript
function sum(a: number, b: number, c: number): number {
return a + b + c;
}

let numbers: number[] = [1, 2, 3];
console.log(sum(…numbers)); // Output: 6
“`

13. Type Assertion (as)

Type assertion memungkinkan Anda untuk mengesampingkan inferensi tipe TypeScript dan secara eksplisit menentukan tipe nilai. Ini berguna ketika Anda tahu tipe nilai dengan lebih baik daripada yang dapat disimpulkan TypeScript.

Ada dua bentuk sintaks untuk type assertion:

• as Tipe
• <Tipe> nilai (tidak direkomendasikan dalam file JSX/TSX)

Contoh:

“`typescript
let unknownValue: any = “This is a string”;

// Using ‘as’ keyword
let strLength: number = (unknownValue as string).length;
console.log(strLength); // Output: 16

// Using angle bracket syntax (less common, avoid in JSX/TSX)
let strLength2: number = (unknownValue).length;
console.log(strLength2); // Output: 16
“`

14. Operator Non-null Assertion (!)

Operator non-null assertion (!) adalah cara untuk memberi tahu TypeScript bahwa sebuah nilai tidak akan menjadi null atau undefined. Ini berguna ketika Anda yakin bahwa sebuah variabel memiliki nilai, meskipun tipe pemeriksa TypeScript mungkin tidak dapat menyimpulkannya.

Contoh:

“`typescript
let nullableString: string | null = “Hello”;

// Without non-null assertion, TypeScript might complain
// console.log(nullableString.length); // Error: Object is possibly ‘null’.

// Using non-null assertion
console.log(nullableString!.length); // Output: 5

nullableString = null;

// Use with caution! This will throw an error at runtime if nullableString is actually null.
// console.log(nullableString!.length); //Uncaught TypeError: Cannot read properties of null (reading ‘length’)
“`

Penting: Gunakan operator non-null assertion dengan hati-hati, karena dapat menyebabkan kesalahan runtime jika nilainya benar-benar null atau undefined. Hanya gunakan ketika Anda *benar-benar yakin* bahwa nilai tersebut ada.

15. Prioritas Operator

Prioritas operator menentukan urutan di mana operator dievaluasi dalam sebuah ekspresi. Operator dengan prioritas lebih tinggi dievaluasi sebelum operator dengan prioritas lebih rendah. Penting untuk memahami prioritas operator untuk menulis kode yang menghasilkan hasil yang diharapkan.

Berikut adalah daftar singkat prioritas operator dari yang tertinggi ke yang terendah:

1. () (Pengelompokan)
2. ++, -- (Increment/Decrement)
3. !, ~, +, - (Unary operators)
4. ** (Exponentiation)
5. *, /, % (Perkalian, Pembagian, Modulus)
6. +, - (Penambahan, Pengurangan)
7. <<, >>, >>> (Bitwise shift operators)
8. <, <=, >, >=, instanceof, in (Relational operators)
9. ==, !=, ===, !== (Equality operators)
10. & (Bitwise AND)
11. ^ (Bitwise XOR)
12. | (Bitwise OR)
13. && (Logical AND)
14. || (Logical OR)
15. ?? (Nullish coalescing)
16. ?: (Conditional operator)
17. =, +=, -=, *=, /=, %=, **=, <<=, >>=, >>>=, &=, ^=, |= (Assignment operators)
18. , (Comma operator)

Contoh:

“`typescript
let result: number = 10 + 5 * 2; // Perkalian dilakukan sebelum penambahan
console.log(result); // Output: 20

let result2: number = (10 + 5) * 2; // Pengelompokan mengubah prioritas
console.log(result2); // Output: 30
“`

16. Praktik Terbaik dalam Menggunakan Operator TypeScript

• Gunakan kesetaraan ketat (=== dan !==): Lebih disukai menggunakan operator kesetaraan ketat (=== dan !==) daripada operator kesetaraan longgar (== dan !=) untuk menghindari konversi tipe yang tidak terduga.
• Pahami prioritas operator: Pahami prioritas operator dan gunakan tanda kurung untuk memperjelas urutan evaluasi, terutama dalam ekspresi kompleks.
• Gunakan operator nullish coalescing (??) dengan bijak: Gunakan operator ?? untuk memberikan nilai default saat menangani nilai null atau tidak terdefinisi.
• Gunakan operator optional chaining (?.) untuk akses properti yang aman: Gunakan operator ?. untuk mengakses properti objek yang mungkin null atau tidak terdefinisi tanpa menyebabkan kesalahan.
• Hati-hati dengan operator non-null assertion (!): Gunakan operator ! hanya jika Anda *benar-benar yakin* bahwa sebuah nilai tidak null atau tidak terdefinisi, dan pahami risiko yang terkait dengan itu.
• Gunakan operator spread (...) untuk membuat salinan array dan objek: Gunakan operator spread untuk membuat salinan baru dari array dan objek alih-alih memodifikasi yang asli secara langsung.
• Dokumentasikan kode Anda: Tambahkan komentar untuk menjelaskan penggunaan operator yang kompleks atau tidak jelas, terutama operator bitwise.
• Tinjau dan uji kode Anda: Selalu tinjau dan uji kode Anda untuk memastikan bahwa operator digunakan dengan benar dan berperilaku seperti yang diharapkan.

17. Kesimpulan

Operator adalah komponen fundamental dari TypeScript, menyediakan cara untuk melakukan berbagai operasi pada data. Memahami berbagai jenis operator, prioritasnya, dan praktik terbaik untuk menggunakannya sangat penting untuk menulis kode TypeScript yang efisien, andal, dan mudah dipelihara. Dengan menguasai operator TypeScript, Anda dapat meningkatkan keterampilan pengkodean Anda dan membangun aplikasi yang lebih kuat dan bebas kesalahan.