Mengapa anda perlu mempelajari TypeScript dan membuang JavaScript? TypeScript vs JavaScript

Anda belum berkahwin dengan JavaScript, tidak kira betapa anda menyukainya, anda mesti mencubanya dengan TypeScript. Mungkin anda tidak mempunyai sebab untuk berpindah, tetapi saya akan membawa anda mengembara, di mana anda ingin merasai TypeScript sedikit. Saya boleh memberi anda lebih daripada 13 Sebab Mengapa anda perlu beralih ke skrip taip, tetapi buat masa ini, saya akan cuba meyakinkan anda untuk beralih ke TypeScript dalam 5 mata di mana saya akan memberitahu anda mengapa TypeScript jauh lebih baik daripada JavaScript untuk pembangunan, dan mengapa anda perlu memilih TypeScript untuk projek anda yang seterusnya.

JavaScript Ditaip Tegas

TypeScript hanyalah javascript yang ditaip ketat. Salah satu sebab saya benci JavaScript (ya saya benci) ialah terdapat begitu banyak fleksibiliti dalam bahasa sehingga tiada peraturan dan peraturan, anda boleh menulis apa-apa omong kosong, dan ia tidak akan memberi anda ralat (pengecualian ada) , sebagai contoh, jika anda mencipta pembolehubah dan memberikannya beberapa nombor sebagai nilai katakan 6, kemudian anda boleh menetapkan beberapa fungsi kepada pembolehubah yang sama, dan juga boleh memanggil pembolehubah itu, nampaknya agak lucu bagi saya, bagaimanapun, mari kita lihat apa TypeScript mempunyai kaitan dengannya.

Dalam skrip taip, apabila mentakrifkan pembolehubah, anda mesti menulis jenisnya, seperti pembolehubah akan menyimpan nombor, tatasusunan, rentetan atau apa-apa lagi. Sebaik sahaja anda melakukannya, anda tidak boleh menyimpan apa-apa lagi di dalamnya atau TypeScript tidak akan membenarkan anda meneruskan dan TypeScript tegas mengenainya.

let age: number;
age = 25;

Walaupun anda tidak menyebut jenis kepada pembolehubah dan memberikannya beberapa nilai, ia adalah terlalu pintar, sehingga ia secara automatik mengetahui jenis daripada nilai yang diberikan dan mengingatinya.

let age = 10;

age = "Donald Trump"
~~~
// Type '"Donald Trump"' is not assignable to type 'number'.(2322)

Jika anda mengetahui bahasa seperti C/C , di sana, jenisnya ditakrifkan sebagai umur int; begitu juga, dalam TypeScript, kami mentakrifkan jenis selepas nama pembolehubah berikutan tanda bertindih, seperti ini biarkan umur: nombor;. Dengan cara itu kami hanya memasukkan TypeScript tanpa mengubah sintaks JavaScript. Itulah yang saya beritahu anda pada mulanya, TypeScript bukan sekadar JavaScript, dengan hanya jenis. Saya tidak akan menumpukan pada sintaks skrip taip, ia bukan dalam skop artikel ini.

Sekarang, jika ia adalah JS, anda boleh melakukan apa sahaja dengan usia, menamakan nama anda, atau beberapa tatasusunan, atau bahkan beberapa fungsi, tetapi dalam TS, apabila ia dilahirkan sebagai nombor, ia akan kekal sebagai nombor , tiada yang lain. Jika anda melakukannya, ia akan memberikan anda ralat serta-merta, tetapi dalam JS, ia akan bertolak ansur selagi anda tidak melakukan sesuatu yang menyalahi undang-undang, seperti memanggil umur tanpa memberikannya fungsi atau mengakses sifat .length apabila ia satu fungsi.

Pada mulanya, anda mungkin kelihatan tidak berbaloi untuk bertukar daripada JS kepada TS, tetapi apabila anda memahaminya sepenuhnya, anda tidak mahu mengodkan dalam JS hanya kerana ciri ini.

Kerana anda memerlukan ralat.

Apabila saya katakan anda memerlukan ralat, tidak bermakna saya mahu anda menulis kod yang ralat, tetapi kod yang anda tulis mestilah bebas ralat, dan untuk itu, tugas persekitaran dev anda untuk memberi anda kesilapan. Dan dalam JS, ia tidak melakukannya, ia adalah salah satu sebab orang menyukainya, dan pada masa yang sama membencinya juga. Apabila saya mengatakan ralat, saya maksudkan segala-galanya kecuali ralat sintaks. JS tidak memberikan ralat apabila anda menulis sesuatu yang salah, tetapi ia memberi anda ralat apabila sesuatu yang salah berlaku. Oleh itu, jika sesetengah bahagian kod anda tidak dilaksanakan pada masa ujian, maka bersedialah untuk sedikit kesakitan dalam pengeluaran. :)
Jom lihat contoh

Saya sedang menulis kod untuk mendarab dua nombor, saya akan melakukan ini dalam kedua-dua JS dan TS, dan anda akan melihat bagaimana JS sangat tidak boleh dipercayai dan boleh merosakkan aplikasi anda dalam pelbagai cara.

let age: number;
age = 25;

Anda benar-benar boleh memanggil multiply dalam apa jua cara, tiada sekatan, dan ia sentiasa memberikan anda hasil yang tidak dijangka, itulah perkara yang paling teruk tentang JS, anggap sekarang anda perlu menggunakan nilai yang dikembalikan itu di suatu tempat, berapa banyak ketidakkonsistenan dan hasil yang tidak dijangka yang ditimbulkannya dalam permohonan anda.

Tetapi terima kasih kepada TypeScript, ia sangat ketat, ia tidak akan membenarkan anda meneruskan jika anda tidak mengikut peraturan jika fungsi menjangkakan, maka anda mesti lulus nombor, dan ia mengatakan kedua-duanya harus nombor, kemudian anda perlu lulus dua hujah dan kedua-duanya mestilah nombor. Mari lihat kod yang sama dalam TypeScript. Jika anda tidak mengetahui sintaks TS, jangan risau, ia serupa dengan JS, kecuali jenis pulangan datang sebelum pendakap pembukaan dan jenis hujah dengan namanya.

let age = 10;

age = "Donald Trump"
~~~
// Type '"Donald Trump"' is not assignable to type 'number'.(2322)

Jadi di sini dalam TS, tidak pernah ada keputusan yang tidak dapat diramalkan, anda hanya boleh meneruskan apabila anda membuang semua kesilapan, itu yang membuatkan saya jatuh cinta dengan TS <3

TS bukan sahaja terikat untuk memberitahu ralat dalam kod anda yang telah anda tulis, tetapi ia juga memberitahu anda kemungkinan, di mana ralat mungkin datang. Mari lihat contoh ringkas tentang ini.

function multiply (num1, num2 ) {
    return num1 * num2;
}

console.log(multiply(3, 4));
// returns 12

console.log(multiply(3));
// return NaN

console.log(multiply(3, null));
// returns 0

console.log(multiply());
// returns NaN

Sekarang seperti yang anda boleh lihat, harta sosial adalah pilihan bermakna mungkin terdapat kes di mana sosial tidak ditentukan, TS tahu perkara itu dan ia tidak akan membenarkan anda meneruskan sehingga anda mengendalikannya.

function multiply (num1:number, num2:number) :number{
    return num1 * num2;
}

console.log(multiply(3, 4));
// returns 12

console.log(multiply(3));
//          ~~~~~~~~~~~
// Expected 2 arguments, but got 1.(2554)
// input.tsx(1, 33): An argument for 'num2' was not provided.

console.log(multiply(3, null));
//                      ~~~~
// Argument of type 'null' is not assignable to parameter of type 'number'.


console.log(multiply());
//          ~~~~~~~~~~~
// Expected 2 arguments, but got 0.(2554)
// input.tsx(1, 20): An argument for 'num1' was not provided.

Jadi, ini diabaikan secara senyap oleh JS, dan ia menyebabkan ralat dari kes ke kes, yang merupakan satu lagi sebab TS dianggap lebih dipercayai.

Auto Diuji dan Didokumenkan.

Andaikan anda menggunakan fungsi daripada beberapa perpustakaan yang ditulis dalam JS, bagaimana anda tahu param apa yang anda perlu lulus? Anda akan pergi ke dokumentasi, anda akan menyemak parameter yang akan diambil, yang mana antaranya adalah pilihan, dan kemudian anda akan memanggil fungsi tersebut. Tetapi dalam TS, tidak perlu mendokumentasikannya, semuanya dijelaskan oleh jenis itu sendiri. Malah ia juga memastikan bahawa anda menggunakan fungsi dengan cara yang betul, dan tidak melepasi sebarang parameter rawak.

Sebagai contoh, anda boleh merujuk bahagian kedua di atas.

Satu lagi kes yang boleh anda ambil ialah, andaikan anda menggunakan perpustakaan yang memberikan anda objek JS, dengan sifat bersarang, jadi untuk menyemak apakah sebenarnya nama sifat, dan yang mana boleh tidak ditentukan, adalah satu perkara yang besar. sakit. Anda perlu menggali dalam dokumentasi, atau kadangkala konsol log objek anda untuk melihat kandungan yang terkandung di dalamnya. Itu benar-benar apa yang saya benci, saya ingin beberapa cara, di mana objek itu sendiri memberitahu anda sifat yang terkandung di dalamnya dan jika sesetengah harta tidak ditentukan, atau harta mempunyai rentetan nilai atau nombor atau tatasusunan atau apa. Nah, hasrat itu tercapai, terima kasih sekali lagi kepada TypeScript. Jika kod ditulis dalam TS, gelagat tepat yang anda akan dapat. Mari kita lihat dengan contoh.

let age: number;
age = 25;

Sekarang untuk menyemak sifat yang akan dimiliki pengguna, tidak perlu log konsol atau pergi ke definisi fungsi apabila anda menambah . selepas pengguna, ia secara automatik memberikan anda senarai sifat yang dimilikinya, dan juga memberitahu anda yang mana antaranya tidak ditentukan. Lihat imej di bawah.

