Vue Academy · درس

إعداد TypeScript في مشاريع Vue

‏vite.config.ts وtsconfig.json وvue-tsc، وlang='ts' في SFCs، ودعم TypeScript في IDE

الدرس 1 من 413 خطوة

إعداد TypeScript في مشاريع Vue درس مجاني في Vue Academy على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Vue Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Vue Academy 4 دروس في المجموع.

TypeScript في Vue 3

أُعيدت كتابة Vue 3 باستخدام TypeScript، لذا توفر دعمًا ممتازًا للأنواع. يكتشف المشروع المُعد جيدًا الأخطاء وقت الترجمة، ويوفر إكمالًا تلقائيًا رائعًا في المحرر داخل ملفات .vue.

تهيئة المشروع باستخدام TS

أسهل بداية هي استخدام create-vue، الذي يسألكم عمّا إذا كنتم تريدون إضافة TypeScript، ويجهّز tsconfig.json وvue-tsc وأدوات التطوير المناسبة.

npm create vue@latest
# select "Add TypeScript? Yes"

أساسيات tsconfig.json

يتحكّم tsconfig.json في عملية التجميع. وأهم إعداد لاكتشاف الأخطاء هو الوضع الصارم.

{
  "compilerOptions": {
    "strict": true,
    "target": "ESNext",
    "module": "ESNext"
  }
}

لماذا يُعد الوضع الصارم مهمًا

يُفعّل strict: true إعدادات مثل strictNullChecks وnoImplicitAny وغيرها. وهذا يجبركم على معالجة null/undefined ويمنع تسرّب القيم غير محددة النوع.

أسماء المسارات المستعارة

يربط الاسم المستعار @/ بمجلد src، وبذلك تظل عمليات الاستيراد واضحة مهما كان عمق الملف. اضبطوه في كلٍّ من tsconfig.json وأداة التجميع.

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

استخدام الاسم المستعار

تشير عمليات الاستيراد الآن إلى الوحدات من جذر المشروع، بدلًا من سلاسل المسارات النسبية ../../.

import Button from '@/components/Button.vue'
import { useAuth } from '@/composables/useAuth'

TypeScript في مكوّنات SFC

لاستخدام TypeScript داخل مكوّن ملف واحد، أضيفوا lang="ts" إلى وسم script. ومع <script setup> يتيح ذلك استخدام وحدات الماكرو مع الأنواع.

<script setup lang="ts">
const count: number = 0
</script>

فحص أنواع مكوّنات SFC

لا يفهم المترجم العادي tsc ملفات .vue. توفّر Vue أداة vue-tsc، وهي غلاف يفحص أنواع القوالب والبرامج النصية معًا.

vue-tsc --noEmit

إضافة سكربت للفحص

أضيفوا سكربتًا إلى package.json حتى تتمكّن CI وأنتم من التحقّق من الأنواع باستخدام أمر واحد.

{
  "scripts": {
    "type-check": "vue-tsc --noEmit"
  }
}

دعم المحرر باستخدام Volar

يوفّر امتداد Volar (Vue - Official) في VS Code ميزات TypeScript الذكية داخل ملفات .vue، مثل الإكمال التلقائي والانتقال إلى التعريف واكتشاف أخطاء الأنواع في القالب. عطّلوا Vetur القديم لتجنّب التعارضات.

وضع Takeover

يمكن لـVolar العمل في Takeover Mode، ليحلّ محل امتداد TS المدمج ويتولّى التعامل مع ملفات .ts و.vue معًا. يحسّن ذلك الأداء والاتساق في المشاريع الكبيرة.

اختبار سريع

اختبروا مدى معرفتكم بإعداد TypeScript.

أجب عليها في الدرس التفاعلي

مراجعة

لقد أعددتم TypeScript في Vue:

فعّلوا الوضع الصارم في tsconfig.json للحصول على أقوى عمليات الفحص.
اضبطوا الاسم المستعار للمسار @/* للإشارة إلى src.
أضيفوا lang="ts" إلى سكربتات SFC.
افحصوا الأنواع باستخدام vue-tsc --noEmit واستخدموا امتداد Volar في VS Code.

البدء مجانًا

تعلم HTML مع معلم ذكاء اصطناعي — مجانًا

اكتب وقم بتشغيل أكوادك الفعلية في المتصفح، واحصل على مساعدة فورية من معلم ذكاء اصطناعي متاح 24/7، واستمر من حيث توقفت على الويب أو في التطبيق.

الدورات: 42
الدروس: 156

ابدأ التعلم مجانًا عرض الدورة الكاملة

الأسئلة الشائعة

هل درس «إعداد TypeScript في مشاريع Vue» مجاني؟

نعم — نص درس «إعداد TypeScript في مشاريع Vue» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Vue Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Vue Academy 4 دروس في المجموع.

ماذا ستتعلم في «إعداد TypeScript في مشاريع Vue»؟

‏vite.config.ts وtsconfig.json وvue-tsc، وlang='ts' في SFCs، ودعم TypeScript في IDE تتمرن على Vue Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Vue Academy؟

لا تُشترط خبرة سابقة. Vue Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.

كم من الوقت يستغرق درس «إعداد TypeScript في مشاريع Vue»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Vue Academy هذا؟

نعم. كل درس في Vue Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

إعداد TypeScript في مشاريع Vue
خصائص Props وEmits مكتوبة الأنواع باستخدام defineProps/defineEmits
كتابة أنواع Composables وRefs
مكوّنات Vue العامة

← العودة إلى Vue Academy