اجزای کلاس Vue با TypeScript

این یک موضوع قدیمی است، اما انجمن Vue هنوز در مورد پروژه های حرفه ای در Vue2 گیر کرده است و فکر می کنم اگر با کدهای قدیمی مواجه شدید، این نکته کوچک کمک خواهد کرد.

اجزای کلاس Vue یک نحو آشناتر برای نوشتن اجزای Vue با استفاده از کلاس ها به جای اشیاء ارائه می دهند. هنگامی که با TypeScript ترکیب می شود، تایپ ثابت، تکمیل خودکار بهتر و بررسی نوع بهبود یافته را دریافت می کنید. برای شروع کار با Vue Class Components و TypeScript، این مراحل را دنبال کنید:

نصب وابستگی ها:

مطمئن شوید که Node.js و npm را نصب کرده اید. سپس با استفاده از Vue CLI یک پروژه جدید ایجاد کنید:

npm install -g @vue/cli
vue create my-project

“انتخاب دستی ویژگی ها” را انتخاب کنید و TypeScript را به همراه هر ویژگی دیگری که نیاز دارید انتخاب کنید.

کامپوننت Vue Class را نصب کنید:

به پوشه پروژه جدید خود بروید و بسته های vue-class-component و vue-property-decorator را نصب کنید:

cd my-project
npm install vue-class-component vue-property-decorator

به روز رسانی main.ts:

در src/main.ts، مطمئن شوید که Vue را از ‘vue’ وارد کرده اید و از افزونه های لازم استفاده کنید:

import Vue from 'vue';
import App from './App.vue';

Vue.config.productionTip = false;

new Vue({
  render: (h) => h(App),
}).$mount('#app');

یک جزء مبتنی بر کلاس ایجاد کنید:

در src/components یک فایل جدید به نام HelloWorld.vue ایجاد کنید. این جزء کلاس محور شما خواهد بود:

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="onClick">Click me</button>
  </div>
</template>

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

@Component
export default class HelloWorld extends Vue {
  @Prop({ default: 'Hello, World!' }) private message!: string;

  private onClick() {
    this.$emit('clicked');
  }
}
</script>

در اینجا یک تفکیک کد آمده است:

• Vue، Component و Prop را از بسته vue-property-decorator وارد کنید.
• از دکوراتور @Component برای تعریف کلاس به عنوان یک جزء Vue استفاده کنید.
• کلاس Vue را برای ایجاد کلاس جزء خود گسترش دهید.
• از دکوراتور @Prop برای تعریف props برای کامپوننت استفاده کنید.
• متدها و سایر خصوصیات جزء را به عنوان اعضای کلاس تعریف کنید.

از مؤلفه مبتنی بر کلاس خود استفاده کنید:

اکنون می توانید از کامپوننت HelloWorld خود در کامپوننت Vue دیگر استفاده کنید:

<template>
  <div>
    <HelloWorld @clicked="onHelloWorldClicked" />
  </div>
</template>

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

@Component({
  components: {
    HelloWorld,
  },
})
export default class App extends Vue {
  private onHelloWorldClicked() {
    console.log('HelloWorld component was clicked');
  }
}
</script>

خودشه! اکنون اصول اولیه استفاده از کامپوننت های کلاس Vue با TypeScript را می دانید. این تنظیمات به شما امکان می‌دهد از قابلیت‌های بررسی نوع و تکمیل خودکار کد TypeScript در حین کار با مؤلفه‌های Vue استفاده کنید.

برای تبدیل کامپوننت های کلاس Vue به اجزای معمولی Vue، باید کامپوننت را با استفاده از سینتکس مبتنی بر شی بازنویسی کنید. در اینجا مثالی از نحوه تبدیل یک جزء ساده مبتنی بر کلاس به یک جزء معمولی Vue آورده شده است:

<!-- class-based component -->
<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

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

@Component
export default class HelloWorld extends Vue {
  private message="Hello, World!";
}
</script>

<!-- converted normal Vue component -->
<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  data() {
    return {
      message: 'Hello, World!',
    };
  },
});
</script>

این چیزی است که ما انجام دادیم:

• دکوراتور @Component را بردارید و کلاس Vue را گسترش دهید.
• یک تابع داده را تعریف کنید که یک شی را با ویژگی ها و داده های جزء برمی گرداند.
• از تابع defineComponent از بسته vue برای ایجاد کامپوننت استفاده کنید.

توجه داشته باشید که تابع داده برای تعریف داده‌های کامپوننت استفاده می‌شود، که مشابه ویژگی‌هایی است که با decorator @Prop در Vue Class Components تعریف شده است. همچنین می‌توانید گزینه‌های مؤلفه دیگر، مانند روش‌ها، محاسبه‌شده، و تماشاگران را با استفاده از توابع مشابه در تابع defineComponent تعریف کنید.

به خاطر داشته باشید که سینتکس Vue Class Component اغلب به دلیل بهبود خوانایی و قابلیت استفاده مجدد ترجیح داده می شود. اگر در حال تبدیل یک جزء بزرگ یا پیچیده هستید، با استفاده از کامپوننت های کلاس Vue، آن را به اجزای کوچکتر و قابل استفاده مجدد تغییر دهید.