Ia juga secara automatik menguji kod anda dengan menyemak semua kemungkinan dan memberitahu anda jika mana-mana kemungkinan gagal. Kedengarannya menakjubkan betul, ya, betul. Ciri ini menghalang sejumlah besar pepijat pada masa pembangunan, anda tidak perlu menulis ujian untuk fungsi anda dan tidak perlu mengujinya secara manual pada nilai yang berbeza, TS melakukannya untuk anda dan memberitahu anda jika anda terlepas sesuatu yang mungkin menimbulkan masalah kemudian hari.

Dalam kod di bawah, saya telah menulis fungsi yang mengambil dua argumen dan mengembalikan tatasusunan rentetan dengan menambahkan setiap parameter pada tatasusunan jika ia tidak tidak ditentukan. Argumen pertama diperlukan manakala yang kedua adalah pilihan.

let age = 10;

age = "Donald Trump"
~~~
// Type '"Donald Trump"' is not assignable to type 'number'.(2322)

Kod di atas adalah senario yang sangat biasa untuk saya melakukan kesilapan. Array.push tidak mengembalikan tatasusunan yang dikemas kini, tetapi mengembalikan panjang tatasusunan baharu. Jadi jika kod di atas ditulis dalam JS, tidak akan ada sebarang ralat, dan kod saya hanya berjalan dan memberikan hasil yang diharapkan, yang saya perlu nyahpepijat dan mencari kesilapan di sini, dan fungsi saya mengembalikan 2 jika saya lulus hujah kedua juga. Tetapi di sini dalam TS, anda boleh melihat dengan jelas bahawa TypeScript menjalankan kes itu secara automatik, dan memberitahu anda bahawa dalam kes tertentu itu, fungsi anda akan gagal mengembalikan tatasusunan rentetan.

Terdapat satu lagi ralat, katakan jika anda tidak melepasi parameter kedua, anda masih tidak mengembalikan apa-apa (tidak ditentukan), yang juga melanggar gelagat fungsi anda kerana ia mesti mengembalikan tatasusunan rentetan. Jadi, di sini saya membuat beberapa perubahan dalam fungsi dan TS memberi anda bendera hijau, yang bermaksud fungsi itu tidak akan pernah memberi anda hasil yang tidak dijangka. Lihat di bawah.

let age: number;
age = 25;

Sentiasa beberapa langkah lebih awal daripada JavaScript

Typescript sentiasa beberapa langkah di hadapan Javascript. Jika ciri baharu diumumkan dalam JavaScript, dan ia sepatutnya dikeluarkan dalam keluaran ECMA seterusnya, TS mengeluarkannya sebelum keluaran rasmi dan anda boleh menggunakannya tanpa perlu risau tentang keserasian dalam penyemak imbas kerana anda boleh menyusun TS ke mana-mana versi sebelumnya JavaScript (seperti ES5). TypeScript mempunyai banyak ciri yang tidak dimiliki oleh JavaScript.

Jadi kita boleh katakan bahawa TypeScript juga merupakan superset JavaScript, ECMA5, ECMA6, ECMA7 dan ECManext serta beberapa ciri yang tidak wujud dalam JavaScript.

Kesimpulan

Ya, lambat laun, anda perlu menerima TypeScript. Anda tidak boleh lari daripadanya. Setiap pakej npm sama ada ditulis dalam JavaScript perlu menyediakan jenisnya juga, atau pakej lain dengan sokongan skrip taip lebih disukai. Kini, kebanyakan perpustakaan, pakej dan rangka kerja yang besar sedang ditulis dalam TypeScript.

Pada mulanya, pakej digunakan dalam JavaScript dengan sokongan TypeScript juga, tetapi kini jadual telah bertukar, dan pakej berada dalam TypeScript dan ia memberikan sokongan kepada JavaScript. Semua orang mengakui kuasa dan keperluan untuk TypeScript terhadap JavaScript dan menerimanya.

Anda tidak akan dapat mempelajari Angular, kerana ia memaksa anda untuk menulis kod TS sahaja, kes yang sama dengan loopback 4. Bahasa utama NestJS ialah TypeScritpt dan ia juga menyediakan sokongan untuk JavaScript. Berikut ialah kata-kata NestJs

Kami jatuh cinta dengan TypeScript, tetapi yang paling penting - kami suka Node.js. Itulah sebabnya Nest serasi dengan TypeScript dan JavaScript tulen. Nest memanfaatkan ciri bahasa terkini, jadi untuk menggunakannya dengan JavaScript vanila, kami memerlukan pengkompil Babel.

Sekiranya anda masih tidak berpuas hati dengan alasan yang saya berikan kepada anda, dan mempunyai beberapa soalan balas, anda boleh menghubungi kami pada bila-bila masa, dan percayalah, ia berbaloi untuk mencuba, anda tidak akan menyesal.

Atas ialah kandungan terperinci Mengapa anda perlu mempelajari TypeScript dan membuang JavaScript? TypeScript vs JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!