Cara menggunakan skrip taip untuk semakan jenis dalam Vue

Vue ialah rangka kerja bahagian hadapan yang popular yang menggunakan sintaks templat untuk memaparkan aplikasi dan menyediakan komponen yang kaya dan cangkuk kitaran hayat. Walau bagaimanapun, Vue pada asalnya ditulis dalam JavaScript, dan JavaScript ialah bahasa yang ditaip lemah, yang bermaksud bahawa apabila membangunkan aplikasi besar, mudah untuk membuat ralat jenis. Untuk menyelesaikan masalah ini, Vue boleh menggunakan TypeScript untuk semakan jenis.

TypeScript ialah superset JavaScript Ia menambahkan ciri seperti sokongan jenis yang kuat, kelas dan antara muka serta melaksanakan semakan jenis melalui alatan. TypeScript menyediakan keselamatan jenis yang lebih baik untuk aplikasi Vue, membantu pembangun mencari dan mengelakkan ralat jenis semasa menulis kod. Dalam artikel ini, kita akan membincangkan cara menggunakan TypeScript untuk semakan jenis dalam Vue.

1. Pasang Vue dan TypeScript

Mula-mula, pasang Vue dan TypeScript. Vue dan TypeScript boleh dipasang terus menggunakan Vue CLI atau npm, atau menggunakan pautan CDN untuk memasang Vue. Selepas pemasangan selesai, kita perlu menggunakan TypeScript dalam aplikasi Vue.

2. Mengkonfigurasi TypeScript

Untuk Vue mengenali TypeScript, kami perlu menambah fail konfigurasi TypeScript pada aplikasi Vue. TypeScript boleh dikonfigurasikan dengan mencipta fail tsconfig.json. Dalam fail ini, beberapa pilihan konfigurasi perlu ditetapkan, seperti:

{
  "compilerOptions": {
    "target": "es5",
    "module": "es2015",
    "strict": true,
    "esModuleInterop": true,
    "noImplicitAny": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "allowSyntheticDefaultImports": true
  },
  "include": [
    "src/**/*"
  ],
  "exclude": [
    "node_modules"
  ]
}

Dalam konfigurasi di atas, kami menetapkan pilihan kompilasi kepada es5, menggunakan spesifikasi modular es2015 dan menghidupkan mod jenis ketat dan arbitrari tersirat semak taip , parsing modul nod. Selain itu, pilihan konfigurasi include digunakan untuk menentukan fail sumber yang perlu disusun dan pilihan exclude mengecualikan fail atau folder yang tidak perlu disusun.

3. Menggunakan TypeScript dalam Komponen

Sekarang kita telah mengkonfigurasi Vue dan TypeScript, kita perlu memastikan bahawa jenis TypeScript digunakan dengan betul dalam komponen. Dalam Vue, anda boleh menentukan jenis sifat dan kaedah komponen dengan menulis antara muka TypeScript untuk komponen tersebut. Contohnya:

<template>
  <div>
    <h1>{{ title }}</h1>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue';

interface HelloWorldProps {
  title: string;
}

@Component
export default class HelloWorld extends Vue {
  title!: HelloWorldProps['title'];
}
</script>

Dalam kod di atas, kami telah mencipta antara muka bernama HelloWorld untuk komponen HelloWorldProps. Antara muka ini mentakrifkan jenis atribut title komponen sebagai rentetan. Kemudian, dalam komponen, kami menggunakan sintaks kelas TypeScript dan mewarisi kelas Vue untuk menulis komponen. Atribut title dalam kelas diakhiri dengan tanda seru, yang bermaksud ia adalah atribut bukan kosong.

4. Menggunakan Penghias

Dalam Vue, anda juga boleh menggunakan penghias untuk menulis kod TypeScript. Komponen kelas Vue ialah perpustakaan yang sangat berguna yang menyediakan satu set penghias untuk membantu kami menulis kod TypeScript.

Mula-mula, anda perlu memasang Komponen Kelas Vue dan Penghias Harta Vue menggunakan npm:

npm install vue-class-component vue-property-decorator --save-dev

Kemudian, anda boleh menggunakan penghias dalam komponen untuk menentukan jenis sifat dan kaedah, contohnya:

<template>
  <div>
    <h1>{{ title }}</h1>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';

@Component({
  props: {
    title: {
      type: String,
      required: true,
    },
  },
})
export default class HelloWorld extends Vue {
  get titleUpper(): string {
    return this.title.toUpperCase();
  }
}
</script>

Dalam kod di atas, kami menggunakan penghias @Component dalam pustaka Penghias Harta Vue untuk mentakrifkan sifat komponen, termasuk jenis atribut tajuk. Dalam kelas, kami mentakrifkan kaedah getter titleUpper untuk mengembalikan nilai atribut tajuk huruf besar.

5. Ringkasan

Artikel ini memperkenalkan cara menggunakan TypeScript untuk semakan jenis dalam Vue, termasuk mengkonfigurasi TypeScript dan menggunakan antara muka TypeScript dan penghias dalam komponen. Dengan menggunakan TypeScript, kami boleh membantu aplikasi Vue mencapai keselamatan jenis, mengelakkan ralat jenis dan pepijat semasa proses pembangunan, dan meningkatkan kebolehselenggaraan dan kebolehskalaan aplikasi.

Atas ialah kandungan terperinci Cara menggunakan skrip taip untuk semakan jenis dalam Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!