.IQMN

Typescript: JavaScript dengan sintaksis untuk tipe.

A
IQBAL FARHAN SYUHADA
07 Nov 2024
typescript

1. Pengenalan TypeScript

TypeScript adalah bahasa pemrograman open-source yang dikembangkan oleh Microsoft. Ini adalah superset dari JavaScript, artinya TypeScript dibangun di atas JavaScript dan menambahkan fitur seperti static typing, interfaces, dan advanced tooling. File TypeScript berekstensi .ts, dan setelah dikompilasi menjadi .js, dapat dijalankan di mana pun JavaScript berjalan, seperti di browser dan Node.js.

Mengapa TypeScript?

  • Menyediakan pengecekan tipe (type-checking) yang membantu mencegah kesalahan.
  • Mudah dipahami oleh pengembang JavaScript, karena kompatibilitasnya dengan JavaScript.
  • Mempermudah pengembangan aplikasi besar karena kode lebih terstruktur.

2. Menginstal TypeScript

Untuk menginstal TypeScript, Anda memerlukan Node.js dan npm. Berikut langkah-langkahnya:

# Perintah untuk menginstal TypeScript secara global
npm install -g typescript

Setelah terinstal, periksa versi TypeScript dengan perintah berikut:

tsc -v

3. Dasar-dasar Tipe Data pada TypeScript

TypeScript memperkenalkan beberapa tipe data dasar:

  • number: untuk angka
  • string: untuk teks
  • boolean: untuk nilai benar atau salah
  • array: untuk kumpulan data yang sejenis
  • tuple: array yang jumlah dan tipe elemennya tetap
  • enum: sekumpulan nilai konstan
  • any: tipe yang bisa menyimpan nilai tipe apa saja
  • void: biasanya untuk fungsi yang tidak mengembalikan nilai
  • undefined dan null: untuk nilai kosong atau tak didefinisikan
  • never: untuk fungsi yang tidak mengembalikan nilai (misalnya, fungsi yang selalu melempar error)

Contoh:

let num: number = 5;
let text: string = "Halo TypeScript!";
let isActive: boolean = true;
let list: number[] = [1, 2, 3];
let tupleExample: [string, number] = ["Hello", 10];
enum Direction { Up, Down, Left, Right }
let random: any = 42; // bisa tipe apa saja

4. Deklarasi Variabel dan Konstanta

TypeScript menggunakan let, const, dan var untuk deklarasi variabel, dengan rekomendasi penggunaan let dan const.

let angka: number = 10;
const teks: string = "TypeScript";

5. Fungsi pada TypeScript

Fungsi di TypeScript dapat memiliki tipe parameter dan tipe kembalian (return type). Tipe parameter ditentukan setelah nama parameter dan tipe kembalian ditentukan setelah tanda : pada akhir deklarasi fungsi.

Contoh fungsi sederhana:

function tambah(x: number, y: number): number {
    return x + y;
}

function sayHello(name: string): void {
    console.log("Hello, " + name);
}

6. Interface

Interface di TypeScript digunakan untuk menentukan struktur objek. Ini mempermudah penulisan kode yang lebih terstruktur dan mudah dipahami.

Contoh:

interface User {
    name: string;
    age: number;
    isAdmin?: boolean; // '?' berarti opsional
}

let user: User = {
    name: "Alice",
    age: 25,
};

7. Kelas (Classes) dan Objek

TypeScript mendukung pemrograman berorientasi objek (OOP) dengan sintaks kelas mirip dengan ES6. Kelas dapat memiliki properti, constructor, dan metode.

Contoh:

class Animal {
    private name: string;
    public age: number;

    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }

    public speak(): void {
        console.log(`${this.name} says hello!`);
    }
}

let dog = new Animal("Buddy", 3);
dog.speak();

8. Inheritance dan Polymorphism

TypeScript mendukung inheritance untuk mewariskan properti dan metode ke kelas turunan. Dengan konsep ini, kita bisa menggunakan superclass untuk membuat kelas-kelas lain dengan lebih efisien.

Contoh:

class Animal {
    constructor(public name: string) {}

    speak(): void {
        console.log(`${this.name} makes a noise.`);
    }
}

class Dog extends Animal {
    speak(): void {
        console.log(`${this.name} barks.`);
    }
}

let myDog = new Dog("Rover");
myDog.speak(); // Rover barks.

9. Generic

Generic di TypeScript memungkinkan kita membuat komponen yang dapat bekerja dengan berbagai tipe, tanpa kehilangan keamanan tipe.

Contoh:

function getData<T>(data: T): T {
    return data;
}

console.log(getData<number>(5));
console.log(getData<string>("Hello"));

10. Modul

Modul di TypeScript mempermudah pengelompokan kode dan memisahkannya menjadi file-file yang lebih kecil. Modul menggunakan export dan import.

Contoh:

File math.ts

export function add(x: number, y: number): number {
    return x + y;
}

File app.ts

import { add } from './math';

console.log(add(2, 3));

11. Penggunaan Tipe Lanjutan

  • Union Types: Menggabungkan beberapa tipe. 
    let code: string | number;
code = "ABC";
code = 123;
  • Type Aliases: Memberikan nama untuk tipe data. 
    type StringOrNumber = string | number;
let id: StringOrNumber = "123ABC";
  • Intersection Types: Menggabungkan tipe yang berbeda. 
    interface Person {
    name: string;
}

interface Employee {
    id: number;
}

type Worker = Person & Employee;

let worker: Worker = { name: "John", id: 1 };

12. Enum

Enum digunakan untuk mendefinisikan sekumpulan nilai konstan yang memiliki nama yang lebih deskriptif.

Contoh:

enum Direction {
    Up = 1,
    Down,
    Left,
    Right
}

console.log(Direction.Up); // 1

13. Utility Types

TypeScript menyediakan beberapa utility types yang sering digunakan:

  • Partial<T>: Membuat semua properti opsional.
  • Required<T>: Membuat semua properti wajib.
  • Readonly<T>: Membuat semua properti hanya bisa dibaca.
  • Record<K, T>: Membuat objek dengan kunci tipe K dan nilai tipe T.

Contoh:

interface User {
    id: number;
    name: string;
    email?: string;
}

let partialUser: Partial<User> = { id: 1 };
let readonlyUser: Readonly<User> = { id: 1, name: "Alice", email: "alice@example.com" };

Rangkuman

  • TypeScript adalah superset dari JavaScript dengan tambahan static typing.
  • Mendukung tipe data dasar, fungsi bertipe, kelas, interface, dan konsep OOP.
  • Mendukung fitur lanjutan seperti generik, tipe gabungan, dan utility types.

Latihan membuat proyek kecil dengan TypeScript akan sangat membantu memahami setiap konsep.

Article terkait :