Beralih daripada JavaScript kepada TypeScript: Pengalaman dan pemikiran saya

Semasa saya mula belajar JavaScript, saya kagum dengan kuasa dan fleksibilitinya. Saya boleh menulis skrip kecil, membina tapak web interaktif, dan akhirnya menangani aplikasi web yang lebih kompleks. Walau bagaimanapun, apabila projek saya berkembang dalam saiz dan kerumitan, pada masa ini saya mendengar lebih banyak tentang TypeScript dan cara ia boleh membantu meningkatkan kualiti dan kebolehselenggaraan kod - terutamanya apabila ia berkaitan dengan penyahpepijatan dan mengurus pangkalan kod yang besar.

Semasa persekutuan saya, kami ditugaskan untuk mempelajari bahasa baharu sendiri, memilih bahasa yang akan kami gunakan untuk membina projek batu permata kami - kemuncak semua yang telah kami pelajari. Saya memutuskan untuk menggunakan TypeScript, sering dipanggil superset JavaScript kerana bahasa itu merangkumi semua ciri JavaScript sambil menambah alat berkuasa seperti penaipan statik, antara muka dan sokongan pembangun yang dipertingkatkan. Penambahan ini, yang akan saya perincikan kemudian dalam blog ini, menjadikan kod lebih mudah untuk ditulis, nyahpepijat dan diselenggara - terutamanya dalam projek yang lebih besar atau lebih kompleks.

Beralih kepada TypeScript: Cara Cirinya Memudahkan Peralihan

1. Alat Lebih Pintar dan Cadangan Kod

TypeScript menggunakan "jenis" untuk memahami jenis data yang anda gunakan. Ini membolehkan:

Autolengkap yang Lebih Baik: IDE anda (cth., Kod VS, WebStorm) memahami kaedah dan sifat yang tersedia untuk pembolehubah, menjimatkan masa dan mengurangkan kesilapan.

Sebagai contoh, apabila bekerja dengan rentetan, editor akan mencadangkan kaedah khusus rentetan, seperti .toUpperCase(), .slice(), atau .substring(). Begitu juga, untuk tatasusunan, ia mungkin mencadangkan .map(), .filter(), atau .push().

Pengesanan Ralat Awal: TypeScript menyemak kod anda semasa anda menulisnya, yang dikenali sebagai semakan masa kompilasi. Jika anda cuba menggunakan rentetan di mana nombor dijangka, TypeScript akan memberi amaran kepada anda sebelum anda menjalankan program.

Navigasi Lebih Mudah: Mengetahui jenis bermakna editor anda boleh memaut terus ke tempat pembolehubah, fungsi atau objek ditakrifkan, membantu anda memahami dengan cepat cara kod anda padan bersama.

2. Tangkap Pepijat Awal

Dengan JavaScript, sesetengah pepijat mungkin hanya kelihatan apabila program berjalan, juga dikenali sebagai masa jalan, yang boleh memakan masa untuk nyahpepijat. TypeScript, sebaliknya:

Mencari Pepijat Semasa Pembangunan: TypeScript memberikan amaran apabila terdapat jenis yang tidak sepadan, seperti cuba menggunakan nombor di mana rentetan dijangka, membantu anda menangkap isu logik yang berpotensi sebelum masa jalan.

Menghalang Kesilapan Mudah: TypeScript menangkap isu seperti nama pembolehubah yang salah eja atau argumen fungsi yang salah sebelum ia menyebabkan masalah.
Ini menjimatkan masa dan membolehkan pepijat dibetulkan sebelum mencapai pengeluaran.

3. Penyelenggaraan Kod yang Lebih Mudah

TypeScript menjadikannya lebih mudah untuk membaca, memfaktorkan semula dan mengemas kini kod anda dengan menjadikan segala-galanya lebih mudah diramal.

Kosongkan Aliran Data: Jenis menunjukkan dengan tepat jenis data yang diharapkan dan dikembalikan oleh setiap bahagian kod anda. Kejelasan ini tidak ternilai apabila bekerja dalam pasukan atau meninjau semula projek lama. Apabila pangkalan kod berkembang, anotasi jenis TypeScript menjadikannya lebih mudah untuk mengekalkan dan memfaktorkan semula kod. Jenis membantu anda memahami cara bahagian aplikasi yang berbeza berinteraksi, menjadikannya lebih mudah diurus dalam jangka masa panjang.

Perubahan Lebih Selamat: Jika anda menukar cara fungsi berfungsi, TypeScript akan memaklumkan anda tentang semua tempat dalam kod anda yang mungkin terjejas, supaya anda tidak memecahkan perkara secara tidak sengaja

Penyahpepijatan Lebih Pantas: Oleh kerana TypeScript menangkap isu semasa pembangunan, anda menghabiskan lebih sedikit masa mengejar pepijat dan lebih banyak masa membina ciri.

4. Sesuai untuk Projek Besar

Apabila projek berkembang, mengurus JavaScript boleh menjadi tidak kemas. TypeScript bersinar dalam situasi ini:

Mengendalikan Kerumitan: Dengan menguatkuasakan struktur dan jenis data yang konsisten, TypeScript memastikan kod anda teratur dan berskala.

Meningkatkan Kerja Berpasukan: Jenis memudahkan ahli pasukan memahami kod satu sama lain, mengurangkan salah faham dan mempercepatkan pembangunan.

Intinya: Ciri TypeScript Utama

Taipan Statik: Membolehkan anda menentukan jenis data (seperti rentetan, nombor atau objek) yang perlu disimpan oleh pembolehubah.

Antaramuka: Tentukan rupa objek, menjadikan kod anda lebih mudah diramal dan lebih mudah difahami.

Peralatan Dipertingkat: Alat seperti Kod VS berfungsi dengan lancar dengan TypeScript, memberikan anda maklum balas masa nyata dan pilihan navigasi pintar.

Keserasian Ke Hadapan dan Ke Belakang dengan JavaScript

TypeScript menyokong ciri JavaScript terkini, jadi anda boleh menulis kod moden yang sentiasa dikemas kini dengan piawaian baharu. Ia juga memastikan keserasian ke belakang dengan menukar kod anda kepada versi JavaScript yang lebih lama, menjadikannya berfungsi pada sistem lama.

Sebagai contoh, anda boleh menggunakan ciri moden seperti async/menunggu dalam TypeScript, dan ia akan menukar kod anda secara automatik untuk berfungsi pada penyemak imbas lama yang tidak menyokongnya. Dengan cara ini, anda mendapat yang terbaik daripada kedua-dua dunia: menggunakan ciri baharu sambil memastikan keserasian yang meluas.

Perbezaan Antara JavaScript dan TypeScript

Jenis Anotasi:

Dalam JavaScript, pembolehubah ditaip secara dinamik, yang bermaksud jenisnya boleh berubah semasa masa jalan. Fleksibiliti ini kadangkala boleh memperkenalkan pepijat yang sukar dikesan.

Javascript Example
let message = "Hello, world!";
message = 77;  // No error, but can cause issues later
message = true; // Also works, but may cause bugs

---

TypeScript membetulkannya dengan membenarkan anda mengisytiharkan jenis pembolehubah secara eksplisit. Jika anda cuba memberikan nilai jenis yang berbeza, TypeScript akan menimbulkan ralat pada masa penyusunan.

Javascript Example
let message = "Hello, world!";
message = 77;  // No error, but can cause issues later
message = true; // Also works, but may cause bugs

Ini menghalang perubahan jenis tidak sengaja yang boleh membawa kepada pepijat dalam pangkalan kod yang besar dan kompleks.

Semakan Jenis Fungsi

Dalam JavaScript, fungsi ditaip secara longgar. Anda boleh menghantar sebarang jenis hujah kepada fungsi dan JavaScript tidak akan merungut - walaupun ia tidak masuk akal secara logik.

Typescript Example

let message: string = "Hello, world!";
// message = 77;  // Error: Type 'number' is not assignable to type 'string'
// message = true; // Error: Type 'boolean' is not assignable to type 'string'

---

TypeScript membolehkan anda mentakrifkan secara eksplisit jenis yang diharapkan untuk hujah fungsi, memastikan hanya jenis yang betul dihantar.

Javascript Example

function greet(name) {
  return `Hello, ${name}`;
}
greet("Alice");  // Works fine
greet(42);       // Also works, but it's not intended

Ini memastikan fungsi anda berfungsi seperti yang diharapkan dan mengurangkan potensi pepijat semasa masa jalan.

Antara muka untuk Struktur Objek

JavaScript membolehkan anda mentakrifkan objek dengan struktur yang fleksibel, tetapi fleksibiliti ini boleh membawa kepada pepijat yang tidak dapat diramalkan jika sifat objek diubah suai secara tidak betul.

Typescript Example

function greet(name: string): string {
  return `Hello, ${name}`;
}
greet("Alice");  // Works fine
// greet(42);     // Error: Argument of type 'number' is not assignable to parameter of type 'string'

---

TypeScript memperkenalkan antara muka, yang membolehkan anda menentukan struktur khusus untuk objek. Ini memastikan objek mematuhi corak yang ditetapkan dan menghalang ralat seperti menetapkan jenis data yang salah kepada sifat objek.

Javascript Example 

let person = { name: "John", age: 30 };
person.age = "thirty";  // No error, but could cause issues later

Ini membantu menghalang pepijat biasa yang berpunca daripada data berstruktur yang tidak betul.

Kelas dan Warisan

TypeScript memanjangkan struktur berasaskan kelas JavaScript dengan keselamatan jenis untuk sifat dan kaedah kelas, memberikan lebih kejelasan dan kebolehramalan.

Typescript Example

interface Person {
  name: string;
  age: number;
}

let person: Person = { name: "John", age: 30 };
// person.age = "thirty";  // Error: Type 'string' is not assignable to type 'number'

---

Dalam TypeScript, anda boleh menentukan jenis sifat dan kaedah mengembalikan nilai, menjadikan kelas lebih mudah diramal dan kurang terdedah kepada ralat.

Javascript Example

class Person {
  constructor(name) {
    this.name = name;
  }
  greet() {
    console.log(`Hello, my name is ${this.name}!`);
  }
}

Kejelasan jenis tambahan dalam kelas ini membantu dalam mengurus projek yang lebih besar di mana pewarisan dan prinsip berorientasikan objek digunakan.

Beberapa Wawasan Peribadi

Penerimaan Berperingkat lwn. Mula Segar

Pendekatan yang anda pilih bergantung pada projek dan matlamat peribadi anda. Jika anda sedang mengerjakan projek kecil atau skrip ringkas, model penggunaan beransur-ansur TypeScript mungkin masuk akal. Memandangkan TypeScript ialah superset JavaScript, ini membolehkan anda memperkenalkannya langkah demi langkah, membantu anda mengesan isu yang berpotensi tanpa perlu memfaktorkan semula semuanya sekaligus.

Untuk projek yang lebih besar atau yang menyasarkan kebolehskalaan jangka panjang, bermula dengan projek TypeScript baharu selalunya merupakan pilihan terbaik. Ini membolehkan anda menerima sepenuhnya manfaat TypeScript dari awal, termasuk menaip statik dan organisasi kod yang dipertingkatkan. Dengan memulakan baharu, anda mengelakkan komplikasi menyepadukan TypeScript ke dalam pangkalan kod sedia ada dan boleh menggunakan amalan terbaik dari awal, memastikan kod anda lebih bersih, lebih boleh diselenggara dan kurang terdedah kepada ralat.

Dayakan Mod Ketat

Untuk memanfaatkan TypeScript sepenuhnya, dayakan mod ketat dalam
anda fail tsconfig.json. Ini memastikan semua ciri semakan jenis yang ketat dihidupkan, menjadikan kod anda lebih mantap dan menangkap lebih banyak kemungkinan ralat.

Javascript Example
let message = "Hello, world!";
message = 77;  // No error, but can cause issues later
message = true; // Also works, but may cause bugs

Memahami mana-mana Jenis dalam TypeScript:

Sebarang jenis membolehkan anda memintas penaipan ketat TypeScript untuk pembolehubah atau fungsi tertentu buat sementara waktu. Anggap ia sebagai kembali kepada mod JavaScript - di mana pembolehubah boleh menyimpan sebarang jenis nilai tanpa sekatan.

Typescript Example

let message: string = "Hello, world!";
// message = 77;  // Error: Type 'number' is not assignable to type 'string'
// message = true; // Error: Type 'boolean' is not assignable to type 'string'

Walaupun ini boleh membantu anda menguasai bahasa, terlalu bergantung pada mana-mana boleh menjejaskan faedah teras TypeScript: keselamatan jenis. Adalah lebih baik untuk mula menggunakan jenis yang lebih khusus secepat mungkin. Ini akan membantu anda memanfaatkan sepenuhnya pemeriksaan jenis TypeScript, elakkan daripada bergantung pada mana-mana dan memastikan pengalaman pembelajaran yang lebih lancar dengan lebih sedikit refactor di kemudian hari.

Kesimpulan:

TypeScript ialah alat yang berkuasa untuk pembangun yang biasa dengan JavaScript, menawarkan kelebihan ketara dalam keselamatan jenis, perkakasan dan kebolehselenggaraan. Dengan meningkatkan kebolehramalan kod dan mengurangkan pepijat, TypeScript ialah pilihan terbaik untuk mereka yang ingin meningkatkan kemahiran JavaScript mereka. Ia disepadukan dengan lancar ke dalam projek JavaScript sedia ada, dan keluk pembelajaran beransur-ansur memastikan peralihan yang lancar untuk pembangun di mana-mana peringkat.

Sejak beralih kepada persekitaran TypeScript, saya telah membiasakan diri dengan ciri menangkap ralat terbina dalamnya, selalunya menganggapnya sebagai sebahagian daripada proses pembangunan. Sehinggalah saya memikirkan pengalaman terdahulu saya dengan JavaScript barulah saya menyedari betapa saya kini bergantung pada keupayaan menyemak jenis TypeScript.

Itu berkata, saya berhutang banyak kepada JavaScript. Ia adalah bahasa yang pertama kali saya gunakan untuk menyelami pembangunan web, dan ia memberi saya pengalaman langsung dalam membina aplikasi mudah. Hari-hari awal saya dengan JavaScript, terutamanya semasa mengerjakan projek seperti tugasan pengambilan tunggal, adalah kunci dalam membentuk pertumbuhan saya sebagai pembangun. Ia tetap menjadi pilihan saya untuk projek yang lebih kecil dan fleksibel di mana kesederhanaannya masih bersinar.

Terima kasih, JavaScript - Helo, TypeScript!

Sumber yang menyokong saya sepanjang perjalanan

• https://youtu.be/zQnBQ4tB3ZA?si=38FjZEWGdjCM3END
• https://www.codecademy.com/learn/learn-typescript
• https://www.typescriptlang.org/docs/

Lihat blog ini untuk menyelam lebih mendalam dan panduan tentang menyediakan TypeScript

• https://dev.to/sovannaro/typescript-roadmap-2024-step-by-step-9i4

Atas ialah kandungan terperinci Beralih daripada JavaScript kepada TypeScript: Pengalaman dan pemikiran saya. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!