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
Lepaskan: 2025-01-26 06:32:08
asal
122 orang telah melayarinya

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>
Salin selepas log masuk
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>
Salin selepas log masuk
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>
    Salin selepas log masuk
  2. String: untuk teks:

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

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

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

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

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

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

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

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

    <code class="language-typescript">let empty: null = null;
    let notAssigned: undefined = undefined;</code>
    Salin selepas log masuk
  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>
    Salin selepas log masuk
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!

sumber:php.cn
Kenyataan Laman Web ini
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
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan