TypeScript untuk pemula, Bahagian 1: Bermula

Mari kita mulakan tutorial ini dengan soalan: "Apa itu TypeScript?"

TypeScript adalah superset javascript yang disusun kepada JavaScript biasa. Sebagai analogi, jika JavaScript adalah CSS, maka TypeScript akan menjadi SCSS.

Semua kod JavaScript yang sah yang anda tulis juga kod TypeScript yang sah. Walau bagaimanapun, dengan TypeScript, anda dapat menggunakan menaip statik dan ciri -ciri terkini yang dapat disusun kepada JavaScript biasa, yang disokong oleh semua pelayar. TypeScript bertujuan untuk menyelesaikan masalah membuat JavaScript berskala, dan ia melakukan pekerjaan yang cukup baik.

Dalam tutorial ini, anda akan bermula dengan membaca tentang ciri -ciri yang berbeza dari TypeScript dan mengapa belajar itu adalah idea yang baik. Selebihnya bahagian dalam artikel akan meliputi pemasangan dan penyusunan TypeScript, bersama dengan beberapa editor teks popular yang menawarkan anda sokongan untuk sintaks Typescript dan ciri -ciri penting lain.

Mengapa kita memerlukan TypeScript?

Kami menggunakan bahasa pengaturcaraan untuk mengarahkan komputer bagaimana kami mahu mereka melakukan sesuatu. Mereka pada dasarnya bertindak sebagai medium komunikasi. Walau bagaimanapun, komputer tidak secara langsung memahami kod JavaScript, PHP, atau Python yang kami tulis. Semua kod yang boleh dibaca manusia yang kami tulis akhirnya ditukar kepada kod mesin yang boleh dikendalikan oleh komputer.

Bahasa pengaturcaraan moden ditulis dengan keperluan pengaturcara dalam fikiran. Ini bermakna bahasa pengaturcaraan yang berbeza direka dengan set ciri yang berbeza kerana cara mereka dimaksudkan untuk digunakan. JavaScript ditulis untuk menjadikannya sangat mudah untuk menyelesaikan sesuatu dengan menulis jumlah kod yang minimum.

JavaScript telah menjadi lebih popular sejak hari-hari awalnya dan kini digunakan secara meluas untuk projek-projek kecil dan berskala besar. Beberapa batasan JavaScript yang boleh diterima ketika menulis program kecil dapat menghalang produktiviti ketika bekerja pada projek besar dengan banyak anggota pasukan.

TypeScript telah dibuat untuk menangani batasan-batasan ini dengan menambahkan pelbagai ciri seperti jenis pemeriksaan untuk membantu anda dengan cepat menangkap sebarang kesilapan yang mungkin timbul apabila membuat perubahan kepada kod dalam projek berskala besar.

Mengapa Belajar TypeScript?

Sekiranya anda tidak pernah menggunakan TypeScript sebelum ini, anda mungkin tertanya -tanya mengapa anda perlu mengganggu pembelajaran sama sekali apabila ia disusun kepada JavaScript pada akhirnya.

Izinkan saya memberi jaminan bahawa anda tidak perlu menghabiskan banyak masa belajar. Kedua-dua TypeScript dan JavaScript mempunyai sintaks yang sangat serupa, dan anda hanya boleh menamakan semula kata kunci Const anda untuk menentukan bahawa kami ingin menghalang sebarang perubahan kepada nilai pembolehubah itu melalui penugasan semula atau menghalang pengisytiharan semula. Walau bagaimanapun, ini tidak bermakna bahawa nilai pembolehubah tidak berubah. Masih ada cara lain untuk mengubahnya. Berikut adalah contoh:

 const buah = ["epal", "mangga", "pisang"];<br> const sayur -sayuran = ["kentang", "bawang", "timun"];<br><br> buah -buahan.push ("oren");<br> // ["epal", "mangga", "pisang", "Orange"]<br><br> Buah [0] = "Papayas";<br> // ["Papayas", "Mangoes", "Pisang", "Orange"]<br><br> Buah -buahan = sayur -sayuran // ralat<br>

