Typescript merupakan superset dari Javascript. Apa yang dilakukan oleh Javascript tentu bisa dilakukan Typescript, namun sebaliknya apa yang dilakukan Typescript belum tentu bisa dilakukan Javascript. Terdapat fitur-fitur dasar yang akan sering kita gunakan ketika menggunakan Typescript, pada artikel kali ini kita membahas dasar dan bagaimana menuliskan sintaks Typescript dan implementasi contoh sederhananya.
1. Tipe Data
Seperti penjelasan di awal, Typescript merupakan superset dari Javascript yang dimana semua yang dilakukan oleh Javascript tentu saja bisa dilakukan Typescript. Berikut ini tipe data yang akan sering digunakan ketika menggunakan Typescript:
Tipe Data | Contoh |
---|---|
string | Ini bertipe data string |
number | 1,2,3,4 |
boolean | true/false |
2. Variabel
Terdapat fitur ekstra yang bisa kita tetapkan ketika ingin membuat sebuah variabel pada Typescript, yaitu kita bisa menetapkan tipe data apa yang akan ditampung pada variabel tersebut. Sebagai contoh:
let username:string = 'John Doe'
username = 30
console.log(username) // Output: Type 'number' is not assignable to type 'string'.
Hal merupakan sebuah benefit ketika menggunakan Typescript, karena menjadikan program kita akan lebih konsisten dan meminimalisir terjadinya error akibat perubahan variabel yang tidak inginkan.
3. Type and Interface
Type
pada Typescript dapat kita manfaatkan untuk mendefinisikan tipe data yang akan digunakan.
type UserType = {
name: string
age: number
}
const userObject:UserType = {
name:'John Doe',
age:10
}
Pada kode di atas, UserType
didefinisikan sebagai sebuah type yang memiliki dua property: name dengan tipe string dan age dengan tipe number. Kemudian, kita membuat object userObject
dibuat berdasarkan tipe UserType
yang telah didefinisikan sebelumnya.
Lalu terdapat interface
, yaitu aturan yang berbentuk object untuk mendefinisikan tipe data yang akan digunakan. Contoh penggunaan:
interface UserInterface{
name: string
age: number
}
const someUserObject:UserInterface = {
name:'Doe',
age:10
}
Terlihat pada kedua contoh di atas, baik Type ataupun Interface sama-sama diwajibkan untuk mengisi property yang kita definisikan. Apabila kamu ingin membuat property tersebut bersifat opsional, maka kamu bisa mendapatkannya dengan cara menambahkan Opsional Mark (?
) pada property tersebut.
interface UserInterface{
name: string
age: number
address?:string // Property yang bersifat opsional, maka Typescript menghiraukan apabila tidak terdapat nilai ini.
}
const someUserObject:UserInterface = {
name:'Doe',
age:10
}
4. Intersection and Union Type
Intersection (&
) pada Typescript memungkinkan kita untuk menggabungkan beberapa tipe data menjadi satu.
// Definisikan Type
type UserType={
name:string
username:string
}
type BioType= {
age:number
}
// Gunakan Type pada object
const user:BioType & UserType={
name:'John Doe',
username:'johndoe',
age:30
}
- Pertama, kita definisikan
UserType
dengan property name dan username sebagai string. - Lalu, kita definisikan juga
BioType
dengan property age sebagai number. - Kemudian kita melakukan penggabungan antara
UserType
danBioType
dengan intersection (&
) untuk membuat tipe data baru pada variabeluser
, dan hal ini membuat objekuser
wajib memiliki semua property dari kedua tipe data tersebut.
Berbeda dengan Intersection Type yang dimana kita harus mengisi semua nilai pada tipe data tersebut, Union Type (|
) digunakan untuk menyatakan bahwa sebuah nilai dapat memiliki salah satu dari beberapa tipe data yang didefinisikan.
// Definisikan Type
type UserType={
name:string
username:string
}
type BioType= {
age:number
}
// Gunakan Type pada object
const user:BioType | UserType={
name:'John Doe',
username:'johndoe',
}
Kode di atas valid, dikarenakan kita menggunakan Union Type yang dimana pada variabel tersebut dapat memiliki salah hanya satu nilai saja yang dari kita definisikan.
5. Array and Object
Pada Typescript, kita bisa mendefinisikan tipe data array menggunakan sintaks khusus. Ada beberapa cara untuk melakukannya:
- Notasi Type: Menggunakan tanda kurung siku
[]
untuk mendefinisikan tipe array dari suatu tipe data tertentu.
// array string
let fruits: string[] = ['Jeruk', 'Pisang', 'Pepaya'];
// array number
let age: number[] = [20, 14, 33, 36,];
- Generic Type: Kita juga bisa menggunakan generic
Array
untuk mendefinisikan tipe array dengan lebih eksplisit.
// array string
let fruits: Array = ['Jeruk', 'Pisang', 'Pepaya'];
// array number
let age: Array = [20, 14, 33, 36,];
- Union: Kita juga bisa menggunakan Union Type (
|
) untuk mendefinisikan tipe array yang dapat menyimpan beberapa tipe data.
// array string atau number
let data: (string | number)[] = ['Jeruk', 30, 'Pisang', 456];
- Tuple: Tuple adalah tipe khusus array yang memungkinkan kita mendefinisikan tipe data untuk setiap elemen dalam array pada posisi yang telah ditentukan.
// Tuple dengan tipe data spesifik untuk setiap elemen
let tuple: [string, number, boolean] = ['Jeruk', 30, true];
Sedangkan untuk mendefinisikan objek pada Typescript, ada beberapa cara yang dapat kita gunakan, yaitu:
- Notasi Object: Kita bisa menggunakan notasi objek langsung dengan menetapkan tipe data untuk setiap property dalam objek.
let bio: { name: string; age: number } = {
name: 'John Doe',
age: 30
};
- Interface: Menggunakan
interface
memungkinkan kita mendefinisikan struktur objek yang lebih kompleks dengan menentukan tipe data untuk setiap property.
interface PersonInterface {
name: string;
age: number;
}
let person: PersonInterface = {
name: 'John Doe',
age: 30
};
- Type: Kita juga bisa menggunakan
type
untuk digunakan pada tipe data objek, dengan cara yang serupa seperti menggunakan interface.
type TypePerson = {
name: string;
age: number;
};
let person: TypePerson = {
name: 'John Doe',
age: 30
};
6. Function
Terdapat perbedaan dalam membuat function ketika menggunakan Javascript dan Typescript. Apabila kita membuat function dan terdapat parameter didalamnya, kita diwajibkan untuk mendefinisikan tipe data dari parameter tersebut.
function somFunction(x: number, y: number) {
// rest of code
}
Kemudian kita juga dapat memberikan informasi tambahkan pada tipe data dari kembalian fungsi tersebut, sebagai contoh:
function sum(x: number, y: number):number {
return x+y
}
- Parameter: Fungsi
sum
memiliki dua parameter yang memiliki tipe data number. - Tipe Kembalian: Dengan adanya :number setelah parameter fungsi, ini menandakan bahwa fungsi ini akan mengembalikan nilai bertipe number.
- Operasi: Fungsi ini menjumlahkan nilai x dan y, lalu mengembalikan hasil penjumlahan tersebut sebagai nilai kembalian.
Kesimpulan
Kesimpulannya dengan Typescript, kita dapat dengan jelas mendefinisikan struktur tipe data yang diharapkan, baik untuk objek, fungsi, atau jenis data lainnya. Penggunaan type
, interface
, dan konsep seperti union, intersection memungkinkan kita untuk membuat kode yang lebih aman dan mudah dipahami.
Apabila ingin belajar lebih banyak mengenai Typescript, Di BuildWithAngga kita punya kelas gratis dan mudah dipahami untuk keperluan belajar kalian. So tunggu apalagi? Sampai jumpa dikelas dan good luck!