Terjemahan ke Bahasa Indonesia

TypeScript - Sintaks Dasar

Halo sana, para ahli TypeScript masa depan! ? Saya sangat senang menjadi panduan Anda dalam perjalanan menarik ini ke dunia TypeScript. Sebagai seseorang yang telah mengajar pemrograman selama tahun tahun, saya bisa katakan kepada Anda bahwa TypeScript seperti versi supercharge dari JavaScript, dan itu akan membuat hidup pemrograman Anda menjadi lebih mudah. Ayo masuk ke dalam!

Code TypeScript Pertama Anda

Baiklah, bayangkan Anda tentang untuk menulis baris pertama Anda dalam bahasa baru. Menarik, kan? Ayo mulai dengan program "Hello, World!" klasik dalam TypeScript.

console.log("Hello, World!");

Sekarang, Anda mungkin berpikir, "Tunggu sebentar, itu seperti JavaScript!" Dan Anda benar! TypeScript adalah superset dari JavaScript, yang artinya semua JavaScript yang valid juga valid dalam TypeScript. Tetapi jangan khawatir, kita akan segera mencapai bagian yang khusus untuk TypeScript.

Ayo coba sesuatu yang lebih khas TypeScript:

let message: string = "Hello, TypeScript!";
console.log(message);

Ini apa yang terjadi:

• Kita mendeklarasikan variabel message
• Bagian : string memberitahu TypeScript bahwa variabel ini hanya boleh menahan nilai string
• Kita memberikan string "Hello, TypeScript!" ke variabel ini
• Akhirnya, kita mencetaknya ke konsol

Ini hanya sedikit rasa dari sistem tipe TypeScript, yang adalah salah satu fitur yang paling kuatnya. Itu seperti memiliki asisten robot yang ramah yang menangkap kesalahan Anda sebelum Anda bahkan menjalankan kode Anda!

Mengkompilasi dan Mengeksekusi Program TypeScript

Sekarang kita telah menulis beberapa TypeScript, bagaimana kita menjalankan itu? Browser dan Node.js tidak mengerti TypeScript secara langsung, jadi kita perlu mengkompilasi menjadi JavaScript terlebih dahulu. Itu seperti menerjemahkan dari TypeScript ke bahasa yang sudah diketahui komputer.

Ini cara Anda melakukannya:

1. Simpan kode TypeScript Anda dalam file dengan ekstensi .ts, misalnya hello.ts
2. Buka terminal atau command prompt
3. Navigasi ke direktori yang mengandung file Anda
4. Jalankan compiler TypeScript:

tsc hello.ts

Ini akan menciptakan file baru bernama hello.js di dalam direktori yang sama. Itu adalah kode TypeScript Anda yang diterjemahkan ke JavaScript!

Untuk menjalankannya, Anda dapat menggunakan Node.js:

node hello.js

Dan voila! Anda seharusnya melihat pesan Anda dicetak di konsol.

Flag Compiler

Compiler TypeScript cukup cerdas, tetapi kadang-kadang Anda ingin memberikan petunjuk khusus. Itu di mana flag compiler masuk. Flag ini seperti perintah khusus yang Anda dapat berikan ke compiler untuk mengubah perilakunya.

Ini tabel dari beberapa flag compiler umum:

Flag	Deskripsi
--outDir	Menentukan folder output untuk semua file yang dikeluarkan
--target	Tentukan versi ECMAScript target
--watch	Monitor file input
--strict	Aktifkan semua opsi pemeriksaan tipe ketat

Misalnya, jika Anda ingin mengkompilasi TypeScript Anda ke versi JavaScript yang lebih tua karena alasan kompatibilitas, Anda dapat menggunakan:

tsc --target ES5 hello.ts

Ini memberitahu compiler untuk menghasilkan JavaScript yang kompatibel dengan ECMAScript 5, yang didukung oleh browser yang lebih tua.

Identifiers dalam TypeScript

Dalam pemrograman, kita menggunakan identifiers untuk memberi nama hal-hal seperti variabel, fungsi, dan kelas. Picturing mereka sebagai label untuk bagian-bagian berbeda dari kode Anda. Dalam TypeScript, ada beberapa aturan untuk nama-nama ini:

• Mereka dapat mengandung huruf, angka, garis bawah, dan tanda dollar
• Mereka harus dimulai dengan huruf, garis bawah, atau tanda dollar
• Mereka peka huruf besar kecil (jadi myVariable dan MyVariable berbeda)
• Mereka tidak dapat menjadi kata kunci yang direservasi ( kita akan membahas itu selanjutnya!)

Ini adalah beberapa identifier yang valid:

let firstName: string = "John";
let _count: number = 5;
let $price: number = 9.99;
let camelCaseIsCommon: boolean = true;

Dan beberapa yang tidak valid:

let 123abc: string = "Invalid"; // Tidak dapat dimulai dengan angka
let my-variable: number = 10; // Tidak dapat menggunakan tanda hubung
let class: string = "Reserved keyword"; // Tidak dapat menggunakan kata kunci yang direservasi

TypeScript ─ Kata Kunci

Kata kunci adalah kata-kata khusus yang memiliki arti khusus dalam TypeScript. Mereka seperti vocabulari dari bahasa itu. Anda tidak dapat menggunakan mereka sebagai identifiers karena TypeScript telah memberikan mereka tugas tertentu.

Ini adalah tabel dari beberapa kata kunci umum:

Kata Kunci	Deskripsi
let	Mendeklarasikan variabel dengan rentang blok
const	Mendeklarasikan konstanta dengan rentang blok
if	Memulai pernyataan if
for	Memulai perulangan for
function	Mendeklarasikan fungsi
class	Mendeklarasikan kelas
interface	Mendeklarasikan antarmuka
type	Mendeklarasikan alias tipe

Misalnya:

let x: number = 5;
const PI: number = 3.14159;

if (x > 0) {
console.log("x is positive");
}

for (let i = 0; i < 5; i++) {
console.log(i);
}

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

class Person {
name: string;
constructor(name: string) {
this.name = name;
}
}

interface Shape {
area(): number;
}

type Point = {
x: number;
y: number;
};

Setiap kata kunci ini memiliki tujuan khusus dalam mengstruktur dan mendefinisikan kode Anda.

Komentar dalam TypeScript

Komentar adalah seperti catatan kecil yang Anda tinggalkan untuk diri Anda sendiri (atau pengembang lain) dalam kode Anda. Mereka diabaikan oleh compiler, jadi Anda dapat menggunakannya untuk menjelaskan apa yang dilakukan kode Anda tanpa mengganggu bagaimana ia berjalan.

TypeScript mendukung tiga jenis komentar:

1. Komentar baris tunggal:

   // Ini adalah komentar baris tunggal
   let x: number = 5; // Anda juga dapat menempatkannya di akhir baris

2. Komentar multi-baris:

   /* Ini adalah komentar multi-baris
   Itu dapat menyebar ke beberapa baris
   Berguna untuk menjelaskan yang lebih panjang */
   let y: number = 10;

3. Komentar dokumentasi:

   
   /**

• Ini adalah komentar dokumentasi
• Itu sering digunakan untuk menghasilkan dokumentasi untuk fungsi atau kelas
• @param name Nama untuk disapa
• @returns Pesan salam */ function greet(name: string): string { return Hello, ${name}!; }

Ingat, komentar yang bagus menjelaskan mengapa Anda melakukan sesuatu, bukan hanya apa yang Anda lakukan. Kode itu sendiri seharusnya cukup jelas untuk menunjukkan apa yang sedang berlangsung.

TypeScript dan Orientasi Objek

Salah satu hal yang menarik tentang TypeScript adalah dukungannya untuk pemrograman berorientasi objek (OOP). Jika Anda baru dalam pemrograman, pikirkan OOP sebagai cara mengorganisir kode Anda di sekitar "objek" yang memiliki properti dan perilaku.

Ayo buat kelas Car sederhana untuk menunjukkan:

class Car {
// Properti
make: string;
model: string;
year: number;

// Konstruktor
constructor(make: string, model: string, year: number) {
this.make = make;
this.model = model;
this.year = year;
}

// Metode
describe(): string {
return `This is a ${this.year} ${this.make} ${this.model}.`;
}
}

// Membuat instance dari Car
let myCar = new Car("Toyota", "Corolla", 2022);

console.log(myCar.describe()); // Output: This is a 2022 Toyota Corolla.

Apa yang terjadi:

• Kita mendefinisikan kelas Car dengan properti make, model, dan year
• constructor adalah metode khusus yang dipanggil saat kita membuat instance Car
• describe adalah metode yang mengembalikan string yang menjelaskan mobil
• Kita membuat instance Car dan memanggil metode describe

Sistem tipe TypeScript benar-benar terlihat baik dalam OOP. Itu dapat menangkap kesalahan seperti mencoba mengassign string ke properti year, atau memanggil metode yang tidak ada.

Dan itu saja! Anda telah mengambil langkah pertama Anda ke dunia TypeScript. Ingat, belajar pemrograman adalah perjalanan, bukan tujuan. Jangan khawatir jika segala sesuatu tidak langsung beresonasi - terus latih, terus eksperimen, dan terutama, terus bersenang-senang! Sebelum Anda tahu, Anda akan menulis aplikasi TypeScript kompleks dan bertanya-tanya bagaimana Anda pernah hidup tanpa penyesuaian statik. Selamat coding! ?

Credits: Image by storyset