Panduan Tutorial TypeScript: Panduan Awal untuk JavaScript Superdiperkuat

Hai teman, superbintang coding masa depan! ? Selamat datang ke panduan TypeScript kami. Saya sangat senang menjadi panduanmu dalam perjalanan menarik ini ke dunia TypeScript. Sebagai seseorang yang telah mengajarkan pemrograman selama tahun-tahun, saya tidak sabar untuk membagi pengetahuan saya dan membantumu membuka kekuatan bahasa ini yang menakjubkan.

Apa Itu TypeScript?

mari mulai dari dasar. TypeScript seperti sepupu yang lebih keren dan lebih sophisticated 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 tipe 'number' tidak dapat diassign ke parameter tipe 'string'.

Dalam contoh ini, kita telah mendefinisikan fungsi greet yang menerima parameter name. Bagian : string memberitahu TypeScript bahwa name seharusnya adalah string. Ketika kita mencoba memanggil greet dengan nomor, TypeScript menangkap kesalahan sebelum kita menjalankan kode!

Mengapa Belajar TypeScript?

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

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 pengisian otomatis di editor Anda.
3. Kode yang lebih jelas: TypeScript membuat kode Anda mudah dibaca dan dipahami.
4. Skalabilitas: Itu sangat cocok 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 mencari tingkat berikutnya
• Bagian dari tim yang bekerja pada aplikasi skala besar

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

Prasyarat untuk Belajar TypeScript

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

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

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

Memulai dengan TypeScript

Instalasi

Pertama-tama, mari kita setting 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.`);

mari pisahkan ini:

1. Kita mendefinisikan fungsi calculateCircleArea yang menerima parameter radius tipe number.
2. Bagian : number setelah deklarasi fungsi menentukan bahwa fungsi akan mengembalikan number.
3. Kita menghitung luas menggunakan rumus πr².
4. Kita memanggil fungsi dengan radius 5 dan menyimpan hasilnya di area.
5. Akhirnya, kita mencetak hasil, 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 harus melihat output: "Luas lingkaran adalah 78.54 satuan luas."

Tipe TypeScript

Salah satu kekuatan besar TypeScript adalah sistem tipe nya. mari jelajahi beberapa tipe 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	Tipe apapun (gunakan hati-hati!)	let data: any = 42;

Berikut adalah contoh yang lebih kompleks menggunakan beberapa tipe:

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 tipe kompleks (Student).
2. Bekerja dengan array dan objek.
3. Menggunakan anotasi tipe dalam parameter dan jenis kembalian fungsi.
4. Operator ternary ( conditional) untuk logika if/else singkat.

Kompilasi dan Eksekusi Program TypeScript

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

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

Tips profesional: 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 ini yang kuat!

Kesimpulan

Selamat! Anda telah mengambil langkah pertama ke dunia TypeScript. Kita telah meliput dasar-dasar, tetapi masih banyak hal lain yang perlu dijelajahi. Ingat, belajar pemrograman seperti belajar bahasa baru - praktik, kesabaran, dan kebulatan hati adalah kunci utama.

Sebagai Anda terus melanjutkan perjalanan TypeScript Anda, jangan takut untuk membuat kesalahan. Setiap kesalahan adalah kesempatan belajar. Terus mengoding, terus mencoba, dan terutama, bersenang-senang! ?✨

Credits: Image by storyset