Pengantar JavaScript: Sejarah, Fitur, dan Contoh Dasar

Pengenalan TypeScript

TypeScript adalah bahasa pemrograman yang dikembangkan oleh Microsoft sebagai superset dari JavaScript. Artinya semua kode JavaScript yang valid juga valid di TypeScript, tetapi TypeScript menambahkan fitur tambahan seperti static typing (pengetikan statis) untuk mendefinisikan tipe data variabel, yang membantu mengurangi kesalahan yang mungkin terdeteksi saat runtime di JavaScript. TypeScript juga mendukung fitur-fitur modern seperti async/await, decorators, dan integrasi dengan berbagai framework JavaScript populer seperti React, Angular, dan Vue.js.

Tipe Data Primitif

let nama: string = "Budi";
const salam: string = `Halo ${nama}`;

let umur: number = 25;
const harga: number = 99.99;

let aktif: boolean = true;
const selesai: boolean = false;

Tipe Data Array

let angka: number[] = [1, 2, 3];
const nama: Array<string> = ["Andi", "Budi"];

const warna: ReadonlyArray<string> = ["merah", "hijau"];
// warna.push("biru"); // Error

let user: [string, number] = ["Andi", 25];
const statusHTTP: [number, string] = [200, "OK"];

Tipe Data Any

Digunakan ketika tipe data tidak diketahui atau dinamis

let dataDinamis: any = "Bisa diisi apa saja";
dataDinamis = 100; // Valid
dataDinamis = true; // Valid

Union Type

Memungkinkan variabel memiliki beberapa tipe data

let id: string | number;
id = "ABC123"; // Valid
id = 123; // Valid

// Dengan type checking
function printId(id: string | number) {
  if (typeof id === "string") {
    console.log(id.toUpperCase());
  } else {
    console.log(id.toFixed(2));
  }
}

Type Alias

Membuat nama baru untuk tipe data yang sudah ada

type User = {
  id: string;
  name: string;
  age?: number; // Properti opsional
};

const user1: User = {
  id: "1",
  name: "Andi"
};

type Status = "active" | "inactive" | "pending";

function setStatus(status: Status) {
  // ...
}

Object Type

Lebih disarankan daripada type alias untuk mendefinisikan bentuk object

interface Product {
  id: string;
  name: string;
  price: number;
}

const laptop: Product = {
  id: "P001",
  name: "Laptop Gaming",
  price: 15000000
};

Optional Properties

Properti yang boleh tidak diisi (undefined)

interface Config {
  apiUrl: string;
  timeout?: number; // Opsional
  retry?: boolean;  // Opsional
}

const config1: Config = {
  apiUrl: "https://api.contoh.com"
  // timeout dan retry tidak diisi
};

Enum

Kumpulan nilai konstan yang sudah pasti

enum Arah {
  Atas = "ATAS",
  Bawah = "BAWAH",
  Kiri = "KIRI",
  Kanan = "KANAN"
}

function gerakan(arah: Arah) {
  // ...
}

gerakan(Arah.Atas);

Null dan Undefined

let nama: string | null = null;
nama = "Andi"; // Valid

function cariUser(id: string): User | undefined {
  // ...
}

Interface

Untuk mendefinisikan bentuk object

interface Mahasiswa {
  nim: string;
  nama: string;
  ipk: number;
}

Function Interface

Mendefinisikan bentuk function

interface SearchFunction {
  (source: string, keyword: string): boolean;
}

const cari: SearchFunction = (src, kw) => {
  return src.includes(kw);
};

Indexable Interface

Untuk object atau array yang bisa diakses dengan index

interface StringArray {
  [index: number]: string;
}

const array: StringArray = ["a", "b", "c"];
console.log(array[0]); // "a"

Extending Interface

Mewarisi properti dari interface lain

interface Orang {
  nama: string;
  umur: number;
}

interface Pekerja extends Orang {
  jabatan: string;
  gaji: number;
}

Function dalam Interface

interface Jam {
  waktuSekarang: Date;
  setWaktu(d: Date): void;
}

Intersection Type

Menggabungkan beberapa tipe menjadi satu

type Admin = {
  nama: string;
  hakAkses: string[];
};

type Karyawan = {
  nama: string;
  mulaiKerja: Date;
};

type AdminKaryawan = Admin & Karyawan;

const admin1: AdminKaryawan = {
  nama: "Budi",
  hakAkses: ["create", "delete"],
  mulaiKerja: new Date()
};

Type Assertion

Memberitahu TypeScript tentang tipe data yang kita ketahui

let nilai: any = "ini string";
let panjang: number = (nilai as string).length;

// Alternatif syntax
let panjang2: number = (<string>nilai).length;