Panduan Tutorial TypeScript: Panduan Awal untuk JavaScript Superdempel

Hai sana, bakal bintang coding! ? Selamat datang ke panduan TypeScript kami. Saya sangat senang menjadi panduanmu dalam perjalanan menarik ke dunia TypeScript. Sebagai orang yang telah mengajar pemrograman selama tahun tahun, saya tidak sabar untuk membagikan pengetahuan dan membantumu membuka kekuatan bahasa ini yang menakjubkan.

Apa Itu TypeScript?

mari mulai dari dasar. TypeScript adalah seperti sepupu yang lebih keren dan berkelas JavaScript. Itu adalah bahasa pemrograman yang dibangun di atas JavaScript, menambahkan fitur baru dan membantu menangkap kesalahan sebelum mereka menjadi masalah. Bayangkan JavaScript memakai jas mewah dan monokel - itu TypeScript!

Contoh Sederhana

Mari langsung ke contoh sederhana:

function greet(name: string) {
console.log(`Hello, ${name}!`);
}

greet("Alice"); // Output: Hello, Alice!
greet(123); // Kesalahan: Argumen jenis 'number' tidak dapat di tetapkan ke parameter jenis 'string'.

Dalam contoh ini, kita telah menentukan fungsi greet yang menerima parameter name. Bagian : string mengatakan kepada TypeScript bahwa name harus jenis string. Ketika kita mencoba memanggil greet dengan angka, TypeScript menangkap kesalahan sebelum kita menjalankan kode!

Mengapa Belajar TypeScript?

Mungkin Anda berpikir, " Mengapa harus belajar TypeScript saat JavaScript sudah ada?" Pertanyaan bagus! Berikut adalah beberapa alasan yang menggoda:

1. Tangkap kesalahan awal: TypeScript membantu Anda menemukan dan memperbaiki kesalahan sebelum kode Anda bahkan dijalankan.
2. Perkakas yang lebih baik: Dapatkan saran kode yang cerdas dan penyelesaian otomatis di editor Anda.
3. Kode yang lebih jelas: TypeScript membuat kode Anda lebih mudah untuk dibaca dan dipahami.
4. Skalabilitas: Itu bagus untuk proyek besar dan tim.

Siapa yang Harus Belajar TypeScript?

TypeScript cocok untuk semua orang! Apakah Anda:

• Seorang pemula sepenuhnya dalam pemrograman
• Seorang pengembang JavaScript yang ingin naik tingkat
• Bagian dari tim yang bekerja pada aplikasi skala besar

TypeScript memiliki sesuatu untuk Anda. Itu seperti belajar menunggang sepeda dengan roda pelindung - itu memberikan Anda dukungan ekstra saat Anda belajar, tetapi Anda masih dapat melakukan semua trik menarik!

Prasyarat untuk Belajar TypeScript

Sebelum kita mendalam, ini adalah apa yang Anda perlu tahu:

• Pengetahuan dasar tentang konsep pemrograman (variabel, fungsi, dll.)
• Kesempatan untuk JavaScript (tetapi jangan khawatir jika Anda kurang mahir!)

Tidak punya ini? Tidak masalah! Kita akan membahas dasar saat kita maju.

Memulai dengan TypeScript

Instalasi

Pertama-tama, mari mengatur TypeScript di komputer Anda. Buka terminal dan jalankan:

npm install -g typescript

Ini menginstal TypeScript secara global di mesin Anda. Sekarang Anda siap untuk mulai mengoding!

Program TypeScript Pertama Anda

Mari tulis program sederhana untuk menghitung luas lingkaran:

function calculateCircleArea(radius: number): number {
const pi: number = 3.14159;
return pi * radius * radius;
}

const area: number = calculateCircleArea(5);
console.log(`Luas lingkaran adalah ${area.toFixed(2)} satuan luas.`);

mariuraikan ini:

1. Kita mendefinisikan fungsi calculateCircleArea yang menerima parameter radius jenis number.
2. Bagian : number setelah deklarasi fungsi menentukan bahwa fungsi akan mengembalikan nilai jenis number.
3. Kita menghitung luas menggunakan rumus πr².
4. Kita memanggil fungsi dengan radius 5 dan menyimpan hasilnya di area.
5. Akhirnya, kita mencetak hasilnya, menggunakan toFixed(2) untuk membulatkan ke dua desimal.

Untuk menjalankan program ini, simpan sebagai circle.ts, kemudian kompilasi dan jalankan:

tsc circle.ts
node circle.js

Anda seharusnya melihat output: "Luas lingkaran adalah 78.54 satuan luas."

Tipe TypeScript

Salah satu kekuatan besar TypeScript adalah sistem tipe-nya. Mari jelajahi beberapa jenis umum:

Tipe	Deskripsi	Contoh
number	Nilai numerik	let age: number = 30;
string	Nilai teks	let name: string = "Alice";
boolean	Nilai benar/salah	let isStudent: boolean = true;
array	Daftar nilai	let fruits: string[] = ["apple", "banana"];
object	Pasangan kunci-nilai	let person: { name: string, age: number } = { name: "Bob", age: 25 };
any	Jenis apa saja (gunakan hati-hati!)	let data: any = 42;

Berikut adalah contoh yang lebih kompleks menggunakan jenis-jenis yang berbeda:

interface Student {
name: string;
age: number;
grades: number[];
isActive: boolean;
}

function printStudentInfo(student: Student): void {
console.log(`Name: ${student.name}`);
console.log(`Age: ${student.age}`);
console.log(`Average Grade: ${calculateAverage(student.grades)}`);
console.log(`Active: ${student.isActive ? "Yes" : "No"}`);
}

function calculateAverage(grades: number[]): number {
const sum = grades.reduce((acc, grade) => acc + grade, 0);
return sum / grades.length;
}

const alice: Student = {
name: "Alice",
age: 20,
grades: [85, 90, 92],
isActive: true
};

printStudentInfo(alice);

Contoh ini menunjukkan:

1. Menggunakan interface untuk mendefinisikan jenis kompleks (Student).
2. Bekerja dengan array dan objek.
3. Menggunakan anotasi jenis di parameter dan jenis kembalian fungsi.
4. Operator kondisional (ternary) untuk logika if/else yang ringkas.

Kompilasi dan Eksekusi Program TypeScript

Untuk menjalankan program TypeScript, Anda harus mengkompilasi mereka ke JavaScript terlebih dahulu. Ini adalah prosesnya:

1. Tulis kode TypeScript Anda (misalnya, app.ts)
2. Kompilasi: tsc app.ts
3. Jalankan JavaScript yang dihasilkan: node app.js

Pro tip: Gunakan tsc --watch app.ts untuk secara otomatis rekompilasi saat Anda menyimpan perubahan!

TypeScript di Dunia Nyata

TypeScript tidak hanya untuk belajar - itu digunakan di banyak pustaka dan kerangka kerja populer:

• Angular (kerangka kerja aplikasi web Google)
• React (dengan dukungan TypeScript)
• Node.js (untuk JavaScript di sisi server)
• Vue.js (dengan dukungan TypeScript)

Belajar TypeScript membuka pintu untuk bekerja dengan alat-alat ini yang kuat!

Kesimpulan

Selamat! Anda telah mengambil langkah pertama ke dunia TypeScript. Kita telah menutupi dasar-dasar, tetapi masih banyak hal lain untuk jelajahi. Ingat, belajar pemrograman seperti belajar bahasa baru - latihan, kesabaran, dan keanjalan adalah kunci utama.

Sebagai Anda terus melanjutkan perjalanan TypeScript Anda, jangan takut membuat kesalahan. Setiap kesalahan adalah kesempatan belajar. Terus coding, terus eksperimen, dan terutama, bersenang-senang!

Selamat coding, dan may your TypeScript adventures be bug-free and filled with joy! ?✨

Credits: Image by storyset