Loading...

React in Hindi – Static Type Checking

  • Introduction to react static type checking in Hindi
  • Flow and TypeScript static type checkers in Hindi

Introduction to React Static Type Checking

Static type checking की मदद से application को run करने के दौरान आने वाली problems को पहले ही identify करके दूर किया जा सकता है। इसके लिए static type checkers का प्रयोग किया जा सकता है।

Static type checkers के प्रयोग से developer का workflow भी improve होता है। उदाहरण के लिए static type checkers auto completion feature provide करते है जिससे developer को code को जल्दी और बिना syntactical errors के लिखने में मदद मिलती है।

React के साथ Flow और TypeScript type checkers को use करना recommend किया गया है। आइए इनके बारे में detail से जानने का प्रयास करते है।

Flow

Flow आपके द्वारा लिखे जाने वाले JavaScript code के लिए एक static type checker है। जो javascript variables और functions आप create करते है और जो React components आप create करते है Flow उनको special type syntax के साथ annotate करता है और mistakes को शुरुआत में ही identify कर लेता है।

Flow को Facebook द्वारा develope किया गया है और इसे ज़्यादातर React के साथ ही static type checking के लिए use किया जाता है।

यदि आप flow को use करना चाहते है तो आपको इसे अपने project में एक dependency के रूप में add करना होगा, compiled code से flow syntax को अलग भी करना होगा, type annotations add करने होंगे और उन्हें check करने के लिए flow को run करना होगा।

Adding Flow to Project

Flow को अपने project में use करने के लिए सबसे पहले आपको use install करना होगा।

यदि आप Yarn का प्रयोग कर रहे है तो नीचे दी गयी command से Flow का latest version install कर सकते है।

yarn dev --dev flow-bin

यदि आप npm का प्रयोग कर रहे तो है तो नीचे दी गयी command से अपने project में Flow install कर सकते है।

npm install --save-dev flow-bin

Flow को install करने के बाद आपको package.json file के scripts section में Flow को add करना होगा। ऐसा करना इसलिए आवश्यक है ताकि आप flow को terminal से प्रयोग कर सके।

"scripts":{
  //...

  "flow":"flow",

  //...
},

इसके बाद आपको Flow configuration file create करनी होगी जिसे commit किया जाएगा। यदि आप Yarn का प्रयोग कर रहे है तो ऐसा इस प्रकार कर सकते है।

yarn run flow init

यदि आप npm का प्रयोग कर रहे है तो ऐसा इस प्रकार कर सकते है।

npm run flow init

Flow type annotations के लिए special syntax add करके JavaScript language को extend करता है। लेकिन यह special syntax browsers द्वारा identifiable नहीं होता है। इसलिए यह आवश्यक है की JavaScript bundle के browser तक पहुँचने से पहले इस special syntax को remove कर दिया जाए।

यदि आप Create React App के साथ project बना रहे है तो इस कार्य के लिए आपको कुछ भी करने की आवश्यकता नहीं होती है। क्योंकि Create React App Flow द्वारा add किए गए special syntax को automatically remove कर देती है।

लेकिन यदि आपने अपने project के लिए Babel को manually configure किया हुआ है तो आपको Flow के लिए special presets add करने होंगे।

यदि आप Yarn use कर रहे है तो नीचे दी गयी command execute करें।

yarn add --dev babel-preset-flow

यदि आप npm use कर रहे है तो नीचे दी गयी command execute करें।

npm install --save-dev babel-preset-flow

इसके बाद आपको Babel configuration में Flow preset add करना होगा। मान लीजिए आप Babel को babelrc file के द्वारा configure करते है तो flow preset इस प्रकार add किया जाएगा।

{
  "presets":[
    "flow",
    "react"
  ]
}

इसके बाद आप अपने code में Flow syntax को use कर सकते है। हालाँकि Flow को use करने के लिए React preset की आवश्यकता नहीं होती है क्योंकि Flow ख़ुद ही JSX को समझ सकता है। लेकिन फिर भी ये दोनो अधिकतर एक साथ use किए जाते है।

यदि आप Create React App या Babel के अलावा कोई दूसरा build setup use कर रहे है तो इस कार्य के लिए flow-remove-types use कर सकते है।

इन steps को follow करने के बाद आप Flow को run कर सकते है। Yarn में Flow को इस प्रकार run किया जाता है।

yarn flow 

npm में flow को इस प्रकार run किया जाता है।

npm run flow 

यदि आपका Flow installation सही होगा तो आपको No errors message show होगा। इसका अर्थ है की कोई error नहीं आयी है तो Flow installation successful था।

Flow type annotations को file की शुरुआत में इस प्रकार add किया जाता है।

// @flow 

By default Flow उन्हीं files को check करता है जिनमें यह annotation add किया गया हो। हालंकि इसे आप सभी files को check करने के लिए configure कर सकते है फिर चाहे उन files में यह annotation include किया गया हो या नहीं।

TypeScript

TypeScript Microsoft द्वारा develop की गयी एक programming language है। यह JavaScript का एक typed superset है। इसका स्वयं का compiler होता है।

TypeScript द्वारा errors और bugs build time पर ही catch कर ली जाती है। इससे app के live होने पर कोई problem नहीं होती है।

