2. TypeScript Type
1. Apa itu Type dalam TypeScript?
Dalam TypeScript, tipe (type
) merupakan pada fitur yang memungkinkan untuk mendefinisikan tipe data yang dapat digunakan olehvariabel
, function
, return
suatu function
, dan struktur data lainnya dalam kode. Type
memungkinkan kita untuk menyatakan jenis nilai yang diharapkan atau diperbolehkan dalam berbagai bagian kode.
TypeScript menyediakan berbagai jenis tipe data, seperti number
, string
,boolean
, object
, array
, null
, undefine
d, dan banyak lagi. Selain itu, kita juga dapat membuat tipe khusus dengan menggunakan interface
, union types
, tuple types
, function types
, dan jenis lainnya.
contoh penggunakan type
dalam typescript
let age: number = 25;
let name: string = "John Doe";
let isStudent: boolean = true;
let person: { name: string; age: number } = { name: "Jane Smith", age: 30 };
function addNumbers(a: number, b: number): number {
return a + b;
}
let numbers: number[] = [1, 2, 3, 4, 5];
let mixedValues: (string | number)[] = ["Hello", 10, "World", 20];
interface User {
name: string;
age: number;
email: string;
}
let user: User = { name: "Alice", age: 28, email: "alice@example.com" };
2. Annotations Type
TypeScript menggunakan type annotations
secara eksplisit untuk menentukan tipe data bagi identifikasi seperti variabel
, function
, objek, dan lain-lain.
TypeScript menggunakan sintaksis :
sebagai annotations
.
// Notasi tipe untuk variabel
let age: number = 30;
let name: string = "John Doe";
let isStudent: boolean = true;
// Notasi tipe untuk parameter fungsi dan tipe kembalian
function addNumbers(a: number, b: number): number {
return a + b;
}
// Notasi tipe untuk properti objek
let person: { name: string; age: number } = { name: "Jane Smith", age: 25 };
3. Tipe Data Number
Tipe data number
adalah salah satu tipe data dasar yang ada dalam bahasa pemrograman TypeScript (dan juga JavaScript). Tipe data number
digunakan untuk mewakili angka numerik, baik bilangan bulat (integer) maupun bilangan desimal (floating-point).
let age: number = 30; // Bilangan bulat
let pi: number = 3.14; // Bilangan desimal
let temperature: number = -10.5; // Bilangan desimal negatif
4. Tipe Data String
Tipe data string
adalah salah satu tipe data dasar yang ada dalam bahasa pemrograman TypeScript (dan juga JavaScript). Tipe data string
digunakan untuk mewakili data berupa teks atau urutan karakter, seperti kata, kalimat, atau kode yang terdiri dari huruf, angka, atau simbol lainnya.
let name: string = "John Doe"; // Teks dalam tanda kutip ganda
let message: string = "Hello, TypeScript!"; // Teks dalam tanda kutip satu
let code: string = `const x = 10;`; // Teks dalam backticks (template literals)
5. Tipe Data Boolean
Tipe data boolean
adalah salah satu tipe data dasar yang ada dalam bahasa pemrograman TypeScript (dan juga JavaScript). Tipe data boolean
hanya memiliki dua nilai yang mungkin: true
(benar) atau false
(salah).
Variabel dengan tipe data boolean
digunakan untuk menyimpan nilai kebenaran dari suatu pernyataan atau kondisi. Biasanya, tipe data ini digunakan dalam situasi di mana kita perlu menyatakan suatu pernyataan sebagai benar atau salah.
6. Tipe Data Array
Dalam bahasa pemrograman TypeScript, tipe data array
digunakan untuk menyatakan kumpulan nilai dengan tipe yang sama yang disimpan dalam urutan tertentu. Array
adalah struktur data yang memungkinkan kita untuk menyimpan lebih dari satu nilai dalam satu variabel.
//1. Array of Number
//type interface
let list1 = [1, 2, 3, 4];
//squere bracket
let list1_2: number[] = [1, 2, 2, 3];
//generic Array
let list1_3: Array<number> = [1, 2, 2, 22];
//2. Array String
//squere bracket
let list2: string[] = ["satu", "dua", "tiga"];
//3. Array Campuran
//squere bracket
let list3: (number | string | boolean)[] = [1, "dua", 2, 3, true];
//4.Array of Object
//squere bracket
let list4_1: { color: string; index: number }[] = [
{
color: "blue",
index: 1,
},
{
color: "red",
index: 2,
},
];
7. Tipe Data Tuple
Di dalam TypeScript, sebuah tuple
adalah tipe data yang mirip dengan array
, tetapi dengan beberapa perbedaan penting. Tuple
memungkinkan kita untuk menyimpan kumpulan nilai dengan tipe data yang berbeda dan tetap mempertahankan urutan nilai tersebut. Berbeda dengan array
, di mana semua elemen harus memiliki tipe data yang sama, tuple
memungkinkan kombinasi tipe data yang berbeda untuk setiap elemennya.
let myTuple: [number, string, boolean];
myTuple = [10, "Hello", true];
console.log(myTuple[0]); // Output: 10
console.log(myTuple[1]); // Output: "Hello"
8. Tipe Data Object
Dalam bahasa pemrograman TypeScript, tipe data object
adalah tipe yang mewakili struktur data yang kompleks atau objek yang tidak dapat diidentifikasi lebih spesifik dengan tipe data lainnya seperti number, string, boolean, atau array. Tipe data object
mencakup objek JavaScript, array, fungsi, null, dan objek lainnya.
let a = 10;
//1. Object Literal
const product = {
id: 1,
name: "Macbook Air M1",
price: 50000,
note: "",
};
//2. Inline Interface
interface Product {
id: number;
name: string;
price: number;
note: string;
}
const product1: Product = {
id: 1,
name: "Macbook Air M1",
price: 13000000,
note: "",
};
const product2: Product = {
id: 2,
name: "Macbook Pro M1",
price: 1800000,
note: "",
};
//3. Mested Object
interface ProductDetail {
manufacture: string;
year: number;
}
interface ProductItem {
id: number;
productName: string;
price: number;
ProductDetail: ProductDetail;
}
const Product4: ProductItem = {
id: 1,
productName: "Macbook Pro M1",
price: 17000000,
ProductDetail: {
manufacture: "Apple",
year: 2020,
},
};
9. Tipe Data Enum
Tipe data enum (enumeration) adalah salah satu fitur yang ada dalam bahasa pemrograman TypeScript. Enumerasi memungkinkan kita untuk mendefinisikan sekumpulan nama-nama yang terikat dengan nilai-nilai numerik atau string.
Dalam TypeScript, enum memberikan cara yang lebih deskriptif untuk menyatakan kumpulan nilai yang tetap dan terbatas. Ini membuat kode lebih mudah dibaca, dipahami, dan dipelihara.
enum Days {
Sunday,
Monday,
Tuesday,
Wednesday,
Thursday,
Friday,
Saturday,
}
let today: Days = Days.Monday;
console.log(today); // Output: 1
// Menggunakan enum untuk mengganti nilai numerik
function getDayName(day: Days): string {
switch (day) {
case Days.Sunday:
return "Minggu";
case Days.Monday:
return "Senin";
case Days.Tuesday:
return "Selasa";
case Days.Wednesday:
return "Rabu";
case Days.Thursday:
return "Kamis";
case Days.Friday:
return "Jumat";
case Days.Saturday:
return "Sabtu";
default:
return "Hari tidak valid";
}
}
console.log(getDayName(Days.Tuesday)); // Output: "Selasa"
10. Tipe Data Any
Dalam bahasa pemrograman TypeScript, tipe data any digunakan untuk menyatakan bahwa nilai dari suatu variabel dapat memiliki tipe apapun.
Ketika suatu variabel diberi tipe any, itu berarti variabel tersebut dapat mengandung nilai dari tipe data apa pun, termasuk tipe data primitif seperti number, string, dan boolean, serta tipe data kompleks seperti array, objek, dan fungsi.
Penggunaan type data any akan membuat penggunaan TypeScript seperti JavaScript
let value: any = 10; // Tipe data any untuk bilangan bulat
console.log(value); // Output: 10
value = "Hello, TypeScript!"; // Tipe data any untuk teks (string)
console.log(value); // Output: "Hello, TypeScript!"
value = true; // Tipe data any untuk boolean
console.log(value); // Output: true
value = [1, 2, 3]; // Tipe data any untuk array
console.log(value); // Output: [1, 2, 3]
value = { name: "John", age: 30 }; // Tipe data any untuk objek
console.log(value); // Output: { name: "John", age: 30 }
value = function (x: number, y: number): number {
return x + y;
}; // Tipe data any untuk fungsi
console.log(value(5, 10)); // Output: 15
11. Type Union
Type Union merupakan tipe data yang memungkinkan sebuah variabel memiliki satu dari beberapa tipe data yang mungkin
type Operasi = "perkalian" | "penjumlahan" | "pengurangan";
let operasiMatematika: Operasi = "perkalian";
let operasiMatematika: Operasi = "perkalian2";
Variabel operasiMatematika sekarang hanya bisa menyimpan salah satu dari tiga nilai: "perkalian", "penjumlahan", atau "pembagian". Jika kita mencoba menyimpan nilai selain yang telah didefinisikan, TypeScript akan menunjukkan kesalahan.
12. Type Aliases
Aliases digunakan untuk memberi nama lain atau memperpendek definisi tipe data yang sudah ada, baik itu interface maupun type.