Rumah >hujung hadapan web >tutorial js >Semua yang Anda Perlu Tahu Mengenai Jenis dalam TypeScript

Semua yang Anda Perlu Tahu Mengenai Jenis dalam TypeScript

DDD
DDDasal
2025-01-26 06:32:08161semak imbas

typescript: Panduan pemula untuk menaip statik dalam javascript

fleksibiliti JavaScript adalah pedang bermata dua. Walaupun ia membolehkan prototaip dan kemudahan penggunaan yang cepat, sifat dinamiknya boleh membawa kepada kesilapan runtime yang sukar untuk debug. TypeScript, superset JavaScript, menyelesaikannya dengan menambah menaip statik. Panduan ini memperkenalkan sistem jenis TypeScript, menerangkan manfaatnya dan cara menggunakannya dengan berkesan.

Everything You Need to Know About Types in TypeScript

Memahami Jenis

dalam pengaturcaraan, taip

Menentukan jenis data yang boleh dipegang oleh pembolehubah. Penaipan dinamik JavaScript bermaksud pembolehubah boleh menukar jenis dengan bebas:

<code class="language-javascript">let value = 42; // Number
value = "Hello"; // String</code>
fleksibiliti ini, sementara mudah, boleh menyebabkan isu -isu yang tidak dijangka. Penaipan statik TypeScript memerlukan anda mengisytiharkan jenis pembolehubah, mencegah kesilapan tersebut:

<code class="language-typescript">let value: number = 42;
value = "Hello"; // Error: Type 'string' is not assignable to type 'number'</code>
kepentingan jenis

menaip statik menawarkan kelebihan yang ketara:

  • Pengesanan ralat awal: Menangkap kesilapan semasa penyusunan, bukan runtime.
  • Alat yang dipertingkatkan: mendapat manfaat daripada autokomplet dan refactoring yang lebih baik dalam IDE anda.
  • Pembacaan kod yang lebih baik: Jenis berfungsi sebagai dokumentasi yang dibina.
  • skalabiliti: mengurus projek yang lebih besar dengan lebih cekap.
Jenis -jenis jenis asas

mari kita meneroka jenis jenis teras:

  1. nombor: mewakili nilai angka:

    <code class="language-typescript">let age: number = 25;
    let pi: number = 3.14;</code>
  2. String: untuk teks:

    <code class="language-typescript">let name: string = "Alice";
    let message: string = `Hello, ${name}`;</code>
  3. Boolean: Nilai Benar/Palsu:

    <code class="language-typescript">let isActive: boolean = true;</code>
  4. array: koleksi item:

    <code class="language-typescript">let numbers: number[] = [1, 2, 3];
    let names: string[] = ["Alice", "Bob"];</code>
    atau menggunakan generik:

    <code class="language-typescript">let values: Array<number> = [10, 20, 30];</code>
  5. tuple: array dengan panjang tetap dan jenis:

    <code class="language-typescript">let tuple: [string, number] = ["Alice", 25];</code>
  6. enum: mentakrifkan pemalar yang dinamakan:

    <code class="language-typescript">enum Direction {
      Up,
      Down,
      Left,
      Right
    }
    let move: Direction = Direction.Up;</code>
  7. mana -mana: jenis wildcard (gunakan dengan berhati -hati!):

    <code class="language-typescript">let random: any = 42;
    random = "Hello";</code>
  8. void: untuk fungsi tanpa nilai pulangan:

    <code class="language-typescript">function logMessage(message: string): void {
      console.log(message);
    }</code>
  9. null dan undefined: secara eksplisit mewakili null atau undefined:

    <code class="language-typescript">let empty: null = null;
    let notAssigned: undefined = undefined;</code>
  10. tidak pernah: Jenis yang tidak pernah berlaku (mis., Fungsi yang selalu melemparkan ralat):

    <code class="language-typescript"> function alwaysThrows(): never {
       throw new Error("This always throws!");
     }</code>
Jenis Typescript Advanced

TypeScript menawarkan jenis yang lebih maju untuk senario kompleks:

  • Jenis Kesatuan: Benarkan pembolehubah untuk memegang pelbagai jenis: let id: number | string;
  • Jenis persimpangan: Gabungkan pelbagai jenis: type Staff = Person & Employee;
  • alias taip:
  • Buat nama jenis tersuai: type Point = { x: number; y: number; };
  • Interfaces:
  • Tentukan Bentuk Objek: interface User { id: number; name: string; }
  • Jenis literal:
  • Hadkan pembolehubah kepada nilai -nilai tertentu: let direction: "up" | "down";
  • Taipkan penegasan:
  • dengan jelas menentukan jenis: let input = <HTMLInputElement>document.getElementById("input");
  • Petua Praktikal untuk Pemula

Mula dengan menambahkan TypeScript ke projek JavaScript yang sedia ada menggunakan
    .
  • tsc --init Gunakan pilihan pengkompil
  • untuk amalan terbaik.
  • strict secara beransur -ansur memperkenalkan jenis ke codebase anda.
  • menggunakan IDE yang baik seperti kod VS untuk sokongan TypeScript.
  • Elakkan terlalu banyak
  • .
  • any
  • Kesimpulan

sistem jenis TypeScript dengan ketara meningkatkan kualiti kod dan kebolehkerjaan. Dengan menguasai jenis, anda akan menulis lebih banyak aplikasi yang mantap dan berskala. Merangkul kuasa menaip statik dan meningkatkan aliran kerja pembangunan anda!

Atas ialah kandungan terperinci Semua yang Anda Perlu Tahu Mengenai Jenis dalam TypeScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn