Masukkan Password
37 Membuat & Menggunakan Kelas
Lecture ini sudah mulai masuk ke praktik membuat class dan object di TypeScript. Kalau lecture sebelumnya membahas “apa itu class secara konsep”, kali ini kita belajar bagaimana class dibuat, bagaimana object dibuat dari class, bagaimana constructor bekerja, dan bagaimana TypeScript mengubah class menjadi JavaScript.
Saya akan jelaskan dari dasar dan mengikuti alur kode di lecture.
1. Gambaran Besar Materi
Ada beberapa konsep utama yang perlu kamu pahami:
Class
↓
Constructor
↓
new
↓
Object / Instance
↓
Properties memiliki nilai
Contohnya:
class User {
name: string;
age: number;
gender: string;
}
Kemudian:
const user1 = new User(...);
User adalah class, sedangkan user1 adalah object/instance yang dibuat dari class tersebut.
2. Membuat Class di TypeScript
Untuk membuat class, kita menggunakan keyword:
class
Contohnya:
class User {
}
Di sini:
class
↓
User
User adalah nama class.
Secara convention, nama class biasanya diawali huruf kapital:
class User
class Product
class Customer
class Order
Bukan:
class user
class product
Ini sebenarnya convention, bukan aturan mutlak dari TypeScript.
Tujuannya supaya kita langsung bisa membedakan:
User → kemungkinan besar class
user → kemungkinan besar variable/object
3. Class Bisa Memiliki Property
Di dalam class kita bisa mendefinisikan property.
Contohnya:
class User {
name: string;
age: number;
gender: string;
}
Sekarang class User memiliki tiga property:
name
age
gender
Dengan tipe:
name → string
age → number
gender → string
Kalau digambarkan:
User Class
│
├── name: string
├── age: number
└── gender: string
4. Kenapa Muncul Error?
Di lecture, ketika property ditulis:
class User {
name: string;
}
TypeScript bisa mengeluh mengenai property yang belum diinisialisasi, terutama jika konfigurasi strict property initialization aktif.
Kita bisa memberikan nilai awal:
class User {
name: string = "John";
}
Sekarang name mempunyai initial value:
name → "John"
Kemudian:
class User {
name: string = "John";
age: number = 28;
gender: string = "male";
}
5. Tetapi Ada Masalah dengan Initial Value
Misalnya kita membuat object:
const user1 = new User();
const user2 = new User();
const user3 = new User();
Ketiga object tersebut akan memiliki:
user1 → John, 28, male
user2 → John, 28, male
user3 → John, 28, male
Padahal biasanya kita ingin:
user1 → John, 28, male
user2 → Sarah, 25, female
user3 → David, 30, male
Jadi kita membutuhkan mekanisme untuk memberikan nilai berbeda ketika object dibuat.
Di sinilah kita membutuhkan:
Constructor
6. Apa Itu Constructor?
Constructor adalah method khusus yang otomatis dijalankan ketika kita membuat object menggunakan new.
Misalnya:
const user1 = new User();
Ketika JavaScript/TypeScript melihat:
new User()
maka constructor milik User akan dijalankan.
Gampangnya:
new User()
↓
panggil constructor
↓
buat object
↓
inisialisasi property
↓
object siap digunakan
7. Constructor Default
Kalau kita tidak membuat constructor sendiri:
class User {
name: string;
age: number;
}
JavaScript/TypeScript menyediakan constructor default secara konsep.
Kira-kira:
constructor() {
}
Constructor tersebut tidak menerima parameter.
Karena itu kita bisa:
const user1 = new User();
Tetapi kita belum bisa memberikan data seperti:
const user1 = new User("John", 28, "male");
karena constructor kita belum memiliki parameter.
8. Membuat Constructor Sendiri
Sekarang kita bisa membuat constructor:
class User {
name: string;
age: number;
gender: string;
constructor(
name: string,
age: number,
gender: string
) {
}
}
Sekarang constructor membutuhkan tiga parameter:
name → string
age → number
gender → string
Maka ketika membuat object:
const user1 = new User("John", 28, "male");
kita harus memberikan tiga nilai tersebut.
9. Apa yang Terjadi Saat new User(...)?
Perhatikan:
const user1 = new User("John", 28, "male");
Kita bisa membayangkan prosesnya seperti:
new User("John", 28, "male")
│ │ │
↓ ↓ ↓
name age gender
│ │ │
↓ ↓ ↓
"John" 28 "male"
Kemudian constructor menggunakan nilai tersebut untuk mengisi property object.
10. this Itu Apa?
Ini bagian yang sangat penting.
Di dalam constructor kita menulis:
constructor(
name: string,
age: number,
gender: string
) {
this.name = name;
this.age = age;
this.gender = gender;
}
Perhatikan ada:
this.name
dan:
name
Keduanya berbeda.
name
Ini adalah parameter constructor:
constructor(name: string)
this.name
Ini adalah property milik object yang sedang dibuat.
Jadi:
this.name = name;
artinya:
Ambil nilai dari parameter
name, lalu simpan ke propertynamemilik object ini.
11. Analogi this
Misalnya:
const user1 = new User("John", 28, "male");
Saat constructor berjalan:
this
mengacu kepada object user1.
Jadi:
this.name = name;
secara konsep menjadi:
user1.name = "John"
Kemudian:
this.age = age;
menjadi:
user1.age = 28
Dan:
this.gender = gender;
menjadi:
user1.gender = "male"
12. Full Class-nya
Jadi kode lengkapnya:
class User {
name: string;
age: number;
gender: string;
constructor(
name: string,
age: number,
gender: string
) {
this.name = name;
this.age = age;
this.gender = gender;
}
}
Sekarang class tersebut sudah bisa digunakan sebagai blueprint.
13. Membuat Object dengan new
Untuk membuat object:
const user1 = new User("John", 28, "male");
Kemudian:
const user2 = new User("Sarah", 25, "female");
Dan:
const user3 = new User("David", 30, "male");
Sekarang kita memiliki:
User Class
│
├── user1
│ ├── name = John
│ ├── age = 28
│ └── gender = male
│
├── user2
│ ├── name = Sarah
│ ├── age = 25
│ └── gender = female
│
└── user3
├── name = David
├── age = 30
└── gender = male
14. new Itu Apa?
Keyword:
new
digunakan untuk membuat instance/object baru dari sebuah class.
Contoh:
const user1 = new User("John", 28, "male");
Bagian:
new User(...)
menghasilkan object baru.
Kemudian object tersebut disimpan ke:
user1
Jadi:
User
↓
class
new User(...)
↓
object baru
user1
↓
reference ke object tersebut
15. Kenapa Disebut Instance?
Karena user1 dibuat dari class User.
Kita bisa mengatakan:
user1adalah instance dariUser.
Begitu juga:
const user2 = new User("Sarah", 25, "female");
user2 juga merupakan instance dari User.
Dan:
const user3 = new User("David", 30, "male");
user3 juga instance dari User.
16. Class vs Instance
Ini harus benar-benar jelas:
class User {
...
}
→ Class
Sedangkan:
const user1 = new User(...);
→ Instance/Object
Hubungannya:
User
CLASS
│
┌──────┼──────┐
↓ ↓ ↓
user1 user2 user3
instance instance instance
17. Kenapa Constructor Sangat Berguna?
Bayangkan kita tidak menggunakan constructor.
Kita mungkin harus melakukan:
const user1 = new User();
user1.name = "John";
user1.age = 28;
user1.gender = "male";
Kemudian:
const user2 = new User();
user2.name = "Sarah";
user2.age = 25;
user2.gender = "female";
Ini bisa menjadi merepotkan.
Dengan constructor cukup:
const user1 = new User("John", 28, "male");
const user2 = new User("Sarah", 25, "female");
Jauh lebih ringkas.
18. Constructor = Inisialisasi Object
Jadi fungsi utama constructor yang perlu kamu ingat:
Constructor digunakan untuk menginisialisasi object ketika object tersebut dibuat.
Contoh:
constructor(name: string, age: number) {
this.name = name;
this.age = age;
}
Ketika:
new User("John", 28);
constructor langsung mengisi:
name → John
age → 28
19. Property Class vs Parameter Constructor
Ini sering membingungkan pemula.
Perhatikan:
class User {
name: string;
constructor(name: string) {
this.name = name;
}
}
Ada dua name.
name: string
adalah property.
Sedangkan:
constructor(name: string)
adalah parameter.
Dan:
this.name = name;
menghubungkan keduanya.
Parameter
↓
name
│
│ assignment
↓
this.name
↓
Property object
20. TypeScript vs JavaScript
Sekarang masuk ke bagian yang menarik.
TypeScript adalah bahasa yang kemudian ditranspilasi/compile menjadi JavaScript.
Misalnya kita memiliki TypeScript:
class User {
name: string;
age: number;
gender: string;
constructor(name: string, age: number, gender: string) {
this.name = name;
this.age = age;
this.gender = gender;
}
}
Ketika target JavaScript modern, hasilnya kurang lebih tetap berupa class, hanya informasi type-nya dihilangkan:
class User {
constructor(name, age, gender) {
this.name = name;
this.age = age;
this.gender = gender;
}
}
Perhatikan:
name: string
menjadi:
name
Karena JavaScript tidak menggunakan TypeScript type annotation.
21. Kenapa Ada Perbedaan Kalau Target-nya ES5?
Ini bagian terakhir dari lecture.
Misalnya di tsconfig.json kita menentukan:
{
"compilerOptions": {
"target": "es2015"
}
}
TypeScript boleh menghasilkan JavaScript modern yang mendukung class.
Tetapi kalau:
{
"compilerOptions": {
"target": "es5"
}
}
TypeScript harus menghasilkan JavaScript yang kompatibel dengan ES5.
Masalahnya:
ES5 belum memiliki syntax
class.
Jadi TypeScript harus mengubah class menjadi bentuk JavaScript yang lebih lama.
22. Class Bisa Diubah Menjadi Constructor Function
Pada JavaScript sebelum ES6, cara umum membuat blueprint object adalah menggunakan constructor function.
Misalnya:
function User(name, age, gender) {
this.name = name;
this.age = age;
this.gender = gender;
}
Kemudian object dibuat:
var user1 = new User("John", 28, "male");
Perhatikan ada sesuatu yang familiar:
new User(...)
Syntax new tetap digunakan.
23. Sejarah Singkatnya
Sebelum ES6:
JavaScript lama
↓
Constructor Function
↓
new User()
Setelah ES6:
JavaScript modern
↓
class User
↓
new User()
Jadi ES6 memperkenalkan syntax class yang jauh lebih nyaman untuk menulis OOP.
Namun secara konsep, JavaScript tetap menggunakan prototype-based object model.
24. Apa Maksud “Class adalah Syntactic Sugar”?
Di lecture dikatakan:
JavaScript class is syntactic sugar for constructor functions.
Syntactic sugar artinya kurang lebih:
Syntax yang dibuat agar sesuatu lebih mudah dan nyaman ditulis, sementara konsep dasarnya sudah bisa dilakukan dengan mekanisme yang lebih lama.
Misalnya dulu kita menggunakan:
function User(name) {
this.name = name;
}
Kemudian ES6 menyediakan:
class User {
constructor(name) {
this.name = name;
}
}
Syntax class jauh lebih mudah dibaca sebagai struktur OOP.
Tetapi JavaScript tidak tiba-tiba berubah menjadi bahasa yang class-based seperti Java/C# secara internal. Prototype tetap menjadi bagian penting dari mekanisme object JavaScript.
25. Kenapa let / const Berubah Menjadi var?
Di TypeScript kita mungkin menulis:
const user1 = new User(...);
Jika target JavaScript-nya ES5, compiler dapat mengubahnya menjadi:
var user1 = new User(...);
Kenapa?
Karena:
const
let
merupakan fitur JavaScript yang lebih modern daripada ES5.
ES5 menggunakan:
var
Jadi compiler menyesuaikan output dengan target yang kita tentukan.
26. Jadi Apa Fungsi target?
Di tsconfig.json ada konfigurasi seperti:
{
"compilerOptions": {
"target": "es5"
}
}
target menentukan:
Versi JavaScript seperti apa yang ingin dihasilkan oleh TypeScript compiler.
Contoh:
TypeScript
↓
Compiler
↓
target ES2015
↓
JavaScript modern
atau:
TypeScript
↓
Compiler
↓
target ES5
↓
JavaScript yang lebih kompatibel dengan environment lama
27. Kenapa Ini Penting?
Karena browser/environment berbeda bisa mendukung fitur JavaScript yang berbeda.
Misalnya kita menulis fitur modern:
class User {
}
Kalau target-nya ES5, TypeScript akan melakukan transformasi agar hasil JavaScript lebih kompatibel dengan ES5.
Jadi TypeScript bukan hanya:
“JavaScript + type.”
Tetapi compiler TypeScript juga bisa melakukan transformasi syntax modern menjadi syntax JavaScript yang lebih lama, tergantung konfigurasi target.
28. Hubungan Semua Konsep
Sekarang kita gabungkan semuanya:
CLASS
↓
User
↓
memiliki property
↓
name, age, gender
↓
memiliki constructor
↓
constructor menerima data
↓
new User(...)
↓
membuat object
↓
object tersebut = instance
Contoh lengkap:
class User {
name: string;
age: number;
gender: string;
constructor(name: string, age: number, gender: string) {
this.name = name;
this.age = age;
this.gender = gender;
}
}
const user1 = new User("John", 28, "male");
const user2 = new User("Sarah", 25, "female");
Diagramnya:
User
CLASS
│
┌──────────┴──────────┐
│ │
constructor properties
│ name / age / gender
│
↓
new User(...)
│
┌────┴────┐
↓ ↓
user1 user2
instance instance
29. Kesalahan yang Sering Dilakukan Pemula
❌ 1. Menganggap class adalah object
class User {}
User bukan object biasa.
Itu adalah class.
❌ 2. Lupa new
Untuk membuat instance:
const user = new User(...);
Bukan:
const user = User(...);
❌ 3. Bingung dengan this
constructor(name: string) {
this.name = name;
}
Ingat:
name
↓
parameter
this.name
↓
property milik object
❌ 4. Mengira constructor dipanggil manual
Biasanya kita tidak melakukan:
user.constructor(...)
Constructor dipanggil ketika kita menggunakan:
new User(...)
30. Ringkasan Super Sederhana
Kalau semua penjelasan tadi diringkas:
Class
Blueprint/cetakan.
class User {
}
Property
Data yang dimiliki object.
name: string;
age: number;
Constructor
Method khusus untuk menyiapkan object ketika dibuat.
constructor(name: string, age: number) {
this.name = name;
this.age = age;
}
new
Membuat object baru dari class.
const user = new User("John", 28);
Instance
Object yang dibuat dari class.
User → class
user → instance
this
Mengacu pada object yang sedang dibuat/digunakan.
this.name
berarti property name milik object tersebut.
target
Menentukan versi JavaScript yang akan dihasilkan oleh TypeScript compiler.
🧠 Cara Mengingat dengan Analogi Pabrik
Bayangkan class adalah cetakan KTP:
CLASS User
┌─────────────────┐
│ name │
│ age │
│ gender │
└─────────────────┘
Constructor adalah petugas yang mengisi data ketika KTP dibuat:
constructor(
name,
age,
gender
)
Kemudian:
new User("John", 28, "male");
menghasilkan:
USER 1
┌─────────────────┐
│ John │
│ 28 │
│ male │
└─────────────────┘
Dan:
new User("Sarah", 25, "female");
menghasilkan:
USER 2
┌─────────────────┐
│ Sarah │
│ 25 │
│ female │
└─────────────────┘
Keduanya dibuat dari cetakan yang sama, tetapi datanya berbeda.
Itulah inti class + constructor + instance dalam TypeScript.
Dan satu hal terakhir yang sangat penting: TypeScript class tidak berdiri sendiri saat program dijalankan. TypeScript akan meng-compile kode tersebut menjadi JavaScript. Kalau target-nya JavaScript modern, class bisa tetap menjadi class; kalau target-nya ES5, compiler dapat mengubahnya menjadi bentuk yang lebih lama seperti constructor function.