Sintaks Utama #

TypeScript adalah superset dari JavaScript yang menambahkan tipe statis dan fitur tambahan lainnya. Syntax utama TypeScript mencakup berbagai elemen yang mendukung penulisan kode yang lebih aman, jelas, dan dapat dipelihara. Berikut adalah beberapa syntax utama TypeScript yang penting untuk dipahami:

Tipe Data #

TypeScript memperkenalkan tipe statis, yang memungkinkan Anda untuk menetapkan tipe ke variabel, parameter, dan nilai pengembalian dari fungsi.

Contoh:

let isDone: boolean = false;
let age: number = 30;
let name: string = "Alice";
let numbers: number[] = [1, 2, 3, 4, 5];

• boolean: Tipe data untuk nilai true atau false.
• number: Tipe data untuk angka (bilangan bulat, pecahan, dan sebagainya).
• string: Tipe data untuk teks.
• array: Koleksi elemen dengan tipe yang sama.

Fungsi #

Fungsi di TypeScript didefinisikan dengan tipe parameter dan tipe nilai pengembalian.

Contoh:

function greet(name: string): string {
    return `Hello, ${name}`;
}

console.log(greet("Alice")); // Output: Hello, Alice

• name: string: Tipe parameter yang harus berupa string.
• : string: Tipe nilai pengembalian yang juga berupa string.

Interfaces #

Interface digunakan untuk mendefinisikan kontrak struktur objek. Ini memungkinkan Anda untuk menentukan bentuk objek yang lebih kompleks.

Contoh:

interface Person {
    name: string;
    age: number;
}

let alice: Person = {
    name: "Alice",
    age: 25
};

• Person: Interface yang mendefinisikan objek dengan properti name dan age.

Classes #

Kelas (class) di TypeScript mendukung pendekatan berorientasi objek, termasuk properti, metode, pewarisan, dan lainnya.

Contoh:

class Animal {
    name: string;

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

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

let dog = new Animal("Dog");
dog.makeSound(); // Output: Dog makes a sound.

• constructor: Fungsi khusus yang dipanggil saat objek diinisialisasi.
• void: Tipe nilai pengembalian yang menunjukkan bahwa fungsi tidak mengembalikan nilai.

Tipe Union #

TypeScript mendukung tipe union, yang memungkinkan variabel untuk memiliki lebih dari satu tipe.

Contoh:

let value: string | number;
value = "Hello";
value = 42;

• string | number: value dapat berupa string atau number.

Type Aliases #

Type alias memungkinkan Anda untuk memberikan nama baru untuk tipe yang ada.

Contoh:

type ID = string | number;

let userId: ID;
userId = "abc123";
userId = 123;

• type ID: Alias untuk tipe union string | number.

Enums #

Enums adalah tipe khusus yang memungkinkan Anda untuk mendefinisikan kumpulan nilai konstan.

Contoh:

enum Direction {
    Up,
    Down,
    Left,
    Right
}

let dir: Direction = Direction.Up;
console.log(dir); // Output: 0

• enum: Mendefinisikan enum dengan beberapa pilihan nilai.

Generics #

Generics memungkinkan Anda untuk membuat komponen yang dapat bekerja dengan berbagai tipe, memberikan fleksibilitas dan keamanan tipe.

Contoh:

function identity<T>(arg: T): T {
    return arg;
}

console.log(identity<string>("Hello")); // Output: Hello
console.log(identity<number>(42));      // Output: 42

• <T>: Menunjukkan bahwa fungsi ini generik dan dapat menerima tipe apa pun sebagai argumen.

Modules #

TypeScript mendukung penggunaan modul untuk mengatur dan mengelola kode dalam unit yang lebih kecil dan modular.

Contoh:

// moduleA.ts
export const name = "Alice";

// moduleB.ts
import { name } from './moduleA';
console.log(name); // Output: Alice

• export: Mengekspor variabel, fungsi, atau kelas dari modul.
• import: Mengimpor variabel, fungsi, atau kelas dari modul lain.

Tuples #

Tuples memungkinkan Anda untuk menyimpan sejumlah elemen dengan tipe yang berbeda di dalam array tetap.

Contoh:

let person: [string, number] = ["Alice", 25];

• [string, number]: Tuple yang berisi string di posisi pertama dan number di posisi kedua.

Decorators #

Decorators adalah fitur lanjutan yang memungkinkan Anda untuk menambahkan metadata atau memodifikasi kelas dan propertinya.

Contoh:

function readonly(target: any, key: string) {
    Object.defineProperty(target, key, {
        writable: false
    });
}

class Person {
    @readonly
    name: string;

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

let person = new Person("Alice");
person.name = "Bob"; // Error: Cannot assign to 'name' because it is a read-only property.

• @readonly: Contoh decorator yang membuat properti menjadi read-only.

Optional Chaining dan Nullish Coalescing #

TypeScript memperkenalkan fitur-fitur modern seperti optional chaining (?.) dan nullish coalescing (??).

Contoh:

let user = { name: "Alice", address: { city: "Wonderland" } };
console.log(user.address?.city); // Output: Wonderland
console.log(user.phone?.number); // Output: undefined

let value = null;
let defaultValue = value ?? "Default";
console.log(defaultValue); // Output: Default

• ?.: Optional chaining, mengakses properti dengan aman tanpa menyebabkan error jika properti atau objek tersebut null atau undefined.
• ??: Nullish coalescing, memberikan nilai default jika nilai yang dicek adalah null atau undefined.

Kesimpulan #

Syntax utama TypeScript memberikan banyak fitur tambahan dibandingkan JavaScript, yang memungkinkan pengembang untuk menulis kode yang lebih aman, terstruktur, dan mudah dipelihara. Dengan dukungan untuk tipe statis, kelas, interface, generics, dan modul, TypeScript menyediakan alat yang kuat untuk pengembangan aplikasi skala besar.