Wawa Sensei logo

Typescript

Starter pack

यह कोर्स पूरी तरह से JavaScript में लिखा गया है, लेकिन आप TypeScript को भी React Three Fiber के साथ उपयोग कर सकते हैं।

TypeScript एक JavaScript का सुपरसेट है जो भाषा में टाइप्स जोड़ता है। यह त्रुटियों को जल्दी पकड़ने और ऑटो कम्प्लीशन और डॉक्यूमेंटेशन के साथ बेहतर डेवलपर अनुभव के लिए एक शानदार तरीका है।

TypeScript का उपयोग करना है या नहीं करना है, यह आपका निर्णय है। निर्णय लेने में मदद के लिए, यहाँ कुछ प्रश्न हैं जिन पर आपको विचार करना चाहिए:

  • आप किस प्रकार का प्रोजेक्ट बना रहे हैं: क्या आप 3D अनुभव का ड्राफ्ट बना रहे हैं या इसे शिप करने के इरादे से बना रहे हैं? क्या यह एक छोटा प्रोजेक्ट है या बड़ा? क्या इसे लंबे समय तक बनाए रखा जाना है?
  • आपकी टीम: क्या आप अकेले काम कर रहे हैं या दूसरों के साथ? टिप्पणियों की तरह ही, टाइप्स से आपका कोड दूसरों के लिए अधिक समझने योग्य बन सकता है।

इसमें सही या गलत उत्तर नहीं है, यह आपके प्रोजेक्ट के लिए सबसे अच्छा क्या है, इसे तय करने पर निर्भर करता है। चूँकि लाइब्रेरी TypeScript में लिखी गई है, आप इससे लाभ उठा सकते हैं भले ही आप JavaScript का उपयोग कर रहे हों।

हम एक साथ देखेंगे कि हमारे स्टार्टर प्रोजेक्ट को TypeScript में आसानी से कैसे परिवर्तित किया जाए और React Three Fiber के साथ इसका उपयोग कैसे किया जाए।

लेकिन यह पाठ TypeScript ट्यूटोरियल नहीं है, यदि आपके पास कोई अनुभव नहीं है और आप इसके बारे में अधिक जानना चाहते हैं, तो आपको यहाँ से शुरू करना चाहिए।

Setup

सेटअप पाठ में, हमने Vite का उपयोग करके स्क्रैच से एक नया प्रोजेक्ट बनाया था। यदि आप एक नया प्रोजेक्ट शुरू कर रहे हैं, तो आप वही चरणों का पालन कर सकते हैं और अपने प्रोजेक्ट के लिए TypeScript variant चुन सकते हैं बजाय कि JavaScript के (भूलें नहीं कि इसे उपयोग करने के लिए यहाँ वापस आना 🤭)।

आइए देखें कि मौजूदा प्रोजेक्ट को TypeScript में कैसे बदलें।

स्टार्टर प्रोजेक्ट सेटअप पाठ के अंतिम परिणाम के समान है, लेकिन चरण किसी भी प्रोजेक्ट के लिए समान हैं।

TypeScript स्थापित करें

सबसे पहले, हमें अपने प्रोजेक्ट में TypeScript स्थापित करने की आवश्यकता है। हम इसे निम्नलिखित कमांड के साथ कर सकते हैं:

yarn add -D typescript

-D TypeScript को एक dev dependency के रूप में स्थापित करेगा। (क्योंकि यह अंतिम production build में आवश्यक नहीं है)

TypeScript हमारे build प्रक्रिया में एक नया चरण जोड़ता है। हमें अपने TypeScript फाइलों को JavaScript में कम्पाइल करना होगा प्रोजेक्ट को रन करने से पहले। इसे करने के लिए, हमें अपने package.json build स्क्रिप्ट को निम्नलिखित में अपडेट करना होगा:

"build": "tsc && vite build"

tsc कमांड हमारे TypeScript फाइलों को JavaScript में कम्पाइल करेगा और vite build कमांड हमारे प्रोजेक्ट को सामान्य रूप से बिल्ड करेगा।

हमारे फाइल्स का extension .jsx की बजाय .tsx और .js की बजाय .ts हो जाएगा। package.json फाइल में, हम lint स्क्रिप्ट को इसे ध्यान में रखते हुए एडजस्ट कर सकते हैं:

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

TypeScript कॉन्फ़िगरेशन

हमें अपने प्रोजेक्ट की रूट पर एक tsconfig.json फाइल बनानी है ताकि TypeScript को कॉन्फ़िगर कर सकें:

{
  "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:

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

ये एक React प्रोजेक्ट के लिए डिफ़ॉल्ट विकल्प हैं जो Vite का उपयोग कर रहा है। आप इनके बारे में अधिक जानकारी compiler options documentation page पर पा सकते हैं।

ESLint configuration

हमें अपने .eslintrc.cjs फ़ाइल को TypeScript को ध्यान में रखते हुए अपडेट करने की आवश्यकता है:

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",
  },
};

इसके लिए दो नए पैकेज की आवश्यकता है:

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

End of lesson preview

To get access to the entire lesson, you need to purchase the course.

Buy now - $85
< React Three Fiber Hooks
Controls >