Skip to content

2. TypeScript Type

1. Apa itu Type dalam TypeScript?

Dalam TypeScript, tipe (type) merupakan pada fitur yang memungkinkan untuk mendefinisikan tipe data yang dapat digunakan olehvariabel, function , return suatu function, dan struktur data lainnya dalam kode. Type memungkinkan kita untuk menyatakan jenis nilai yang diharapkan atau diperbolehkan dalam berbagai bagian kode.

TypeScript menyediakan berbagai jenis tipe data, seperti number, string,boolean, object, array, null, undefined, dan banyak lagi. Selain itu, kita juga dapat membuat tipe khusus dengan menggunakan interface, union types, tuple types, function types, dan jenis lainnya.

contoh penggunakan type dalam typescript

contoh type
let age: number = 25;
let name: string = "John Doe";
let isStudent: boolean = true;
let person: { name: string; age: number } = { name: "Jane Smith", age: 30 };

function addNumbers(a: number, b: number): number {
  return a + b;
}

let numbers: number[] = [1, 2, 3, 4, 5];
let mixedValues: (string | number)[] = ["Hello", 10, "World", 20];

interface User {
  name: string;
  age: number;
  email: string;
}

let user: User = { name: "Alice", age: 28, email: "alice@example.com" };

2. Annotations Type

TypeScript menggunakan type annotations secara eksplisit untuk menentukan tipe data bagi identifikasi seperti variabel, function, objek, dan lain-lain. TypeScript menggunakan sintaksis : sebagai annotations.

contoh penggunaan type annotations
// Notasi tipe untuk variabel
let age: number = 30;
let name: string = "John Doe";
let isStudent: boolean = true;

// Notasi tipe untuk parameter fungsi dan tipe kembalian
function addNumbers(a: number, b: number): number {
  return a + b;
}

// Notasi tipe untuk properti objek
let person: { name: string; age: number } = { name: "Jane Smith", age: 25 };

3. Tipe Data Number

Tipe data number adalah salah satu tipe data dasar yang ada dalam bahasa pemrograman TypeScript (dan juga JavaScript). Tipe data number digunakan untuk mewakili angka numerik, baik bilangan bulat (integer) maupun bilangan desimal (floating-point).

contoh tipe data number
let age: number = 30; // Bilangan bulat
let pi: number = 3.14; // Bilangan desimal
let temperature: number = -10.5; // Bilangan desimal negatif

4. Tipe Data String

Tipe data string adalah salah satu tipe data dasar yang ada dalam bahasa pemrograman TypeScript (dan juga JavaScript). Tipe data string digunakan untuk mewakili data berupa teks atau urutan karakter, seperti kata, kalimat, atau kode yang terdiri dari huruf, angka, atau simbol lainnya.

contoh tipe data string
let name: string = "John Doe"; // Teks dalam tanda kutip ganda
let message: string = "Hello, TypeScript!"; // Teks dalam tanda kutip satu
let code: string = `const x = 10;`; // Teks dalam backticks (template literals)

5. Tipe Data Boolean

Tipe data boolean adalah salah satu tipe data dasar yang ada dalam bahasa pemrograman TypeScript (dan juga JavaScript). Tipe data boolean hanya memiliki dua nilai yang mungkin: true (benar) atau false (salah).

Variabel dengan tipe data boolean digunakan untuk menyimpan nilai kebenaran dari suatu pernyataan atau kondisi. Biasanya, tipe data ini digunakan dalam situasi di mana kita perlu menyatakan suatu pernyataan sebagai benar atau salah.

contoh tipe data boolean
let isReady: boolean = true;
let isLogged: boolean = false;

6. Tipe Data Array

Dalam bahasa pemrograman TypeScript, tipe data array digunakan untuk menyatakan kumpulan nilai dengan tipe yang sama yang disimpan dalam urutan tertentu. Array adalah struktur data yang memungkinkan kita untuk menyimpan lebih dari satu nilai dalam satu variabel.

contoh tipe data array
//1. Array of Number

//type interface
let list1 = [1, 2, 3, 4];
//squere bracket
let list1_2: number[] = [1, 2, 2, 3];
//generic Array
let list1_3: Array<number> = [1, 2, 2, 22];
//2. Array String
//squere bracket
let list2: string[] = ["satu", "dua", "tiga"];

//3. Array Campuran
//squere bracket
let list3: (number | string | boolean)[] = [1, "dua", 2, 3, true];

//4.Array of Object

//squere bracket
let list4_1: { color: string; index: number }[] = [
  {
    color: "blue",
    index: 1,
  },
  {
    color: "red",
    index: 2,
  },
];

7. Tipe Data Tuple

Di dalam TypeScript, sebuah tuple adalah tipe data yang mirip dengan array, tetapi dengan beberapa perbedaan penting. Tuple memungkinkan kita untuk menyimpan kumpulan nilai dengan tipe data yang berbeda dan tetap mempertahankan urutan nilai tersebut. Berbeda dengan array, di mana semua elemen harus memiliki tipe data yang sama, tuple memungkinkan kombinasi tipe data yang berbeda untuk setiap elemennya.