TypeScript को use करने के लिए आपको इसे project में dependency के रूप में add करना होगा, TypeScript compiler के options को configure करना होगा, सही file extensions का उपयोग करना होगा और जिन libraries को आप use करते है उनके लिए definitions add करनी होगी।

Using TypeScript with Create React App Projects

यदि आप Create React App का प्रयोग कर रहे है तो TypeScript को use करने के लिए आपको कुछ भी करने की आवश्यकता नहीं है। Create React App TypeScript को by default support करती है।

Create React App में TypeScript के साथ project create करने के लिए आप नीचे दी गयी common run कर सकते है।

npx create-react-app my-app --typescript

Using TypeScript with Other Setup Projects

सबसे पहले आप TypeScript को install करते है। इसके लिए Yarn और npm में नीचे दी गयी commands use की जाती है।

//Yarn 

yarn add --dev typescript
// npm 

npm install --save-dev typescript 

TypeScript install करने से आपको tsc command का access प्राप्त हो जाता है। Configuration से पूर्व आप tsc command को package.json file के scripts section में add करते है।

"scripts":{
  "build": "tsc",
   //...
},

इसके बाद आप compiler को configure करते है। जब तक आप compiler को configure नहीं करते है तब तक उसको पता नहीं होता है की क्या करना और वह किसी काम का नहीं होता है।

Compiler को configure करने के लिए tsconfig.json file को edit किया जाता है। इस file को generate करने कि लिए आप Yarn में नीचे दी गयी command run की जाती है।

yarn run tsc --init

यदि आप npm use कर रहे है तो नीचे दी गयी command को run कर सकते है।

npx tsc --init 

जब आप tsconfig.json file को देखेंगे तो पाएँगे की बहुत सारे options available है। लेकिन इन सभी options में से आपको rootDir और outDir को ही configure करने की आवश्यकता है।

rootDir option का प्रयोग compiler को यह बताने के लिए किया जाता है की source file कहाँ पर store है और outDir option का प्रयोग यह बताने के लिए किया जाता है की output कहाँ store किया जाएगा। ऐसा इसलिए किया जाता है ताकि source को outcome से differentiate किया जा सके।

इस कार्य के लिए सबसे पहले यह आवश्यक है की आपका project structure इस प्रकार हो की उसमें source code src directory में हो।

इसके बाद आप compiler को बता सकते है की source code कहाँ है और output कहाँ जाना चाहिए।

// tsconfig.json

{
  "compilerOptions":{
     //...
     "rootDir": "src",
     "outDir": "build"
     //...
  },
}

अब जब आप build script को run करेंगे तो compiler generate की गयी javascript को build folder store करेगा। आपको generate javascript को src folder में नहीं store करना चाहिए। इसके लिए आपको .gitignore में build folder create करना चाहिए।

React में आप components को .js file में store करते है। TypeScript में दो file extensions होते है। इनमें .ts default file extension है और .tsx उन files के लिए प्रयोग किया जाता है जिनमें JSX का प्रयोग होता है।

इसके बाद आप TypeScript को run कर सकते है। Yarn में TypeScript को run करने के लिए आप नीचे दी गयी command use कर सकते है।

yarn build 

यदि आप npm use कर रहे तो TypeScript को इस प्रकार run कर सकते है।

npm run build 

यदि आपको कोई output show नहीं होता है तो इसका अर्थ है की TypeScript configuration successful रहा है।

इसके बाद आप उन libraries के लिए definitions add करते है जिन्हें आप use करते है। इस कार्य के लिए compiler declaration files पर निर्भर होता है।

एक declaration file किसी library के बारे में सम्पूर्ण जानकारी प्रदान करती है। इसके द्वारा आप npm की तरह ही JavaScript libraries को अपने project में add कर सकते है।

किसी library का declaration प्राप्त करने के दो तरीक़े होते है। पहला तरीक़ा है की library की declaration file उसके bundle में ही available है। ऐसी library को आप तुरंत use कर सकते है।

Check करने के लिए की library में declaration file bundled है की नहीं आप project में index.d.js file को check कर सकते है। कई libraries में यह जानकारी package.json file के typings और types section के under भी दी जाती है।

दूसरा तरीक़ा है की library का declaration प्राप्त करने के लिए DefinitelyTyped का प्रयोग किया जाए। यह तरीक़ा उन libraries के लिए है जिनमें declaration file bundled नहीं है।

DefinitelyTyped libraries के declaritons की बहुत बड़ी repository है। इस repository में declarations crowd-sourced होते है और Microsoft और कुछ open source contributors द्वारा manage किए जाते है।

उदाहरण के लिए React library का declaration उसमें bundled नहीं है। इसे DefinitelyTyped repository से प्राप्त करने के लिए आप नीचे दी गयी commands use कर सकते है।

#yarn 
yarn add --dev @types/react

#npm 
npm i --save-dev @types/react

कई बार ऐसा भी हो सकता है की जिस package को आप use करना चाहते है वह ना तो अपनी declaration file को bundle करता है है और ना ही उसकी declaration file DefinitelyTyped repository में available है, ऐसी situation में एक local declaration file create की जा सकती है।

इसके लिए आप source directory के root में declarations.d.ts create करते है। इस file में एक simple declaration इस प्रकार हो सकता है।

declare module 'querystring'{
  export function stringify(val: object): string
  export function parse(val: string): object 
}

इन instructions को follow करके आप TypeScript के साथ code लिखना शुरू कर सकते है।