تم كتابة هذا الدرس بالكامل باستخدام JavaScript ولكن يمكنك أيضًا استخدام TypeScript مع React Three Fiber.

TypeScript هي امتداد لـ JavaScript يضيف أنواعًا إلى اللغة. إنها طريقة رائعة لاكتشاف الأخطاء مبكرًا وللحصول على تجربة مطور أفضل مع الإكمال التلقائي والتوثيق.

اختيار استخدام TypeScript أو عدم استخدامه يعتمد عليك. لمساعدتك في اتخاذ القرار، إليك بعض الأسئلة التي يجب عليك التفكير فيها:

• نوع المشروع الذي تقوم ببنائه: هل تقوم بتجربة ثلاثية الأبعاد تجريبية أم تبني بهدف إطلاقها؟ هل هو مشروع صغير أم كبير؟ هل من المفترض أن يتم الحفاظ عليه لفترة طويلة؟
• فريقك: هل تعمل بمفردك أم مع أشخاص آخرين؟ مثل التعليقات، الأنواع تعد وسيلة رائعة لجعل الكود الخاص بك أكثر قابلية للفهم للآخرين.

لا توجد إجابة صحيحة أو خاطئة، الأمر متروك لك لتقرر ما هو الأفضل لمشروعك. بما أن المكتبة مكتوبة بـ TypeScript، يمكنك الاستفادة منها حتى إذا كنت تستخدم JavaScript.

معًا سنرى كيف نحول بسهولة مشروعنا المبدئي إلى TypeScript وكيفية استخدامه مع React Three Fiber.

لكن هذا الدرس ليس درسًا تعليميًا لـ TypeScript، إذا لم يكن لديك خبرة وتريد معرفة المزيد عنها، يجب عليك البدء هنا.

الإعداد

في درس الإعداد، قمنا بإنشاء مشروع جديد من الصفر باستخدام Vite. إذا كنت تبدأ مشروعًا جديدًا، يمكنك اتباع نفس الخطوات واختيار النسخة TypeScript لمشروعك بدلاً من النسخة JavaScript. (لا تنس العودة هنا بعد ذلك لاكتشاف كيفية استخدامه 🤭)

لنرى كيف نحول مشروعًا موجودًا إلى TypeScript بدلاً من ذلك.

المشروع المبدئي هو نفسه النتيجة النهائية لدرس الإعداد، ولكن الخطوات هي نفسها لأي مشروع.

تثبيت TypeScript

أولاً، نحتاج إلى تثبيت TypeScript في مشروعنا. يمكننا القيام بذلك باستخدام الأمر التالي:

Copy
yarn add -D typescript

سيقوم الخيار -D بتثبيت TypeScript كاعتماد تطوير (dev dependency). (لأنه غير مطلوب في بناء الإنتاج النهائي)

تضيف TypeScript خطوة جديدة إلى عملية البناء لدينا. نحتاج إلى تجميع ملفات TypeScript إلى JavaScript قبل تشغيل مشروعنا. للقيام بذلك، نحتاج إلى تحديث سكريبت البناء في package.json ليصبح كالتالي:

Copy
"build": "tsc && vite build"

سيقوم الأمر tsc بتجميع ملفات TypeScript إلى JavaScript وسينفذ الأمر vite build عملية بناء المشروع كالمعتاد.

سيصبح امتداد ملفاتنا .tsx بدلاً من .jsx و.ts بدلاً من .js. لازلنا في ملف package.json، يمكننا ضبط سكريبت lint ليأخذ ذلك في الاعتبار:

Copy
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",

إعدادات TypeScript

نحتاج إلى إنشاء ملف tsconfig.json في جذر مشروعنا لضبط إعدادات TypeScript:

Copy
{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

وملف tsconfig.node.json:

Copy
{
  "compilerOptions": {
    "composite": true,
    "skipLibCheck": true,
    "module": "ESNext",
    "moduleResolution": "bundler",
    "allowSyntheticDefaultImports": true
  },
  "include": ["vite.config.ts"]
}

هذه هي الخيارات الافتراضية لمشروع React باستخدام Vite. يمكنك العثور على مزيد من المعلومات عنها في صفحة توثيق خيارات المترجم.

تكوين ESLint

نحتاج إلى تحديث ملف .eslintrc.cjs ليأخذ بعين الاعتبار TypeScript:

Copy
module.exports = {
  env: { browser: true, es2020: true },
  extends: [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:react/jsx-runtime",
    "plugin:@typescript-eslint/recommended",
    "plugin:react-hooks/recommended",
    "plugin:@react-three/recommended",
  ],
  parser: "@typescript-eslint/parser",
  settings: { react: { version: "18.2" } },
  plugins: ["react-refresh"],
  rules: {
    "react-refresh/only-export-components": "warn",
  },
};

يتطلب حزمتين جديدتين:

Copy
yarn add -D @typescript-eslint/eslint-plugin @typescript-eslint/parser