contoh tipe data tuple
let myTuple: [number, string, boolean];
myTuple = [10, "Hello", true];
console.log(myTuple[0]); // Output: 10
console.log(myTuple[1]); // Output: "Hello"

8. Tipe Data Object

Dalam bahasa pemrograman TypeScript, tipe data object adalah tipe yang mewakili struktur data yang kompleks atau objek yang tidak dapat diidentifikasi lebih spesifik dengan tipe data lainnya seperti number, string, boolean, atau array. Tipe data object mencakup objek JavaScript, array, fungsi, null, dan objek lainnya.

contoh tipe data object
let a = 10;

//1. Object Literal

const product = {
  id: 1,
  name: "Macbook Air M1",
  price: 50000,
  note: "",
};

//2. Inline Interface
interface Product {
  id: number;
  name: string;
  price: number;
  note: string;
}

const product1: Product = {
  id: 1,
  name: "Macbook Air M1",
  price: 13000000,
  note: "",
};
const product2: Product = {
  id: 2,
  name: "Macbook Pro M1",
  price: 1800000,
  note: "",
};

//3. Mested Object

interface ProductDetail {
  manufacture: string;
  year: number;
}

interface ProductItem {
  id: number;
  productName: string;
  price: number;
  ProductDetail: ProductDetail;
}

const Product4: ProductItem = {
  id: 1,
  productName: "Macbook Pro M1",
  price: 17000000,
  ProductDetail: {
    manufacture: "Apple",
    year: 2020,
  },
};

9. Tipe Data Enum

Tipe data enum (enumeration) adalah salah satu fitur yang ada dalam bahasa pemrograman TypeScript. Enumerasi memungkinkan kita untuk mendefinisikan sekumpulan nama-nama yang terikat dengan nilai-nilai numerik atau string.

Dalam TypeScript, enum memberikan cara yang lebih deskriptif untuk menyatakan kumpulan nilai yang tetap dan terbatas. Ini membuat kode lebih mudah dibaca, dipahami, dan dipelihara.

enum Days {
  Sunday,
  Monday,
  Tuesday,
  Wednesday,
  Thursday,
  Friday,
  Saturday,
}

let today: Days = Days.Monday;
console.log(today); // Output: 1

// Menggunakan enum untuk mengganti nilai numerik
function getDayName(day: Days): string {
  switch (day) {
    case Days.Sunday:
      return "Minggu";
    case Days.Monday:
      return "Senin";
    case Days.Tuesday:
      return "Selasa";
    case Days.Wednesday:
      return "Rabu";
    case Days.Thursday:
      return "Kamis";
    case Days.Friday:
      return "Jumat";
    case Days.Saturday:
      return "Sabtu";
    default:
      return "Hari tidak valid";
  }
}

console.log(getDayName(Days.Tuesday)); // Output: "Selasa"

10. Tipe Data Any

Dalam bahasa pemrograman TypeScript, tipe data any digunakan untuk menyatakan bahwa nilai dari suatu variabel dapat memiliki tipe apapun.

Ketika suatu variabel diberi tipe any, itu berarti variabel tersebut dapat mengandung nilai dari tipe data apa pun, termasuk tipe data primitif seperti number, string, dan boolean, serta tipe data kompleks seperti array, objek, dan fungsi.

Penggunaan type data any akan membuat penggunaan TypeScript seperti JavaScript

contoh tipe data any
let value: any = 10; // Tipe data any untuk bilangan bulat
console.log(value); // Output: 10

value = "Hello, TypeScript!"; // Tipe data any untuk teks (string)
console.log(value); // Output: "Hello, TypeScript!"

value = true; // Tipe data any untuk boolean
console.log(value); // Output: true

value = [1, 2, 3]; // Tipe data any untuk array
console.log(value); // Output: [1, 2, 3]

value = { name: "John", age: 30 }; // Tipe data any untuk objek
console.log(value); // Output: { name: "John", age: 30 }

value = function (x: number, y: number): number {
  return x + y;
}; // Tipe data any untuk fungsi
console.log(value(5, 10)); // Output: 15

11. Type Union

Type Union merupakan tipe data yang memungkinkan sebuah variabel memiliki satu dari beberapa tipe data yang mungkin

type Operasi = "perkalian" | "penjumlahan" | "pengurangan";

let operasiMatematika: Operasi = "perkalian";
let operasiMatematika: Operasi = "perkalian2";

Variabel operasiMatematika sekarang hanya bisa menyimpan salah satu dari tiga nilai: "perkalian", "penjumlahan", atau "pembagian". Jika kita mencoba menyimpan nilai selain yang telah didefinisikan, TypeScript akan menunjukkan kesalahan.

12. Type Aliases

Aliases digunakan untuk memberi nama lain atau memperpendek definisi tipe data yang sudah ada, baik itu interface maupun type.

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

type PersonTes = Person;

const user: PersonTes = {
  name: "ihsan",
  age: 20,
};