Asas TypeScript: Panduan Pemula (✅

TypeScript telah menyebabkan perdebatan yang tidak berkesudahan di kalangan pembangun. Sesetengah melihatnya sebagai sekatan jalan birokrasi kepada kebebasan JavaScript, manakala yang lain menganggapnya sebagai suar cahaya dalam parit kod yang ditaip longgar. Suka atau benci, TypeScript sentiasa ada — dan sebaik sahaja anda mengenalinya, anda mungkin mendapati ia bukan satu beban tetapi satu rahmat untuk projek anda.

Dalam siri ini, kami akan meneroka TypeScript dan merangkumi perkara asas -- serta beberapa helah dan petua penyelesaian masalah.

1. Pengenalan

Apakah TypeScript?

TypeScript ialah superset JavaScript yang ditaip secara statik yang disusun kepada JavaScript biasa. Dalam istilah yang lebih mudah, ia adalah JavaScript dengan ciri tambahan yang membantu anda menangkap ralat lebih awal dan menulis kod yang lebih baik dan lebih boleh diselenggara.

Fikirkan TypeScript sebagai pembantu yang mesra yang menyemak semula kerja anda sebelum anda menyerahkannya. Ia membolehkan anda:

• Kesan ralat semasa anda mengekod, bukan selepas anda menggunakan.
• Tulis kod yang lebih mudah dibaca dan difahami.
• Skalakan projek anda tanpa kehilangan jejak cara perkara disambungkan.

Mengapa Menggunakan TypeScript?

Jom buat praktikal. Mengapakah anda perlu mengambil berat tentang TypeScript sedangkan JavaScript sudah berfungsi?

Faedah sebenar:

1. Tangkap Ralat Awal: Elakkan perangkap biasa, seperti menghantar jenis data yang salah kepada fungsi.

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

1. Autolengkap & Dokumentasi: Editor moden (seperti Kod VS) menyediakan cadangan dan dokumentasi autolengkap yang kaya semasa anda menaip.

2. Skalabilitas Kod: Ciri TypeScript menyerlah dalam projek yang lebih besar di mana mengekalkan konsistensi adalah penting.

3. Kolaborasi Pasukan yang Dipertingkat: Jenis yang jelas memudahkan ahli pasukan memahami kod anda sepintas lalu.

Saya mendapati TypeScript sangat membantu untuk merancang apl yang lebih besar; memahami jenis data yang akan saya hadapi dan data yang diambil/dipulangkan oleh fungsi saya.

Prasyarat

Sebelum menyelam, pastikan anda mempunyai pengetahuan JavaScript asas. Anda sepatutnya biasa dengan:

• Pembolehubah dan jenis data (cth., let, const, rentetan, nombor)
• Fungsi
• Susun atur dan objek

Jika anda masih belum yakin, luangkan sedikit masa untuk menyemak asas JavaScript.

---

2. Sediakan Persekitaran Anda

Memasang TypeScript

TypeScript ialah alat yang memerlukan pemasangan untuk bermula. Dengan hanya beberapa langkah, anda boleh menyediakan persekitaran anda untuk memulakan pengekodan dalam TypeScript. Begini cara melakukannya:

Untuk mula menggunakan TypeScript, anda memerlukan Node.js dipasang. Sebaik sahaja anda memilikinya:

1. Pasang TypeScript secara global:

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

1. Sahkan pemasangan:

   npm install -g typescript

Menyediakan Kod VS

Kod VS ialah salah satu editor paling popular untuk pembangunan TypeScript. Ia menyediakan pelbagai ciri dan sambungan yang menjadikan pengekodan lebih mudah dan lebih cekap. Mari sediakan:

Kod VS ialah editor pilihan untuk pembangun TypeScript. Begini cara untuk menyediakannya:

1. Pasang Kod VS: Muat turun di sini
2. Tambah sambungan berguna ini:
   • ESLint: Untuk menyelitkan kod TypeScript anda.
   • Lebih cantik: Untuk pemformatan kod yang konsisten.
   • Wira TypeScript: Untuk meningkatkan produktiviti.

Mencipta Projek TypeScript Pertama Anda

Mendapat pengalaman secara langsung ialah cara terbaik untuk mempelajari TypeScript. Bahagian ini membimbing anda melalui penyediaan projek pertama anda, daripada membuat fail kepada menjalankan kod anda.

1. Buat folder baharu untuk projek anda dan navigasi ke dalamnya:

   tsc --version

1. Mulakan projek baharu:

   mkdir typescript-starter
   cd typescript-starter

1. Tambah TypeScript:

   npm init -y

1. Buat fail tsconfig.json:

   npm install --save-dev typescript

1. Tulis fail TypeScript pertama anda:

   npx tsc --init

1. Kompil dan jalankan:

   echo "console.log('Hello, TypeScript!');" > index.ts

Anda baru sahaja menulis dan menyusun atur cara TypeScript pertama anda!

---

3. Gambaran Keseluruhan Jenis Asas

Kuasa TypeScript terletak pada sistem jenisnya. Mari terokai beberapa jenis asas:

Jenis Primitif

Jenis primitif ialah blok binaan sistem jenis TypeScript. Ia termasuk jenis data asas seperti rentetan, nombor dan boolean. Berikut ialah pandangan ringkas tentang cara menggunakannya:

1. rentetan:

   npx tsc index.ts
   node index.js

1. nombor:

   let name: string = "Alice";

1. boolean:

   let age: number = 25;

Jenis Lanjutan

Selain primitif, TypeScript menyokong jenis yang lebih kompleks seperti tatasusunan, tupel dan jenis khas seperti mana-mana dan tidak diketahui. Jenis ini menjadikan kod anda fleksibel sambil mengekalkan keselamatan.

1. Susun atur:

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

1. Tuple:

   npm install -g typescript

1. mana-mana (gunakan dengan berhati-hati):

   tsc --version

1. tidak diketahui (lebih selamat daripada mana-mana):

   mkdir typescript-starter
   cd typescript-starter

1. kosong (fungsi yang tidak mengembalikan apa-apa):

   npm init -y

1. null dan undefined:

   npm install --save-dev typescript

---

4. Langkah Pertama dengan Anotasi Jenis

Anotasi Taip dalam TypeScript membenarkan pembangun menentukan jenis pembolehubah, parameter atau nilai pulangan fungsi. Ini memastikan bahawa kod itu mematuhi struktur yang ditetapkan, menjadikannya lebih mudah untuk menangkap ralat semasa pembangunan dan mengekalkan konsistensi sepanjang projek.

Sambil anda menulis kod anda seperti biasa, ambil perhatian ciri di bawah yang boleh anda sepadukan

Penaipan Pembolehubah Asas

Tetapkan jenis untuk pembolehubah anda supaya ia sentiasa ditetapkan kepada perkara yang betul dan apl yang lain memahami perkara itu.

   npx tsc --init

Penaipan Parameter Fungsi

Begitu juga, untuk fungsi anda boleh mentakrifkan jenis untuk hujah, serta menentukan jenis untuk pulangan.

   echo "console.log('Hello, TypeScript!');" > index.ts

Anotasi Jenis Pulangan

   npx tsc index.ts
   node index.js

Contoh Praktikal: Profil Pengguna

TypeScript membolehkan anda mengisytiharkan jenis anda sendiri kepada struktur yang lebih baik dan menguatkuasakan peraturan dalam kod anda. Dengan menggunakan jenis atau antara muka, anda boleh menentukan jenis tersuai untuk objek, fungsi, atau pun kesatuan. Ini bukan sahaja menjadikan kod anda lebih mantap tetapi juga meningkatkan kebolehbacaan dan ketekalan dalam projek yang lebih besar.

   let name: string = "Alice";

---

5. Mula Pantas dengan Antara Muka

Sintaks Asas

Antaramuka dalam TypeScript mentakrifkan struktur objek, memastikan ia mempunyai sifat dan jenis tertentu. Bahagian ini menunjukkan kepada anda cara mencipta dan menggunakannya:

   let age: number = 25;

Sifat Pilihan

Kadangkala, tidak semua sifat dalam objek diperlukan. TypeScript membolehkan anda menentukan sifat pilihan dalam antara muka untuk mengendalikan kes sedemikian dengan anggun.

   let isStudent: boolean = true;

Harta Baca Sahaja

Sifat readonly berguna apabila anda ingin memastikan nilai tertentu tidak boleh diubah selepas ia ditetapkan. Begini cara menggunakannya dalam antara muka:

   let scores: number[] = [90, 85, 88];

Contoh Dunia Sebenar: Respons API

Menggunakan antara muka untuk menaip respons API memastikan anda mengendalikan data daripada pelayan dengan selamat dan berkesan. Berikut ialah contoh praktikal:

   let user: [string, number] = ["Alice", 25];

---

6. Projek Amalan: Membina Senarai Todo Mudah

Latihan adalah kunci untuk menguasai TypeScript. Dalam projek ini, anda akan mencipta aplikasi senarai tugasan mudah yang memanfaatkan ciri yang telah anda pelajari setakat ini:

1. Buat jenis Todo:

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

1. Bina susunan mudah tugasan:

   npm install -g typescript

1. Tambah beberapa fungsi untuk menambah todos dan tandakan todos sebagai lengkap:

   tsc --version

---

7. Langkah Seterusnya

Itu sahaja buat masa ini, harap anda menikmati tutorial ini. Saya akan mengusahakan beberapa tutorial tambahan untuk menggali lebih mendalam ciri TypeScript dan kes penggunaan yang berguna.

• Akan Datang Seterusnya: Menyelami fungsi TypeScript dan jenis lanjutan.
• Sumber:
  • Dokumentasi TypeScript
  • CodeSandbox untuk berlatih TypeScript dalam talian.
• Cabaran: Buat antara muka TypeScript untuk catatan blog dan gunakannya untuk menaip-menyemak senarai catatan blog.

Jumpa lagi nanti!

Atas ialah kandungan terperinci Asas TypeScript: Panduan Pemula (✅. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!