Menambah pada Skrip dengan TypeScript

Kredit gambar muka depan: Daria Kraplak

Jadual Kandungan

Pengenalan
Tujuan TypeScript
Membandingkan JavaScript dan TypeScript
Kesimpulan

pengenalan

Sebelum menyelami apa itu TypeScript, mari bercakap tentang JavaScript dahulu! Adakah anda tahu bahawa JavaScript telah dicipta pada tahun 1995? saya pun tak buat.

Pada masa ini, ia memenuhi keperluan memproses halaman web mudah dalam penyemak imbas orang. Sejak tahun 1999, JavaScript telah dipertingkatkan dan boleh mengendalikan halaman web yang menyeronokkan dan dinamik yang kami bina pada masa kini. Selain itu, ia adalah bahasa pengaturcaraan yang agak mudah digunakan kerana ia fleksibel dengan (spoiler sedikit di sini) jenis data.

Namun, terdapat isu yang tidak ditangani. Ironinya, sebab JavaScript mudah digunakan adalah sebab yang sama mengapa ia boleh memecahkan kod kami. Di sinilah TypeScript boleh membantu kami!

Tujuan TypeScript

TypeScript ialah superset JavaScript. Apakah maksud ini? Bagi sesetengah orang, TypeScript bukanlah bahasa pengaturcaraan kerana ia digunakan untuk membantu dengan kod JavaScript yang sedia ada. Walau apa pun, TypeScript membantu kami pengguna JavaScript dengan mengukuhkan struktur kod kami. Ini dilakukan dengan memastikan ketekalan dalam jenis data untuk setiap pembolehubah yang kita ada. Ini berfaedah apabila ia datang kepada ujian kerana ia menyerlahkan potensi pepijat semasa pembangunan dan memberi amaran kepada kami sebelum kod disusun ke dalam JavaScript.

Membandingkan JavaScript dan TypeScript

Mereka Berkongsi Jenis Data Ini

• rentetan
• nombor
• boolean
• tidak ditentukan
• null

Namun, pelaksanaannya memerlukan pendekatan yang berbeza. Biar saya tunjukkan caranya!

Inferens

Apabila mentakrifkan pembolehubah dalam JavaScript, jenis datanya boleh berubah kemudian jika kita mahukannya. Ini adalah cerita yang berbeza untuk TypeScript kerana jenis data pembolehubah sama ada disimpulkan oleh TypeScript atau dinyatakan secara eksplisit oleh kami. Jenis data pembolehubah boleh menjadi apa-apa jika ia tidak dapat disimpulkan atau ia tidak dinyatakan secara eksplisit!

// JavaScript 
let x = 6;  // x stores a number value.  
x = "Hello there";  // x is now storing a string value.  
// This is valid since JavaScript allows dynamic type reassignment.  

// TypeScript 
let x = 6;  // x stores a number value.  
// (For line below) Error: Type string is not assignable to type number.  
x = "Hello there";  
// The reassigned value below matches the inferred or declared type of 
// the variable. TypeScript is okay with this.  
x = 8;  

// For both 
// x stores a number value and does not allow reassignment here. 
const x = 20; 
// Error: Cannot assign to 'x' because it is a constant.  
x = 25; 

Taip Anotasi

Sebagai kesinambungan subseksyen di atas, cara lain kita boleh menyatakan secara eksplisit jenis data pembolehubah dalam TypeScript ialah dengan menggunakan anotasi jenis. Ini bermakna menambah titik bertindih dan taip (: ) selepas memberikan pembolehubah namanya.

// JavaScript 
let x = 6;  // x stores a number value.  
x = "Hello there";  // x is now storing a string value.  
// This is valid since JavaScript allows dynamic type reassignment.  

// TypeScript 
let x = 6;  // x stores a number value.  
// (For line below) Error: Type string is not assignable to type number.  
x = "Hello there";  
// The reassigned value below matches the inferred or declared type of 
// the variable. TypeScript is okay with this.  
x = 8;  

// For both 
// x stores a number value and does not allow reassignment here. 
const x = 20; 
// Error: Cannot assign to 'x' because it is a constant.  
x = 25; 

bentuk

Apakah maksud "bentuk" dalam TypeScript? Sebagai contoh, apabila ia datang kepada rentetan, kaedah mereka datang dengan sifat mereka sendiri. "Sifat" ini membentuk "bentuk" atau struktur pembolehubah. Untuk mengakses sifat pembolehubah, kita mesti memastikan bahawa kaedah yang kita gunakan menyediakan maklumat yang diperlukan. JavaScript tidak ketat dengan ini dan membenarkan pembolehubah menukar bentuknya apabila ia berkaitan dengan masa jalan. Walau bagaimanapun, kita perlu berhati-hati dengan TypeScript kerana ia sedang mencari sifat sebenar pembolehubah. Ia seperti memasukkan bongkah ke dalam garisan yang sepadan dengan bentuknya.

// JavaScript 
// No need to state the data type here, just assign the variable a value. 
let color = ‘purple’;
// Since JavaScript is flexible, it is fine with this reassignment. 
color = ‘blue’;
// This is also the case even if the value changes to 10. 

// TypeScript 
// 'color' is declared and expected to have a string value.  
let color: string;
// Similar to the line above, except we assign a value as well.  
let color: string = 'red';
color = ‘purple’;  // 'purple' is a string value, so this is valid.  
color = ‘blue’;  // 'blue' is a string value, so this is valid.  

Terdapat banyak lagi daripada ini!

Kesimpulan

Ini adalah tanggapan pertama saya tentang TypeScript setakat ini. Adalah selamat untuk mengatakan bahawa saya terpesona dengan cara ia boleh meningkatkan apa yang JavaScript boleh lakukan untuk kita. Saya tidak sabar-sabar untuk mengetahui lebih lanjut dan melaksanakannya ke dalam projek JavaScript saya!

Saya harap ini telah menarik minat anda untuk menambahkan TypeScript pada kotak pasir/kotak alat anda bersama JavaScript. Siapa yang tidak mahu kod mereka distrukturkan dengan lebih baik?

Atas ialah kandungan terperinci Menambah pada Skrip dengan TypeScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!