Semakan jenis statik dalam JavaScript menggunakan TypeScript

JavaScript ialah bahasa pengaturcaraan popular yang terkenal dengan fleksibiliti dan sifat dinamiknya. Walau bagaimanapun, fleksibiliti ini kadangkala boleh membawa kepada pepijat dan pepijat yang tidak dijangka dalam aplikasi besar. Untuk menyelesaikan masalah ini, TypeScript diperkenalkan sebagai superset JavaScript untuk menyediakan keupayaan semakan jenis statik. Dalam artikel ini, kami akan meneroka asas semakan jenis statik dalam JavaScript menggunakan TypeScript, bersama-sama dengan contoh kod dan arahan untuk membantu anda bermula.

Apakah pemeriksaan jenis statik?

Semakan jenis statik ialah proses mengaitkan jenis dengan pembolehubah, parameter fungsi dan nilai pulangan fungsi pada masa penyusunan dan bukannya pada masa jalankan. Ini membolehkan pengkompil mengesan ralat jenis sebelum melaksanakan kod, dengan itu mengurangkan kemungkinan ralat masa jalan dan meningkatkan kualiti kod.

TypeScript: Membawa penaipan statik ke JavaScript

TypeScript memanjangkan sintaks JavaScript untuk menyokong penaipan statik. Ia memperkenalkan sintaks dan binaan baharu yang membolehkan pembangun mentakrifkan jenis secara eksplisit. Dengan menggunakan TypeScript, anda boleh menangkap ralat jenis semasa pembangunan, mendapat manfaat daripada sokongan editor kod yang lebih baik dan meningkatkan kebolehselenggaraan kod keseluruhan.

Pasang TypeScript

Untuk mula menggunakan TypeScript, anda perlu memasang Node.js dan npm (pengurus pakej nod) pada sistem anda.

Anda boleh memasang TypeScript secara global menggunakan arahan berikut -

npm install -g typescript

Selepas memasang TypeScript, anda boleh menggunakan perintah tsc untuk menyusun kod TypeScript ke dalam JavaScript.

Isytihar pembolehubah menggunakan jenis

Dalam TypeScript, anda boleh mengisytiharkan jenis pembolehubah secara eksplisit menggunakan sintaks :type.

Contoh

Mari kita pertimbangkan contoh di mana kita ingin mengisytiharkan mesej pembolehubah jenis rentetan -

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

Arahan

Dalam coretan kod ini, kami mengisytiharkan mesej pembolehubah sebagai rentetan menggunakan sintaks :string. Pengkompil akan menguatkuasakan bahawa hanya nilai rentetan boleh diberikan kepada pembolehubah.

Output

Keluaran kod ini ialah -

Hello, TypeScript!

Pengisytiharan fungsi dengan jenis

TypeScript membolehkan anda menentukan jenis parameter fungsi dan nilai pulangan.

Contoh

Mari kita lihat contoh fungsi mudah yang menambah dua nombor -

function addNumbers(num1: number, num2: number): number {
   return num1 + num2;
}

let result: number = addNumbers(10, 5);
console.log(result);

Arahan

Dalam kod ini, fungsi addNumbers menerima dua parameter jenis angka dan mengembalikan nilai jenis angka. Pembolehubah num1, num2, dan hasil ditaip secara eksplisit sebagai nombor.

Output

Keluaran kod ini ialah -

15

Taip inferens

TypeScript mempunyai mekanisme inferens jenis yang berkuasa yang boleh membuat kesimpulan secara automatik jenis pembolehubah berdasarkan tugasannya.

Contoh

let age = 25;
console.log(typeof age);

let name = "John";
console.log(typeof name);

Dalam kod ini, kami tidak mengisytiharkan secara eksplisit jenis umur dan nama. Walau bagaimanapun, TypeScript menyimpulkan jenisnya berdasarkan nilai yang diberikan.

Antaramuka dan anotasi jenis

TypeScript menyediakan antara muka untuk menentukan jenis tersuai. Antara muka mentakrifkan struktur objek, termasuk nama dan jenis sifatnya. Mari kita pertimbangkan contoh mentakrifkan antara muka untuk objek pengguna.

Contoh

interface User {
   id: number;
   name: string;
   email: string;
}

let user: User = {
   id: 1,
   name: "John Doe",
   email: "john@example.com",
};

console.log(user);

Arahan

Dalam kod ini, kami mentakrifkan antara muka yang dipanggil Pengguna, yang mempunyai tiga sifat: id, nama dan e-mel. Kemudian kami mengisytiharkan pengguna berubah jenis Pengguna dan menetapkan objek yang mengikut struktur antara muka.

Output

Keluaran kod ini ialah -

{ id: 1, name: 'John Doe', email: 'john@example.com' }

Jenis kesatuan

Pertimbangkan kod yang ditunjukkan di bawah.

function displayResult(result: string | number): void {
  console.log("Result:", result);
}

displayResult("Success"); 
displayResult(200); 

Arahan

Dalam contoh ini, hujah yang diambil oleh fungsi displayResult boleh menjadi rentetan atau nombor. Ini dicapai dengan menggunakan jenis kesatuan (String | Number) dalam tandatangan fungsi.

Masukkan alias

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

function calculateDistance(point1: Point, point2: Point): number {
   const dx = point2.x - point1.x;
   const dy = point2.y - point1.y;
   return Math.sqrt(dx * dx + dy * dy);
}  

const p1: Point = { x: 0, y: 0 };
const p2: Point = { x: 3, y: 4 };

console.log(calculateDistance(p1, p2));

Arahan

Dalam contoh ini, kami mentakrifkan jenis alias Point untuk objek dengan sifat x dan y. Fungsi hitungJarak mengambil dua objek Titik sebagai parameter dan menggunakan teorem Pythagoras untuk mengira jarak antara mereka.

Output

5

Kesimpulan

Menggunakan TypeScript untuk semakan jenis statik membawa banyak faedah kepada pembangunan JavaScript, termasuk menangkap ralat jenis lebih awal, sokongan editor kod yang dipertingkatkan dan kebolehselenggaraan kod yang dipertingkatkan. Dengan mengguna pakai TypeScript, pembangun boleh menulis kod yang lebih selamat, lebih dipercayai sambil masih menikmati fleksibiliti dan sifat dinamik JavaScript.

Dalam artikel ini, kami meneroka asas semakan jenis statik dalam JavaScript menggunakan TypeScript, termasuk pengisytiharan pembolehubah, pengisytiharan fungsi, inferens jenis, antara muka, jenis kesatuan dan alias jenis. Berbekalkan pengetahuan ini, anda kini boleh mula membina aplikasi JavaScript yang mantap dan berskala menggunakan TypeScript.

Atas ialah kandungan terperinci Semakan jenis statik dalam JavaScript menggunakan TypeScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!