Tujuan Pembelajaran

Menguasai tipe primitive TypeScript
Bisa mendefinisikan array dan object types
Mengerti type inference dan type annotation

Analogi

Diagram


      Tipe Primitive:
├── string, number, boolean
├── null, undefined
└── symbol, bigint

Tipe Compound:
├── Array<T> atau T[]
├── Object { key: type }
└── Tuple [string, number]

TypeScript menambahkan tipe dasar yang familiar dari bahasa pemrograman lain

Penjelasan Konsep

TypeScript memiliki sistem tipe yang intuitif kalau kamu sudah familiar dengan konsep tipe dari bahasa lain.

Mari pelajari dasar-dasarnya.

Tipe Primitive

Tipe dasar yang paling sering dipakai:

let nama: string = 'Budi';
let umur: number = 25;
let aktif: boolean = true;

Tipe lain:

let kosong: null = null;
let belumAda: undefined = undefined;
let unik: symbol = Symbol('id');
let besar: bigint = 9007199254740991n;

Type Inference: TypeScript yang Pintar

TypeScript bisa menebak tipe dari nilai yang kamu assign — tidak perlu selalu menulis tipe:

let nama = 'Budi';      // TypeScript tahu ini string
let umur = 25;          // TypeScript tahu ini number
nama = 42;              // Error: Type 'number' not assignable to 'string'

Array

Dua cara mendefinisikan array:

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

'Ani'];  // Generic syntax

Object Type

Definisikan shape object dengan interface atau type:

interface User {
  id: number;
  nama: string;
  email: string;
  aktif?: boolean;  // Optional (bisa ada, bisa tidak)
}

const user: User = {
  id: 1,
  nama: 'Budi',
  email: 'budi@mail.com',
  // aktif tidak wajib diisi karena optional
};

Tuple: Array dengan Tipe Tetap

Tuple adalah array dengan urutan tipe yang fixed:

let koordinat: [number, number] = [10, 20];
let userEntry: [number, string, boolean] = [1, 'Budi', true];

Union Type: Lebih dari Satu Tipe

Union memungkinkan variabel punya beberapa tipe:

let id: string | number = 'abc123';
id = 42;  // OK, karena id bisa string atau number

Union sangat berguna untuk input yang fleksibel tapi tetap terkontrol.

Inti yang Perlu Dipahami

Bagian ini berfokus pada menguasai tipe primitive TypeScript., bisa mendefinisikan array dan object types., dan mengerti type inference dan type annotation. Jangan terburu-buru menghafal istilahnya. Lebih penting untuk memahami peran setiap konsep dan kapan konsep itu muncul dalam pekerjaan web development.

Saat membaca Tipe Dasar TypeScript, gunakan tujuan belajar sebagai penanda arah. Kalau kamu sudah bisa menjelaskan tujuan itu dengan kata-katamu sendiri, berarti fondasinya mulai terbentuk.

Cara Membayangkannya

TypeScript menambahkan tipe dasar yang familiar dari bahasa pemrograman lain. Analogi ini dipakai supaya konsep teknis tidak terasa melayang. Hubungkan setiap istilah dengan perannya: siapa yang meminta, siapa yang memproses, data apa yang berpindah, dan hasil apa yang diharapkan.

Kalau analoginya sudah terasa masuk akal, barulah lihat istilah teknisnya. Cara ini membuat materi lebih mudah dipahami daripada langsung menghafal definisi.

Saat Melihat Contoh Kode

Contoh kode pada chapter ini memakai bahasa typescript. Bacalah contoh kode sebagai ilustrasi alur, bukan sebagai bagian yang harus langsung dihafal. Interface mendefinisikan shape object. Union dengan literal type (‘admin’ | ‘user’) membatasi nilai yang valid. Tuple pattern [data, error] umum di Go/Rust.

Perhatikan nama fungsi, urutan langkah, dan data yang berpindah. Biasanya tiga hal itu sudah cukup untuk memahami hubungan antara teori dan praktik.

Konteks dalam Perjalanan Belajar

Setiap konsep di platform ini dipilih karena dipakai di industri. Fokus pada pemahaman, bukan hafalan.

Kamu sudah di bagian lanjutan. Mulai pikirkan bagaimana konsep ini dipakai di dunia kerja — bukan hanya untuk belajar, tapi untuk membangun produk nyata.

Gunakan pertanyaan reflektif dan prompt AI di akhir chapter sebagai latihan aktif. Membaca saja tidak cukup — kamu perlu menjelaskan ulang dengan kata-katamu sendiri.

Contoh Kode

typescript

// Interface untuk API Response
interface User {
  id: number;
  nama: string;
  email: string;
  avatar?: string;       // Optional
  role: 'admin' | 'user'; // Union + Literal type
}

interface Post {
  id: number;
  title: string;
  content: string;
  author: User;          // Nested object type
  tags: string[];        // Array of strings
  publishedAt: Date;
}

// Type inference dari return value
function getUser(): User {
  return {
    id: 1,
    nama: 'Budi',
    email: 'budi@mail.com',
    role: 'admin',
  };
}

// Tuple untuk API result
type ApiResult<T> = [T | null, string | null];

function fetchUser(): ApiResult<User> {
  try {
    const user = getUser();
    return [user, null];
  } catch (err) {
    return [null, err instanceof Error ? err.message : 'Unknown error'];
  }
}

const [data, error] = fetchUser();
if (error) console.error(error);
else console.log(data?.nama);

Penjelasan Kode

Interface mendefinisikan shape object. Union dengan literal type ('admin' | 'user') membatasi nilai yang valid. Tuple pattern [data, error] umum di Go/Rust.

Prompt AI

Buat interface untuk Product (e-commerce) dan CartItem. Gunakan union type untuk ProductCategory, optional fields untuk diskon, dan array untuk tags.

Pertanyaan Reflektif

Coba hapus semua type annotations dari kode TypeScript-mu. Berapa banyak yang TypeScript bisa tebak otomatis (inference) vs yang perlu kamu tulis eksplisit?