TypeScript - Sintaksis Asas

Hai sana, para ahli TypeScript masa depan! ? Saya begitu gembira untuk menjadi pandu anda dalam perjalanan menarik ini ke dunia TypeScript. Sebagai seseorang yang telah mengajar pemrograman selama bertahun-tahun, saya dapat katakan kepada anda bahwa TypeScript adalah seperti versi superdaging JavaScript, dan ia akan membuat hidup pemrograman anda menjadi lebih mudah. Mari kita masuk ke dalam!

Kod TypeScript Pertama Anda

Baiklah, bayangkan anda akan menulis baris pertama anda dalam bahasa baru. Menarik, kan? Mari kita mulai dengan program "Hello, World!" kelasik dalam TypeScript.

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

Sekarang, anda mungkin berfikir, "Tunggu sebentar, ini tampak seperti JavaScript!" Dan anda benar! TypeScript adalah superset JavaScript, yang berarti semua JavaScript yang sah juga TypeScript yang sah. Tetapi jangan bimbang, kita akan sampai ke bahagian menarik khusus TypeScript sebentar lagi.

Mari kita cuba sesuatu yang sedikit lebih khusus TypeScript:

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

Ini adalah apa yang terjadi:

• Kita mendeklarasikan variabel yang dipanggil message
• Bagian : string memberitahu TypeScript bahawa variabel ini hanya harus memegang nilai string
• Kita mengassign string "Hello, TypeScript!" kepada variabel ini
• Akhirnya, kita cetaknya ke konsol

Ini hanya sedikit rasa sistem jenis TypeScript, yang adalah salah satu ciri yang paling kuat. Itu seperti memiliki asisten robot yang ramah yang menangkap kesalahan anda sebelum anda menjalankan kod anda!

kompil dan Jalankan Program TypeScript

Sekarang, kita telah menulis beberapa TypeScript, bagaimana kita sebenarnya menjalankan ia? Browsers dan Node.js tidak memahami TypeScript secara langsung, jadi kita perlu mengkompilnya ke JavaScript dahulu. Itu seperti mentafsirkan dari TypeScript ke bahasa yang komputer telah tahu.

Ini adalah cara anda melakukannya:

1. Simpan kod TypeScript anda dalam fail dengan ekstensi .ts, katakan hello.ts
2. Buka terminal atau baris perintah
3. Navigasikan ke direktori yang mengandungi fail anda
4. Jalankan compiler TypeScript:

tsc hello.ts

Ini akan mencipta fail baru dipanggil hello.js di dalam direktori yang sama. Itu adalah kod TypeScript anda diterjemahkan ke JavaScript!

Untuk menjalankan ia, anda boleh menggunakan Node.js:

node hello.js

Dan voila! Anda sepatutnya melihat mesej anda dicetak di konsol.

Bendera Compiler

Compiler TypeScript cukup cerdik, tetapi kadang-kadang anda mahu memberikan arahan khusus. Itu di mana bendera compiler masuk. Mereka seperti perintah khusus yang anda boleh berikan kepada compiler untuk mengubah tingkah lakuannya.

Ini adalah jadual beberapa bendera compiler biasa:

Bendera	Keterangan
--outDir	Nyatakan folder output untuk semua fail yang diekspedisi
--target	Nyatakan versi target ECMAScript
--watch	Pantau fail input
--strict	Aktifkan semua pilihan pengecekan jenis ketat

Sebagai contoh, jika anda mahu mengkompil TypeScript anda ke versi JavaScript yang lebih tua untuk sebab keserasian, anda boleh menggunakan:

tsc --target ES5 hello.ts

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

Penunjuk dalam TypeScript

Dalam pemrograman, kita menggunakan penunjuk untuk menamakan hal-hal seperti variabel, fungsi, dan kelas. Ber fikir tentang mereka sebagai label untuk bahagian berbeza kod anda. Dalam TypeScript, ada beberapa peraturan untuk nama ini:

• Mereka boleh mengandungi huruf, nombor, garis bawah, dan tanda dollar
• Mereka mesti dimulakan dengan huruf, garis bawah, atau tanda dollar
• Mereka case-sensitive (jadi myVariable dan MyVariable adalah berbeza)
• Mereka tidak boleh menjadi kata kunci (kita akan berbicara tentang mereka berikutnya!)

Ini adalah beberapa penunjuk sah:

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

Dan beberapa yang tidak sah:

let 123abc: string = "Invalid"; // Tidak boleh dimulakan dengan nombor
let my-variable: number = 10; // Tidak boleh menggunakan tanda pengurangan
let class: string = "Reserved keyword"; // Tidak boleh menggunakan kata kunci

TypeScript ─ Kata Kunci

Kata kunci adalah kata-kata khusus yang mempunyai makna khusus dalam TypeScript. Mereka seperti vocabulari bahasa. Anda tidak boleh menggunakannya sebagai penunjuk kerana TypeScript telah memberikan mereka tugas untuk dilakukan.

Ini adalah jadual beberapa kata kunci biasa:

Kata Kunci	Keterangan
let	Mendeklarasikan variabel berskala blok
const	Mendeklarasikan konstanta berskala blok
if	Mula statement if
for	Mula loop for
function	Mendeklarasikan fungsi
class	Mendeklarasikan kelas
interface	Mendeklarasikan antara muka
type	Mendeklarasikan alias jenis

Sebagai contoh:

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 mempunyai tujuan khusus dalam menyusun dan menentukan kod anda.

Komen dalam TypeScript

Komen adalah seperti catatan kecil yang anda tinggalkan untuk diri anda sendiri (atau pengembang lain) dalam kod anda. Mereka diabaikan oleh compiler, jadi anda boleh mengguna mereka untuk menjelaskan apa yang kod anda lakukan tanpa mengganggu bagaimana ia dijalankan.

TypeScript menyokong tiga jenis komen:

1. Komen baris tunggal:

   // Ini adalah komen baris tunggal
   let x: number = 5; // Anda juga boleh meletakkan mereka di akhir baris

2. Komen multi-baris:

   /* Ini adalah komen multi-baris
   Ia boleh melintasi beberapa baris
   Berguna untuk penjelasan yang lebih panjang */
   let y: number = 10;

3. Komen dokumentasi:

   
   /**

• Ini adalah komen dokumentasi
• Ia 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, komen yang baik menjelaskan mengapa anda melakukan sesuatu, bukan hanya apa yang anda lakukan. Kod itu sendiri sepatutnya cukup jelas untuk menunjukkan apa yang sedang berlaku.

TypeScript dan Orientasi Objek

Salah satu hal yang menarik tentang TypeScript adalah sokongannya terhadap pemrograman berorientasi objek (OOP). Jika anda baru dalam pemrograman, berfikir tentang OOP sebagai cara mengatur kod anda di sekeliling "objek" yang mempunyai properti dan perilaku.

Mari kita 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 Car
let myCar = new Car("Toyota", "Corolla", 2022);

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

Mari kita pecahkan ini:

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

Sistem jenis TypeScript benar-benar berlimpah dalam OOP. Ia dapat menangkap kesalahan seperti mencoba menugaskan 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 destinasi. Jangan bimbang jika segala-galanya tidak berjalan secepat ini – terus latih, terus cuba, dan terutama, terus bersenang! Sebelum anda tahu, anda akan menulis aplikasi TypeScript kompleks dan bertanya-tanya bagaimana anda bisa hidup tanpa penentuan jenis statis. Selamat coding! ?

Credits: Image by storyset