Masukkan Password
13 Memahami Alias Tipe
1. Apa itu Type Alias?
Sederhananya:
Type Alias adalah cara untuk memberikan nama lain/custom name kepada sebuah tipe.
Kita menggunakan keyword:
type
Bentuk umumnya:
type NamaType = tipe;
Contoh:
type StringType = string;
Artinya kita membuat tipe baru bernama StringType, yang sebenarnya merepresentasikan:
string
Jadi kita bisa menggunakan:
let name: StringType = "John";
Daripada:
let name: string = "John";
Dalam contoh sederhana ini memang belum terlihat manfaatnya. Tapi manfaat Type Alias akan terasa ketika tipe kita mulai kompleks dan digunakan di banyak tempat.
2. Kenapa disebut “Alias”?
Kata alias secara sederhana berarti nama lain.
Misalnya seseorang bernama:
Alexander
tetapi teman-temannya memanggilnya:
Alex
“Alex” adalah nama lain/alias dari Alexander.
Konsepnya mirip di TypeScript:
type StringType = string;
StringType adalah nama lain yang kita berikan untuk string.
Jadi:
StringType
sebenarnya merepresentasikan:
string
3. Contoh paling sederhana
Misalnya kita punya:
type StringType = string;
Kemudian:
let name: StringType = "John";
TypeScript memahami:
StringType
↓
string
Jadi:
let name: StringType = "John";
kurang lebih sama dengan:
let name: string = "John";
4. Type Alias tidak hanya untuk string
Kita bisa membuat alias untuk berbagai macam tipe.
Misalnya:
type ID = number;
Kemudian:
let userId: ID = 123;
Atau:
type IsActive = boolean;
let active: IsActive = true;
Bisa juga:
type Name = string;
let firstName: Name = "John";
Jadi Type Alias bisa digunakan untuk:
stringnumberboolean- Union Type
- Literal Type
- Object Type
- dan tipe-tipe lainnya.
5. Kenapa Type Alias berguna?
Sekarang kita masuk ke alasan sebenarnya kenapa Type Alias dibuat.
Misalnya kita memiliki function:
function printStatus(code: string | number) {
// ...
}
Di sini parameter code boleh berupa:
string
ATAU
number
Karena kita menggunakan Union Type:
string | number
Misalnya ada function lain:
function processCode(code: string | number) {
// ...
}
Kemudian function lain lagi:
function validateCode(code: string | number) {
// ...
}
Kita harus terus menulis:
string | number
berulang-ulang.
Kalau tipe tersebut semakin kompleks, penulisannya juga semakin panjang.
Nah, kita bisa membuat Type Alias:
type StringOrNumber = string | number;
Sekarang kita bisa menggunakan:
function printStatus(code: StringOrNumber) {
// ...
}
Dan:
function processCode(code: StringOrNumber) {
// ...
}
Dan:
function validateCode(code: StringOrNumber) {
// ...
}
Jauh lebih rapi.
6. Membuat Type Alias dari Union Type
Mari kita lihat prosesnya.
Awalnya:
function printStatus(code: string | number) {
// ...
}
Kita kemudian membuat:
type StringOrNumber = string | number;
Sekarang function-nya menjadi:
function printStatus(code: StringOrNumber) {
// ...
}
Perhatikan bahwa:
StringOrNumber
bukan tipe baru yang benar-benar berbeda dari string | number.
Dia adalah nama yang kita berikan kepada tipe tersebut.
Gambaran sederhananya:
StringOrNumber
↓
string | number
7. Apakah behavior-nya berubah?
Tidak.
Misalnya:
type StringOrNumber = string | number;
function printStatus(code: StringOrNumber) {
console.log(code);
}
Kita tetap bisa:
printStatus("ABC"); // ✅
printStatus(123); // ✅
Tetapi:
printStatus(true); // ❌
Karena Type Alias tersebut sebenarnya adalah:
string | number
Jadi aturan tipe aslinya tetap berlaku.
8. Type Alias + Literal Type
Nah, ini semakin menarik.
Di materi sebelumnya kita belajar:
"admin" | "read" | "read-write"
Ini adalah gabungan Literal Type + Union Type.
Misalnya kita punya:
function roleMessage(
role: "admin" | "read" | "read-write"
) {
// ...
}
Kalau kita membutuhkan tipe yang sama di banyak tempat, kita harus menulis semuanya lagi:
"admin" | "read" | "read-write"
Misalnya:
function roleMessage(
role: "admin" | "read" | "read-write"
) {
// ...
}
function checkPermission(
role: "admin" | "read" | "read-write"
) {
// ...
}
Ini tidak ideal.
Kita bisa membuat alias:
type Role = "admin" | "read" | "read-write";
Sekarang:
function roleMessage(role: Role) {
// ...
}
Dan:
function checkPermission(role: Role) {
// ...
}
Lebih bersih dan mudah dibaca.
9. Type Alias membuat kode lebih mudah dibaca
Bandingkan:
function checkPermission(
role: "admin" | "read" | "read-write"
) {
// ...
}
dengan:
type Role = "admin" | "read" | "read-write";
function checkPermission(role: Role) {
// ...
}
Menurut saya contoh kedua jauh lebih mudah dipahami.
Ketika melihat:
role: Role
kita langsung tahu:
“Oh, parameter ini berhubungan dengan Role.”
Kita tidak perlu membaca seluruh isi:
"admin" | "read" | "read-write"
setiap kali.
10. Type Alias sangat berguna untuk Object
Nah, ini bagian yang paling penting dari lecture.
Type Alias menjadi sangat berguna ketika kita bekerja dengan object.
Misalnya kita punya object user:
{
firstName: string;
lastName: string;
age: number;
}
Kita bisa membuat Type Alias:
type User = {
firstName: string;
lastName: string;
age: number;
};
Sekarang User menjadi nama untuk struktur object tersebut.
11. Memahami Object Type Alias
Perhatikan:
type User = {
firstName: string;
lastName: string;
age: number;
};
Mari kita pecah.
Bagian ini:
type User
berarti:
Kita sedang membuat Type Alias bernama
User.
Kemudian:
= {
berarti:
Tipe
Userberupa sebuah object.
Lalu:
firstName: string;
berarti:
Object harus memiliki property
firstNameyang berupa string.
Kemudian:
lastName: string;
berarti:
Object harus memiliki property
lastNameyang berupa string.
Dan:
age: number;
berarti:
Object harus memiliki property
ageyang berupa number.
Jadi:
type User = {
firstName: string;
lastName: string;
age: number;
};
dapat kita baca sebagai:
“Buat sebuah tipe bernama
User, yang merupakan object denganfirstNamestring,lastNamestring, danagenumber.”
12. Menggunakan Type Alias User
Setelah membuat:
type User = {
firstName: string;
lastName: string;
age: number;
};
kita bisa membuat object:
let user: User = {
firstName: "John",
lastName: "Smith",
age: 32
};
TypeScript sekarang tahu bentuk object user.
Karena user bertipe:
User
maka TypeScript mengharapkan:
firstName → string
lastName → string
age → number
13. Apa yang terjadi kalau property salah?
Misalnya:
let user: User = {
firstName: "John",
lastName: "Smith",
age: "32"
};
❌ Error.
Kenapa?
Karena kita sudah mengatakan:
age: number;
Tetapi kita memberikan:
age: "32"
Yang merupakan string.
Walaupun terlihat seperti angka, "32" tetap merupakan string.
Yang benar:
age: 32
14. Bagaimana kalau property tidak ada?
Misalnya:
let user: User = {
firstName: "John",
lastName: "Smith"
};
❌ Error.
Karena age adalah property yang wajib ada.
Kita sudah mendefinisikan:
type User = {
firstName: string;
lastName: string;
age: number;
};
Jadi object User harus mempunyai ketiganya:
firstName
lastName
age
15. Type Alias menghindari pengulangan
Sekarang kita masuk ke contoh yang ada di lecture.
Misalnya kita punya function:
function getFullName(user: {
firstName: string;
lastName: string;
age: number;
}) {
return user.firstName + " " + user.lastName;
}
Kemudian kita punya function:
function isEligibleForVoting(user: {
firstName: string;
lastName: string;
age: number;
}) {
return user.age >= 18;
}
Perhatikan bahwa kita menulis tipe object yang sama dua kali:
{
firstName: string;
lastName: string;
age: number;
}
Bayangkan ada 10 function.
Kita harus menulis struktur tersebut 10 kali.
Ini tidak bagus.
16. Solusinya: buat Type Alias
Kita buat:
type User = {
firstName: string;
lastName: string;
age: number;
};
Kemudian function pertama:
function getFullName(user: User) {
return user.firstName + " " + user.lastName;
}
Function kedua:
function isEligibleForVoting(user: User) {
return user.age >= 18;
}
Sekarang jauh lebih sederhana.
17. Membuat object User
Kita juga bisa menggunakan Type Alias tersebut saat membuat object:
let user: User = {
firstName: "John",
lastName: "Smith",
age: 32
};
Kemudian:
getFullName(user);
dan:
isEligibleForVoting(user);
Karena user bertipe User, maka TypeScript tahu bahwa object tersebut mempunyai:
firstName
lastName
age
18. Apa keuntungan IntelliSense?
Salah satu manfaat lain adalah editor seperti VS Code bisa membantu kita.
Misalnya:
let user: User = {
firstName: "John",
lastName: "Smith",
age: 32
};
Ketika kita menulis:
user.
editor bisa memberikan suggestion:
firstName
lastName
age
Karena TypeScript tahu:
useradalahUser.
Dan User memiliki tiga property tersebut.
Ini sangat membantu saat coding.
19. Memahami function getFullName
Mari kita lihat function-nya:
function getFullName(user: User) {
return user.firstName + " " + user.lastName;
}
Parameter:
user: User
berarti:
Parameter
userharus mengikuti struktur Type AliasUser.
Kemudian:
user.firstName
TypeScript tahu bahwa firstName adalah:
string
Begitu juga:
user.lastName
adalah:
string
Sehingga:
user.firstName + " " + user.lastName
menghasilkan:
string
Contohnya:
John + " " + Smith
menjadi:
John Smith
20. Memahami function isEligibleForVoting
Function kedua:
function isEligibleForVoting(user: User) {
return user.age >= 18;
}
Kita tahu:
user.age
adalah:
number
Karena:
type User = {
firstName: string;
lastName: string;
age: number;
};
Kemudian:
user.age >= 18
menghasilkan:
boolean
Karena hasil perbandingan hanya:
true
atau:
false
Misalnya:
32 >= 18
hasilnya:
true
21. Gambaran hubungan semuanya
Sekarang coba lihat hubungan antar bagian:
type User = {
firstName: string;
lastName: string;
age: number;
};
Kita membuat cetakan/aturan bernama:
User
Kemudian:
let user: User = {
firstName: "John",
lastName: "Smith",
age: 32
};
Object tersebut mengikuti aturan User.
Lalu:
function getFullName(user: User) {
// ...
}
Function juga menerima object yang mengikuti aturan User.
Dan:
function isEligibleForVoting(user: User) {
// ...
}
Function lain juga menggunakan aturan User.
Jadi satu Type Alias bisa digunakan di banyak tempat.
22. Analogi yang mudah: cetakan
Menurut saya analogi paling mudah untuk memahami Type Alias Object adalah cetakan/formulir.
Bayangkan kita punya formulir data user:
USER FORM
------------------
First Name : ______
Last Name : ______
Age : ______
Formulir itu adalah:
type User = {
firstName: string;
lastName: string;
age: number;
};
Kemudian kita mengisi formulir:
let user: User = {
firstName: "John",
lastName: "Smith",
age: 32
};
Kita juga bisa membuat user lain:
let user2: User = {
firstName: "Jane",
lastName: "Doe",
age: 25
};
Keduanya harus mengikuti struktur yang sama.
23. Type Alias bukan membuat object
Ini juga penting.
Ketika kita menulis:
type User = {
firstName: string;
lastName: string;
age: number;
};
kita belum membuat object.
Kita hanya membuat aturan/definisi tipe.
Barulah ketika:
let user: User = {
firstName: "John",
lastName: "Smith",
age: 32
};
kita membuat object.
Jadi:
type User
↓
mendefinisikan aturan
↓
let user: User
↓
membuat object yang mengikuti aturan
24. Type Alias bisa diberi nama apa saja
Misalnya:
type User = {
// ...
};
atau:
type UserType = {
// ...
};
atau:
type Person = {
// ...
};
Secara teknis kita bebas menentukan nama.
Tetapi sebaiknya gunakan nama yang jelas dan menggambarkan tipe tersebut.
Contoh:
type User = ...
type Product = ...
type Address = ...
type Order = ...
type Role = ...
Lebih mudah dipahami daripada nama seperti:
type X = ...
type Data1 = ...
type ABC = ...
25. Type Alias untuk data aplikasi
Dalam aplikasi nyata, Type Alias sering digunakan untuk mendefinisikan bentuk data.
Misalnya Product:
type Product = {
id: number;
name: string;
price: number;
};
Kemudian:
let product: Product = {
id: 1,
name: "Laptop",
price: 1000
};
Atau:
type Address = {
street: string;
city: string;
postalCode: string;
};
Kemudian:
let address: Address = {
street: "Main Street",
city: "Jakarta",
postalCode: "12345"
};
26. Type Alias + Union + Literal sekaligus
Ketiga konsep yang sudah kita pelajari bisa digabungkan.
Misalnya:
type Role = "admin" | "user" | "guest";
Kemudian kita gunakan di object:
type User = {
name: string;
age: number;
role: Role;
};
Sekarang:
let user: User = {
name: "John",
age: 25,
role: "admin"
};
Valid.
Tetapi:
let user: User = {
name: "John",
age: 25,
role: "superadmin"
};
❌ Error.
Karena:
Role
hanya mengizinkan:
"admin"
"user"
"guest"
27. Jadi Type Alias bisa menyimpan tipe yang kompleks
Misalnya kita bisa membuat:
type Role = "admin" | "user" | "guest";
Kemudian:
type User = {
name: string;
age: number;
role: Role;
};
Bahkan kita bisa memiliki:
type ID = string | number;
Lalu:
type User = {
id: ID;
name: string;
age: number;
role: Role;
};
Ini membuat definisi tipe kita lebih terstruktur.
28. Perbedaan type dengan tipe biasa
Tanpa Type Alias:
function getUser(user: {
name: string;
age: number;
}) {
// ...
}
Dengan Type Alias:
type User = {
name: string;
age: number;
};
function getUser(user: User) {
// ...
}
Keduanya memiliki tujuan tipe yang sama.
Perbedaannya adalah versi kedua lebih reusable dan mudah dibaca.
29. Pola yang perlu kamu hafalkan
Ada beberapa pola penting.
Alias untuk string
type Name = string;
Alias untuk union
type StringOrNumber = string | number;
Alias untuk Literal Union
type Role = "admin" | "user" | "guest";
Alias untuk object
type User = {
name: string;
age: number;
};
Kemudian semuanya bisa digunakan:
let user: User;
atau:
function processUser(user: User) {
// ...
}
30. Hubungan dengan materi sebelumnya
Kalau kita susun materi-materi yang sudah dipelajari:
Union Type
string | number
Artinya:
string ATAU number.
Literal Type
"admin"
Artinya:
hanya nilai
"admin".
Literal + Union
"admin" | "user" | "guest"
Artinya:
hanya salah satu dari tiga nilai tersebut.
Type Alias
type Role = "admin" | "user" | "guest";
Artinya:
Kita memberikan nama
Rolekepada tipe"admin" | "user" | "guest"agar mudah digunakan kembali.
31. Kesimpulan paling sederhana
Kalau ingin mengingat lecture ini dengan satu konsep:
Type Alias adalah cara memberikan nama kepada sebuah tipe agar tipe tersebut bisa digunakan kembali di banyak tempat.
Contoh paling sederhana:
type ID = string | number;
Sekarang daripada menulis:
string | number
berulang kali, kita cukup menulis:
ID
Dan untuk object:
type User = {
firstName: string;
lastName: string;
age: number;
};
Kemudian bisa digunakan di mana-mana:
let user: User;
function getFullName(user: User) {
// ...
}
function isEligibleForVoting(user: User) {
// ...
}
Jadi pola berpikirnya adalah:
TIPE YANG PANJANG / SERING DIULANG
↓
type Alias
↓
beri nama yang jelas
↓
gunakan berkali-kali
Intinya, Type Alias bukan terutama untuk membuat tipe baru dari nol, tetapi untuk memberikan nama yang jelas dan reusable pada tipe yang kita miliki—terutama ketika tipenya kompleks seperti Union, Literal, atau Object Type.