Sehingga baris terakhir, kod di atas adalah JavaScript yang sempurna dan tidak akan membuang sebarang kesilapan. Kami mengisytiharkan Undefined sebagai nilai. Pendekatan ini masuk akal kerana ia membolehkan kita menambah, mengeluarkan, atau mengemas kini sifat objek secara dinamik. Walau bagaimanapun, ia juga boleh menjadi sumber kesilapan atau tingkah laku yang tidak dijangka. Berikut adalah contoh:

 Biarkan Guy = {<br> Nama: 'Mario',<br> Umur: 56<br> }<br><br> console.log (guy.name 'adalah' guy.ahe 'tahun.');<br> // Mario berumur tahun yang tidak ditentukan.<br>

Mistyping AHE tidak dianggap sebagai kesilapan dalam JavaScript, tetapi ia akan ditangkap dalam TypeScript. Cuba menyusun kod di atas dari TypeScript ke JavaScript, dan anda akan melihat ralat mengenai PerimeterTriandle (). Ini menghasilkan nilai yang tidak masuk akal yang dikeluarkan sebagai perimeter segitiga kita.

 fungsi perimetertriandle (a, b, c) {<br> console.log (`perimeter segitiga adalah: $ {abc}`);<br> }<br><br> perimetertriandle (20, 30, "kentang");<br> // perimeter segitiga adalah: 50potato<br><br> perimetertriandle ("kentang", 10);<br> // perimeter segitiga adalah: kentang10undefined<br><br> perimetertriandle ();<br> // perimeter segitiga adalah: nan<br><br> perimetertriandle (20, 30, 50);<br> // perimeter segitiga adalah: 100<br>

Walaupun anda tidak membuat sebarang perubahan pada kod di atas dan cuba menyusunnya dari TypeScript ke JavaScript, anda masih akan mendapat kesilapan dengan panggilan fungsi kedua dan ketiga kerana ketidakcocokan dalam bilangan argumen yang disediakan. Walau bagaimanapun, kami boleh menambah lebih banyak maklumat kepada definisi fungsi kami dengan menentukan jenis argumen yang kami harapkan fungsi perimeterTriangle() untuk menerima.

 fungsi perimetertriandle (a: nombor, b: nombor, c: nombor) {<br> console.log (`perimeter segitiga adalah: $ {abc}`);<br> }<br><br> perimetertriandle (20, 30, "kentang");<br> // Ralat: Argumen jenis rentetan tidak ditugaskan untuk menaip nombor.<br><br> perimetertriandle ("kentang", 10);<br> // ralat: dijangka tiga argumen tetapi mendapat 2.<br><br> perimetertriandle ();<br> // ralat: dijangka tiga argumen tetapi mendapat 0.<br><br> perimetertriandle (20, 30, 50);<br> // Perimeter segitiga adalah 100.<br>

Sekarang, walaupun panggilan fungsi pertama melemparkan ralat kerana ketidakcocokan dalam jenis argumen. TypeScript akan membantu anda menangkap banyak kesilapan seperti itu dan menjimatkan banyak masa dalam jangka masa panjang.

Menyusun TypeScript ke JavaScript

Katakan anda telah menulis beberapa kod TypeScript dalam fail .ts . Pelayar tidak akan dapat menjalankan kod ini dengan sendirinya. Anda perlu menyusun typescript ke dalam JavaScript biasa yang dapat difahami oleh pelayar.

Jika menggunakan IDE, kod itu boleh disusun kepada JavaScript dalam IDE itu sendiri. Sebagai contoh, Visual Studio membolehkan anda secara langsung menyusun kod TypeScript ke JavaScript. Anda perlu membuat fail tsconfig.json di mana anda menentukan semua pilihan konfigurasi untuk menyusun fail TypeScript anda ke JavaScript.

Pendekatan yang paling mesra pemula apabila anda tidak bekerja pada projek besar adalah menggunakan terminal itu sendiri. Pertama, anda perlu berpindah ke lokasi fail TypeScript di terminal dan kemudian jalankan arahan berikut.

 tsc first.ts<br>

Ini akan membuat fail baru bernama First.js di lokasi yang sama. Perlu diingat bahawa jika anda sudah mempunyai fail bernama First.js , ia akan ditimpa.

Jika anda ingin menyusun semua fail di dalam direktori semasa, anda boleh melakukannya dengan bantuan kad liar. Ingat bahawa ini tidak akan berfungsi secara rekursif.

 tsc *.ts<br>

Akhirnya, anda hanya boleh menyusun beberapa fail tertentu dengan secara eksplisit memberikan nama mereka dalam satu baris. Dalam kes sedemikian, fail JavaScript akan dibuat dengan nama fail yang sepadan.

 tsc first.ts product.ts bot.ts<br>

Mari kita lihat program berikut, yang mengumpulkan dua nombor dalam TypeScript.

 Biarkan A: Nombor = 12;<br> Let B: nombor = 17;<br><br> Fungsi Showproduct (Pertama: Nombor, Kedua: Nombor): void {<br> Console.log ("Produk adalah:" Pertama * Kedua);<br> }<br><br> ShowProduct (a, b);<br>

Kod TypeScript di atas disusun ke kod JavaScript berikut apabila versi yang disasarkan ditetapkan kepada ES6. Perhatikan bagaimana semua jenis maklumat yang anda berikan dalam TypeScript kini hilang selepas penyusunan. Dalam erti kata lain, kod itu disusun kepada JavaScript yang dapat difahami oleh penyemak imbas, tetapi anda dapat melakukan perkembangan dalam persekitaran yang lebih baik yang dapat membantu anda dalam menangkap banyak pepijat.

 biarkan a = 12;<br> biarkan b = 17;<br> Fungsi Showproduct (Pertama, Kedua) {<br> Console.log ("Produk adalah:" Pertama * Kedua);<br> }<br> ShowProduct (a, b);<br>

Dalam kod di atas, kami telah menetapkan jenis pembolehubah a dan b sebagai nombor. Ini bermakna jika kemudian anda cuba menetapkan nilai b ke rentetan seperti "Apple", TypeScript akan menunjukkan ralat bahawa "Apple" tidak boleh disandarkan kepada number jenis. Kod anda masih akan disusun kepada JavaScript, tetapi mesej ralat ini akan memberitahu anda bahawa anda membuat kesilapan dan membantu anda mengelakkan masalah semasa runtime.

Berikut adalah tangkapan skrin yang menunjukkan mesej ralat dalam kod Visual Studio:

Contoh di atas menunjukkan bagaimana TypeScript terus memberi anda petunjuk tentang kemungkinan kesilapan dalam kod. Ini adalah contoh yang sangat asas, tetapi apabila anda mencipta program yang sangat besar, mesej seperti ini pergi jauh dalam membantu anda menulis kod yang mantap dengan peluang kesilapan yang kurang.

Pemikiran terakhir

Ini tutorial yang bermula dalam siri ini bertujuan untuk memberi anda gambaran ringkas mengenai ciri -ciri jenis jenis yang berbeza dan membantu anda memasang bahasa bersama -sama dengan beberapa cadangan untuk ides dan editor teks yang boleh anda gunakan untuk pembangunan. Bahagian seterusnya meliputi cara yang berbeza untuk menyusun kod TypeScript anda ke JavaScript dan menunjukkan kepada anda bagaimana Typescript dapat membantu anda mengelakkan beberapa kesilapan biasa.

Saya harap anda menyukai tutorial ini. Tutorial seterusnya siri ini akan membincangkan jenis pembolehubah yang berbeza yang terdapat dalam TypeScript.

Atas ialah kandungan terperinci TypeScript untuk pemula, Bahagian 1: Bermula. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!