Berikut adalah materi pengenalan TypeScript yang mencakup dasar-dasar, tipe data, interface, dan tipe kustom.
## **Pengenalan TypeScript dan Tipe Data**
### 1. **Apa itu TypeScript?**
TypeScript adalah bahasa pemrograman berbasis JavaScript yang memperkenalkan **typed variables** (variabel bertipe). Ini berarti Anda dapat menentukan tipe variabel, parameter fungsi, dan nilai pengembalian, yang memungkinkan TypeScript melakukan **type-checking** selama kompilasi.
- TypeScript menambahkan fitur seperti:
- **Static typing**
- **Interfaces** dan **Enums**
- **Classes** dan **Modifiers**
- **Generics**
- Ini juga mendukung fitur JavaScript modern seperti ES6+, tetapi dengan pemeriksaan tipe.
#### **Mengapa menggunakan TypeScript?**
- Meminimalkan kesalahan runtime karena kesalahan tipe.
- Meningkatkan produktivitas pengembang dengan auto-completion dan refactoring yang lebih baik.
- Sangat cocok untuk pengembangan aplikasi besar yang memerlukan struktur kode yang kuat.
### 2. **Tipe Data Dasar di TypeScript**
TypeScript menyediakan tipe data bawaan seperti:
- **Number**: tipe data untuk angka, baik bilangan bulat maupun desimal.
- **String**: tipe data untuk teks.
- **Boolean**: tipe data untuk nilai benar atau salah.
- **Array**: tipe data untuk daftar elemen.
- **Tuple**: array yang memiliki jumlah elemen dan tipe yang tetap.
- **Enum**: tipe khusus yang memungkinkan deklarasi sekumpulan nilai konstan.
- **Any**: digunakan ketika tipe data bisa berubah atau tidak diketahui.
- **Void**: biasanya digunakan sebagai tipe pengembalian fungsi yang tidak mengembalikan nilai.
- **Null** dan **Undefined**: dua tipe data khusus untuk menangani ketidakberadaan nilai.
- **Never**: digunakan untuk fungsi yang tidak pernah mengembalikan nilai (contohnya, fungsi yang melemparkan kesalahan).
#### **Deklarasi Variabel dan Tipe:**
Berikut adalah beberapa cara mendeklarasikan variabel dengan tipe data tertentu di TypeScript:
```typescript
let angka: number = 42; // tipe data number
let nama: string = "Budi"; // tipe data string
let isLogin: boolean = true; // tipe data boolean
```
##### **Array:**
```typescript
let angkaArray: number[] = [1, 2, 3, 4]; // Array berisi angka
let namaArray: string[] = ["Budi", "Tina"]; // Array berisi string
```
##### **Tuple:**
Tuple memungkinkan kita mendefinisikan array dengan jumlah elemen dan tipe tertentu:
```typescript
let mahasiswa: [string, number]; // Tipe tuple dengan string dan number
mahasiswa = ["Budi", 22]; // Harus sesuai urutan
```
##### **Enum:**
Enum digunakan untuk mendefinisikan variabel yang berisi sekumpulan nilai konstan.
```typescript
enum Status { Aktif, NonAktif, Pending }
let statusMahasiswa: Status = Status.Aktif;
```
### 3. **Fungsi dengan Tipe Data**
Seperti variabel, kita juga bisa mendefinisikan tipe data untuk parameter fungsi dan tipe pengembaliannya. Ini membantu kita memastikan bahwa fungsi menerima argumen yang benar dan mengembalikan hasil dengan tipe yang benar.
#### **Contoh Fungsi Bertipe:**
```typescript
function tambah(a: number, b: number): number {
return a + b;
}
let hasil: number = tambah(5, 10);
console.log(hasil); // Output: 15
- **Parameter opsional**: Kita juga bisa membuat parameter menjadi opsional dengan menambahkan tanda `?`.
```typescript
function sayHello(nama: string, sapaan?: string): string {
return `${sapaan || 'Halo'}, ${nama}!`;
}
console.log(sayHello("Budi")); // Output: Halo, Budi!
console.log(sayHello("Tina", "Selamat")); // Output: Selamat, Tina!
```
### 4. **Type Aliases (Alias Tipe)**
Kita bisa membuat alias untuk tipe data yang sering digunakan. Ini membuat kode lebih mudah dibaca dan dipelihara.
#### **Contoh Type Aliases:**
```typescript
type Point = {
x: number;
y: number;
};
let koordinat: Point = {
x: 10,
y: 20
};
```
## * Interface dan Tipe Kustom**
### 1. **Interface**
**Interface** adalah cara untuk mendefinisikan bentuk objek atau struktur data di TypeScript. Ini memungkinkan kita mendeklarasikan tipe objek yang lebih kompleks dan memastikan bahwa objek tersebut mengikuti struktur tertentu.
#### **Contoh Interface:**
```typescript
interface Mahasiswa {
nama: string;
umur: number;
jurusan: string;
isAktif?: boolean; // Properti opsional
}
let budi: Mahasiswa = {
nama: "Budi",
umur: 21,
jurusan: "Teknik Informatika",
};
```
- Pada contoh di atas, kita membuat interface `Mahasiswa` dengan properti `nama`, `umur`, `jurusan`, dan properti opsional `isAktif`.
- Objek yang menggunakan interface ini harus sesuai dengan tipe yang dideklarasikan.
#### **Menggunakan Interface dalam Fungsi:**
Kita bisa menggunakan interface untuk mendefinisikan tipe parameter dalam fungsi.
```typescript
function tampilkanMahasiswa(mhs: Mahasiswa): void {
console.log(`${mhs.nama} berumur ${mhs.umur} dan mengambil jurusan ${mhs.jurusan}.`);
}
tampilkanMahasiswa(budi); // Output: Budi berumur 21 dan mengambil jurusan Teknik Informatika.
```
### 2. **Tipe Kustom**
Selain `interface`, TypeScript juga mendukung **tipe kustom** melalui **type alias**, yang memungkinkan kita mendefinisikan tipe dengan lebih fleksibel, termasuk menggunakan **union types**.
#### **Union Types:**
Union types memungkinkan kita mendeklarasikan variabel yang dapat memiliki lebih dari satu tipe.
##### Contoh:
```typescript
let id: number | string;
id = 101; // Valid
id = "A123"; // Valid
```
Dalam contoh ini, variabel `id` bisa bertipe **number** atau **string**.
#### **Type Aliases dan Union Types:**
```typescript
type ID = number | string;
let userId: ID = 101;
let productId: ID = "P-001";
```
### 3. **Generics (Tipe Umum)**
Generics memungkinkan kita membuat fungsi, class, atau interface yang dapat bekerja dengan berbagai tipe data tanpa harus mengorbankan tipe yang kuat.
#### **Contoh Fungsi dengan Generics:**
```typescript
function identity<T>(arg: T): T {
return arg;
}
console.log(identity<number>(42)); // Output: 42
console.log(identity<string>("Hello")); // Output: Hello
```
- Pada contoh di atas, fungsi `identity` menerima argumen dengan tipe generik `T`, yang bisa berupa tipe apapun. Ketika fungsi dipanggil, kita bisa menentukan tipe `T`.
### Kesimpulan
Setelah mempelajari dasar-dasar TypeScript seperti tipe data, interface, dan tipe kustom, Anda kini memiliki pemahaman yang lebih baik tentang bagaimana menulis kode yang lebih aman dan terstruktur di JavaScript menggunakan TypeScript. Berikutnya, Anda dapat melanjutkan ke fitur lanjutan seperti **class**, **modules**, **decorators**, dan **async/await** di TypeScript.