Pengenalan kepada TypeScript untuk Pembangun JavaScript

TypeScript ialah superset JavaScript yang menambahkan sistem jenis statik pilihan pada JavaScript. Jika anda seorang pembangun JavaScript, anda mungkin telah mendengar banyak tentang TypeScript baru-baru ini. Tetapi apa sebenarnya? Mengapa anda perlu mengambil berat tentangnya? Dan bagaimana untuk mula menggunakannya dengan berkesan dalam projek anda?

Artikel ini akan menerangkan TypeScript secara ringkas, membantu anda memahami perkara yang menjadikannya begitu hebat dan sebab ia mungkin alat yang ideal untuk projek JavaScript anda yang seterusnya.

Apakah TypeScript?

Pada asasnya, TypeScript ialah JavaScript dengan jenis. TypeScript mempertingkatkan JavaScript dengan menambahkan lapisan menaip statik, yang membantu menangkap kemungkinan ralat semasa pembangunan, walaupun sebelum kod dijalankan.

Tetapi jangan risau – TypeScript masih JavaScript! Semua kod JavaScript yang sah adalah juga kod TypeScript yang sah. TypeScript hanya memberi anda alat tambahan untuk meningkatkan aliran kerja pembangunan anda, menjadikan kod anda lebih mantap dan mengelakkan pepijat.

Mengapa memilih TypeScript?

Anda mungkin bertanya: "Jika TypeScript hanyalah JavaScript dengan jenis, mengapa tidak menggunakan JavaScript jawapannya terletak pada keselamatan dan pengalaman pembangun.

1. Taip statik mengurangkan ralat

   TypeScript membantu menangkap ralat lebih awal dengan memaksa jenis. Dalam JavaScript, anda sering menghadapi pepijat disebabkan oleh jenis data yang tidak dijangka (contohnya, cuba memanggil kaedah rentetan pada nombor). TypeScript menangkap jenis ralat ini sebelum anda menjalankan kod tersebut.

2. Alat yang lebih baik dan autolengkap

   TypeScript menyediakan autolengkap yang lebih baik, semakan jenis yang lebih tepat dan pemfaktoran semula yang lebih mudah. IDE anda boleh memberi anda cadangan yang lebih bijak dan mesej ralat untuk mempercepatkan pembangunan.

3. Kod kebolehselenggaraan untuk projek besar

   Apabila projek JavaScript berkembang, ia menjadi semakin sukar untuk mengurus pangkalan kod yang besar menggunakan penaipan dinamik. TypeScript membantu anda menyusun kod anda dengan lebih baik, menjadikannya lebih mudah untuk dikekalkan dalam jangka panjang.

4. Pembangun JavaScript mudah dipelajari

   TypeScript direka bentuk supaya mudah dipelajari oleh pembangun JavaScript. Anda tidak perlu mempelajari bahasa baharu - cuma tambah jenis jika perlu. Anda boleh menggunakan TypeScript secara berperingkat dalam pangkalan kod JavaScript sedia ada anda.

---

Konsep TypeScript Utama untuk pembangun JavaScript

Jika anda biasa dengan JavaScript, TypeScript akan berasa sangat biasa, tetapi terdapat beberapa perbezaan utama. Mari kita selami beberapa konsep TypeScript asas:

1. Jenis: Teras TypeScript

Salah satu perbezaan terbesar antara JavaScript dan TypeScript ialah sistem jenis. Dalam JavaScript, jenis adalah dinamik, bermakna pembolehubah boleh menukar jenis pada masa jalan:

<code class="language-javascript">let message = "Hello, world!";
message = 42;  // 没有错误，即使类型已更改</code>

Dalam TypeScript anda boleh mentakrifkan secara eksplisit jenis pembolehubah dan pengkompil akan memastikan bahawa nilai yang diberikan kepadanya sepadan dengan jenis tersebut:

<code class="language-typescript">let message: string = "Hello, world!";
message = 42;  // 错误：类型“number”无法分配给类型“string”</code>

Beberapa jenis biasa dalam TypeScript termasuk:

• string – untuk rentetan teks.
• number – untuk nombor (integer dan nombor titik terapung).
• boolean – untuk nilai benar atau salah.
• object – untuk jenis data yang kompleks seperti tatasusunan dan objek.
• any – digunakan untuk sebarang jenis, menyahdayakan pemeriksaan jenis dengan berkesan (gunakan dengan berhati-hati).

2. Antara muka: menerangkan bentuk objek

TypeScript menggunakan antara muka untuk menerangkan bentuk objek. Ini membolehkan anda menentukan struktur yang mesti dipatuhi oleh objek, termasuk sifatnya dan jenisnya.

<code class="language-typescript">interface Person {
  name: string;
  age: number;
}

const person: Person = {
  name: "Alice",
  age: 25
};</code>

Antara muka berguna apabila anda ingin memastikan objek mengikut struktur tertentu, seperti memastikan semua objek pengguna mempunyai nama (rentetan) dan umur (nombor).

3. Fungsi ditaip

Dalam TypeScript, anda boleh menentukan jenis untuk parameter fungsi dan mengembalikan nilai, menjadikan kod anda lebih mudah diramal dan lebih mudah untuk nyahpepijat.

