Pengenalan Dasar Typescript

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
}

1. Pertama, kita definisikan UserType dengan property name dan username sebagai string.
2. Lalu, kita definisikan juga BioType dengan property age sebagai number.
3. Kemudian kita melakukan penggabungan antara UserType dan BioType dengan intersection (&) untuk membuat tipe data baru pada variabel user, dan hal ini membuat objek user 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!