NgodingBangMengenal TypeScript: Tipe Data Primitif, Type Alias, dan Interface
Septianata Rizky Pratama_11178927896897466965.png)
This article has been translated into English version: Learn TypeScript: Primitive Data Types, Type Aliases, and Interfaces
Pendahuluan
TypeScript telah menjadi pilihan utama bagi banyak developer JavaScript karena menawarkan static typing dan fitur-fitur canggih yang membantu mengembangkan aplikasi yang lebih robust dan mudah di-maintain. Dalam artikel ini, kita akan membahas konsep dasar TypeScript yang penting untuk dipahami oleh setiap developer.
Tipe Data dalam TypeScript
TypeScript memperluas JavaScript dengan menambahkan sistem tipe statis. Mari kita bahas tipe data yang paling sering digunakan.
Tipe Data Primitif
TypeScript mendukung tipe data primitif yang sama dengan JavaScript, namun dengan kemampuan untuk menetapkan tipe secara eksplisit. Secara umum ada 3 tipe data yang paling sering digunakan: string, number, dan boolean.
/**
* string: untuk nilai teks.
*/
let name: string = "Budi Santoso";
/**
* number: untuk nilai numerik (integer dan floating point).
*/
let age: number = 25;
let height: number = 175.5;
/**
* boolean: untuk nilai true/false.
*/
let isMarried: boolean = false;Dengan menetapkan tipe primitif secara eksplisit, TypeScript akan memberikan peringatan jika kita mencoba menetapkan nilai yang tidak sesuai:
let myName: string = "Budi";
myName = 123;
console.log("my name: ", myName);
Tipe Data Non-Primitif
Array
Array dalam TypeScript dapat dideklarasikan dengan dua cara:
/**
* Cara 1: menggunakan tipe[].
*/
let fruits: string[] = ["Apel", "Jeruk", "Mangga"];
/**
* Cara 2: menggunakan generic Array<tipe>.
*/
let numbers: Array<number> = [1, 2, 3, 4, 5];
/**
* Array multi-dimensi.
*/
let matrix: number[][] = [
[1, 2, 3],
[4, 5, 6],
];Object
Object dalam TypeScript dapat didefinisikan dengan menentukan tipe propertinya:
/**
* Mendefinisikan object dengan tipe inline.
*/
const person: { name: string; age: number } = {
name: "Andi",
age: 30,
};
/**
* Mengakses properti.
*/
console.log(person.name); // "Andi"
Tuple
Tuple adalah tipe array dengan jumlah elemen tetap dan tipe yang sudah ditentukan untuk setiap posisi:
/**
* Mendefinisikan tuple.
*/
const coordinates: [number, number] = [10.5, 20.3];
/**
* Tuple dengan tipe berbeda.
*/
let user: [string, number, boolean] = ["admin", 1, true];
/**
* Error: tipe tidak sesuai.
*/
user = [1, "admin", true];Dengan menggunakan tuple dan menetapkan tipe di masing-masing posisi secara eksplisit, TypeScript akan memberikan peringatan jika kita mencoba menetapkan nilai yang tidak sesuai:
Type Alias
Type Alias memungkinkan kita membuat nama baru untuk tipe data. Ini sangat berguna untuk tipe kompleks yang akan digunakan berulang kali:
/**
* Mendefinisikan type alias sederhana.
*/
type Name = string;
const myName: Name = "Dewi";
/**
* Type alias untuk object.
*/
type Person = {
name: string;
age: number;
/** properti opsional dengan tanda ? */
address?: string;
};
/**
* Menggunakan type alias.
*/
const employee: Person = {
name: "Rudi",
age: 28,
};
/**
* Type alias untuk union type.
*/
type ID = string | number;
/**
* Valid karena ID bisa string atau number.
*/
let userId: ID = 123;
userId = "ABC123";Type Alias juga bisa digunakan untuk tipe yang lebih kompleks seperti function signature:
/**
* Type alias untuk function signature.
*/
type Operation = (a: number, b: number) => number;
/**
* Implementasi function.
*/
const add: Operation = (a, b) => a + b;
const subtract: Operation = (a, b) => a - b;
console.log(add(5, 3)); // 8
console.log(subtract(5, 3)); // 2
Interface
Interface adalah cara lain untuk mendefinisikan bentuk object dalam TypeScript. Interface sering digunakan untuk kontrak dalam pemrograman berorientasi objek:
/**
* Mendefinisikan interface.
*/
interface Vehicle {
brand: string;
year: number;
drive(): void;
}
/**
* Implementasi interface.
*/
class Car implements Vehicle {
brand: string;
year: number;
constructor(brand: string, year: number) {
this.brand = brand;
this.year = year;
}
drive() {
console.log(`Car ${this.brand} is driving...`);
}
}
/**
* Menggunakan class yang mengimplementasikan interface.
*/
const myCar = new Car("Toyota", 2020);
myCar.drive(); // "Car Toyota is driving..."
Interface juga mendukung inheritance (pewarisan):
/**
* Mendefinisikan interface.
*/
interface Animal {
name: string;
eat(): void;
}
/**
* Interface yang mengimplementasikan interface lain.
*/
interface Carnivore extends Animal {
hunt(): void;
}
/**
* Implementasi interface dengan inheritance.
*/
class Lion implements Carnivore {
name: string;
constructor(name: string) {
this.name = name;
}
eat() {
console.log(`${this.name} sedang makan...`);
}
hunt() {
console.log(`${this.name} sedang berburu mangsa...`);
}
}
/**
* Menggunakan class yang mengimplementasikan interface.
*/
const lion = new Lion("Lion");
lion.eat(); // "Lion sedang makan..."
lion.hunt(); // "Lion sedang berburu mangsa..."
Perbedaan Type Alias dan Interface
Type Alias dan Interface memiliki banyak kesamaan, tetapi juga beberapa perbedaan penting:
Ekstensi
Interface dapat di-extend dengan extends, sementara Type Alias menggunakan operator intersection (&).
interface AnimalInterface {
name: string;
}
/**
* Interface extension.
*/
interface CatInterface extends AnimalInterface {
meow(): void;
}
type AnimalType = {
name: string;
};
/**
* Type alias intersection.
*/
type CatType = AnimalType & {
meow(): void;
};Penggabungan Deklarasi
Interface dengan nama yang sama akan otomatis digabungkan (declaration merging), sementara Type Alias tidak.
/**
* Interface declaration merging.
*/
interface Person {
name: string;
}
interface Person {
age: number;
}
/**
* Hasilnya: interface Person { name: string; age: number; }.
*/
class Child implements Person {
name: string;
age: number;
constructor(name: string, age: number) {
this.name = name;
this.age = age;
}
}
const child = new Child("John", 10);
/**
* Type alias tidak bisa dideklarasikan dua kali.
*/
type Employee = {
name: string;
};
/**
* Error: Duplicate identifier 'Employee'.
*/
type Employee = {
age: number;
};
Kapan Menggunakan Type Alias atau Interface?
Sebagai panduan umum:
- Gunakan Interface ketika:
- Anda mendefinisikan bentuk object yang akan diimplementasikan oleh class.
- Anda ingin memanfaatkan fitur declaration merging.
- Anda bekerja dengan pola OOP (Object-Oriented Programming).
- Gunakan Type Alias ketika:
- Anda mendefinisikan tipe primitif, union, atau tuple.
- Anda perlu menggunakan mapped types atau conditional types.
- Anda bekerja dengan pola FP (Functional Programming).
Ulasan lebih lengkap tentang perbedaan Type dan Interface bisa dibaca di sini: Mengenal TypeScript: Interface & Type
Kesimpulan
Memahami tipe data, type alias, dan interface adalah fondasi penting dalam pengembangan aplikasi dengan TypeScript. Dengan menggunakan fitur-fitur ini dengan tepat, Anda dapat meningkatkan keamanan tipe, keterbacaan kode, dan mengurangi bug potensial dalam aplikasi Anda.
