Skip to content

5. Interface dan Type

Feature Interface Type
aliases
object
merge
Intersection & Union
implementes
extend

1. Aliases

Aliases digunakan untuk memberi nama lain atau memperpendek definisi tipe data yang sudah ada, baik itu interface maupun type. Pada TypeScript alies harus bisa digunakan pada type

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

type PersonTes = Person;

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

2. Object

Inteface dan Type sama-sama didefinikan mengggukana object

interface Product {
  id: number;
  namaProduck: string;
}

type ProductDetail = {
  harga: number;
  manufactur: string;
};

3. Merge

Intercafe dengan nama yang sama akan digabungkan menjadi satu definisi yang lengkap.TypeScript akan menggabungkan definisi-properti dan definisi-metode dari kedua interface tersebut menjadi satu.

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

interface User {
  alamat: string;
}

const myUser: User = {
  name: "ihsan",
  age: 12,
  alamat: "kebonjati",
};

4. Intersection & Union

type TypeA = {
  id: number;
  propA: string;
};

type TypeB = {
  id: number;
  propB: string;
};

intersection ('&')

Intersection digambarkan dengan simbol & dan memungkinkan kita untuk menggabungkan dua atau lebih tipe data menjadi satu tipe data yang lebih kompleks. Dalam intersection, tipe data yang dibentuk akan berisi properti dan metode dari semua tipe data yang terlibat.

type intersectionAB = TypeA & TypeB;
const myData2: intersectionAB = {
  id: 1,
  propA: "test A",
  propB: "test B",
};



const myData2: intersectionAB = {
  id: 1,
  propA: "test A",  //akan terjadi error karena propB tidak ada

};

Union ('|')

Union digambarkan dengan simbol | dan memungkinkana kita untuk mendefinisikan tipe data yang bisa berisi salah satu dari beberapa tipe data yang berbeda. kita dapat menyatakan bahwa nilai atau variabel bisa memiliki beberapa tipe yang berbeda.

type UnionAB = TypeA | TypeB;

const myData1: UnionAB = {
  id: 1,
  propA: "test A",
};


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

const operasiMatematika: Operasi = 'perkalian'
const operasiMatematika: Operasi = 'perkalian2' //error karena tidak ada pada option

5. implements

Pada TypeScript, "implements" digunakan untuk menyatakan bahwa sebuah kelas telah mengimplementasikan (menyediakan implementasi untuk) sebuah interface tertentu. Dengan menggunakan "implements", Kita dapat memastikan bahwa class tersebut menyediakan seluruh struktur dan perilaku yang didefinisikan dalam interface yang diimplementasikan.

interface

interface Person {
  name: string;
  age: number;
  getName(id: number): string;
}

class Identias implements Person {
  name: string;
  age: number;
  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }

  getName(id: number): string {
    return "ihsan";
  }
}

Type

type Person = {
  name: string;
  age: number;
  getName(id: number): string;
};

class Identias implements Person {
  name: string;
  age: number;
  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }

  getName(id: number): string {
    return "ihsan";
  }
}

6. Extend

Interface memungkinkan kita untuk membuat sebuah interface baru yang meng-extend atau memperluas fungsionalitas dari interface yang sudah ada sebelumnya

interface Person {
  name: string;
  age: number;
  getName(id: number): string;
}

interface User extends Person {
  alamat: string;
}