<code class="language-typescript">function greet(name: string): string {
  return `Hello, ${name}!`;
}

greet("Alice");  // 正确
greet(42);  // 错误：类型“number”的参数无法分配给类型“string”的参数</code>

Anda juga boleh menentukan jenis fungsi, termasuk parameter pilihan, nilai lalai dan parameter yang tinggal.

<code class="language-typescript">function sum(a: number, b: number = 0): number {
  return a + b;
}

console.log(sum(5)); // 5
console.log(sum(5, 3)); // 8</code>

4. Jenis kesatuan: mengendalikan berbilang jenis

Dalam JavaScript, pembolehubah boleh menyimpan berbilang jenis nilai berangka, tetapi TypeScript membenarkan anda menyatakan fleksibiliti ini dengan lebih jelas menggunakan Jenis kesatuan.

Sebagai contoh, anda boleh menentukan pembolehubah yang boleh memegang rentetan atau nombor:

<code class="language-typescript">let value: string | number;

value = "Hello";
value = 42;</code>

Jenis kesatuan berguna apabila anda mempunyai nilai yang boleh mengambil pelbagai bentuk, seperti fungsi yang boleh mengembalikan rentetan atau nol.

5. Kelas dan Warisan

TypeScript menyokong konsep Pengaturcaraan Berorientasikan Objek (OOP) seperti kelas dan warisan, sama seperti JavaScript (ES6), tetapi dengan keselamatan jenis tambahan.

<code class="language-typescript">class Animal {
  constructor(public name: string) {}

  speak(): void {
    console.log(`${this.name} makes a sound.`);
  }
}

class Dog extends Animal {
  speak(): void {
    console.log(`${this.name} barks.`);
  }
}

const dog = new Dog("Buddy");
dog.speak();  // 输出：Buddy barks.</code>

Dalam TypeScript, anda boleh menentukan jenis untuk sifat dan kaedah kelas untuk menjadikan kod anda lebih mudah diramal dan memastikan kejadian kelas mematuhi struktur yang diharapkan.

6. Generik: Menulis kod yang fleksibel dan boleh digunakan semula

Generik membolehkan anda mencipta fungsi, kelas dan antara muka yang berfungsi dengan mana-mana jenis tetapi masih mengekalkan keselamatan jenis. Daripada menulis fungsi berasingan untuk setiap jenis, anda boleh menulis satu fungsi yang berfungsi untuk berbilang jenis.

<code class="language-typescript">function identity<T>(arg: T): T {
  return arg;
}

console.log(identity("Hello"));  // 类型为string
console.log(identity(42));  // 类型为number</code>

Generik amat berguna untuk mencipta komponen atau fungsi yang boleh diguna semula, seperti perpustakaan atau utiliti yang perlu mengendalikan berbilang jenis.

---

Mulakan dengan TypeScript

Sekarang anda memahami konsep asas, bagaimanakah anda mula menggunakan TypeScript dalam projek JavaScript anda yang sedia ada?

1. Pasang TypeScript Anda boleh memasang TypeScript melalui npm:

<code class="language-bash">npm install -g typescript</code>

2. Buat fail konfigurasi TypeScript TypeScript menggunakan fail konfigurasi (tsconfig.json) untuk menentukan pilihan pengkompil dan struktur projek anda.

Anda boleh menjana fail ini dengan menjalankan arahan berikut:

<code class="language-javascript">let message = "Hello, world!";
message = 42;  // 没有错误，即使类型已更改</code>

3. Menulis fail .ts Kod TypeScript biasanya ditulis dalam fail dengan sambungan .ts. Pengkompil TypeScript (tsc) boleh menyusun fail .ts ke dalam fail JavaScript standard.

<code class="language-typescript">let message: string = "Hello, world!";
message = 42;  // 错误：类型“number”无法分配给类型“string”</code>

4. Kompil dan jalankan kod anda Selepas menulis kod TypeScript anda, anda boleh menyusunnya ke dalam JavaScript dengan menjalankan:

<code class="language-typescript">interface Person {
  name: string;
  age: number;
}

const person: Person = {
  name: "Alice",
  age: 25
};</code>

Ini akan menjana fail JavaScript yang boleh dijalankan dalam penyemak imbas atau Node.js.

---

Ringkasan

TypeScript ialah alat berkuasa yang menjadikan pembangunan JavaScript lebih cekap, selamat dan lebih berskala. Ia memperkenalkan jenis untuk sifat dinamik JavaScript, menyediakan analisis statik dan alatan yang lebih baik, yang membantu mengurangkan ralat dan meningkatkan pengalaman pembangun.

Jika anda sudah biasa dengan JavaScript, TypeScript mudah dipelajari dan anda boleh menggunakannya secara beransur-ansur dalam pangkalan kod sedia ada anda. Faedah tambahan keselamatan jenis, penyahpepijatan yang lebih baik dan kod yang lebih boleh diselenggara menjadikannya pelaburan yang berharga untuk projek kecil dan besar.

Selamat pengaturcaraan dengan TypeScript! ?

Atas ialah kandungan terperinci Pengenalan kepada TypeScript untuk Pembangun JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!