टाइपस्क्रिप्ट और प्रतिक्रिया

जावास्क्रिप्ट विकास कभी-कभी एक जासूस की तरह हो जाता है। किसी और के कोड को कैसे समझें? यह अच्छा है अगर डेवलपर के पास नामकरण चर का सूक्ष्म कौशल है ताकि दूसरों को बात समझ में आए। लेकिन क्या होगा अगर टीम के सदस्य अभी भी अपने सहयोगी के इरादे को समझने में सक्षम नहीं हैं? कैसे समझें कि एक फ़ंक्शन के तर्क में क्या आता है?

मान लीजिए कि फ़ंक्शन तर्क को त्रुटि कहा जाता है। संभवतः त्रुटियों में एक सरणी है। सबसे अधिक संभावना लाइनें? खैर, यह सरणी समझ में आता है। आखिरकार, इसकी लंबाई को और अधिक जांचा जाता है। लेकिन लंबाई की संपत्ति में भी एक स्ट्रिंग है। ऐसा लगता है कि वास्तव में यह पता लगाने के लिए, आपको एक ब्रेकपॉइंट लगाने और स्क्रिप्ट चलाने की आवश्यकता है। फिर पूरी तरह से यूआई पर स्क्रिप्ट के माध्यम से जाना (उदाहरण के लिए, हमें फॉर्म के अंतिम चरण की आवश्यकता है)। अब देवटूलों में यह देखा जा सकता है कि लंबाई क्षेत्र सहित विशिष्ट क्षेत्रों के एक सेट के साथ त्रुटियां एक वस्तु हैं।

जावास्क्रिप्ट कोड को पार्स करने में ऐसी अस्पष्टता डेवलपर समय की बर्बादी की ओर ले जाती है। इस मामले में एक अच्छा समाधान टाइपस्क्रिप्ट (इसके बाद ts) हो सकता है। आप इसे अगली परियोजना में उपयोग कर सकते हैं, या इससे भी बेहतर, मौजूदा में ts समर्थन कर सकते हैं। उसके बाद, किसी और के कोड को समझने का समय काफी कम हो जाएगा। दरअसल, किसी भी डेटा की संरचना को समझने के लिए, एक क्लिक ही पर्याप्त है। आप डेटा के साथ काम करने के तर्क पर ध्यान केंद्रित कर सकते हैं और किसी भी समय जानते हैं कि आप कोड को स्पष्ट रूप से समझते हैं।

Ts के कुछ फायदों पर ध्यान दिया जाना चाहिए। यह व्यापक रूप से विभिन्न रूपरेखाओं में उपयोग किया जाता है और जावास्क्रिप्ट से निकटता से संबंधित है। Ts का विकास फ्रंटएंड डेवलपर्स की जरूरतों से निर्धारित होता है।

यह लेख टूडो अनुप्रयोगों के विकास को प्रस्तुत करता है, लेकिन दिलचस्प बिंदुओं का केवल एक संक्षिप्त विवरण। पूर्ण कोड यहां पाया जा सकता है ।

मैंने प्रतिक्रिया, टाइपस्क्रिप्ट और मोबाइल का इस्तेमाल किया। Mobx अनुप्रयोग स्थिति के प्रबंधन के लिए एक लचीला उपकरण है। Mobx संक्षिप्त है। यह आपको एक तुल्यकालिक शैली में प्रतिक्रिया घटकों की स्थिति के साथ काम करने की अनुमति देता है। जैसे कोई समस्या नहीं:

this.setState({name: 'another string'}); alert(this.state.name); 

इस स्थिति में, पुराना स्थिति .नाम प्रदर्शित होता है।

इसके अलावा, mobx सुविधाजनक है और ts प्रकारों के साथ काम करने में हस्तक्षेप नहीं करता है। आप राज्य को अलग कक्षाओं के रूप में या सीधे प्रतिक्रिया घटक के अंदर का वर्णन कर सकते हैं।

सादगी के लिए, सभी घटकों को घटक फ़ोल्डर में रखा जाता है। घटक के फ़ोल्डर में एक वर्ग को राज्य के विवरण के साथ परिभाषित किया जाता है जो घटक के प्रदर्शन और संचालन के साथ तार्किक रूप से जुड़ा हुआ है।

TodoItem फ़ोल्डर में प्रतिक्रिया घटक TodoItem.tsx, TodoItem.module.scss शैलियों के साथ एक फ़ाइल और एक TodoItemState.ts स्थिति फ़ाइल के साथ एक फ़ाइल होती है।

TodoItemState.ts डेटा संग्रहीत करने, उन्हें कैसे एक्सेस करने और उन्हें बदलने के नियमों के लिए फ़ील्ड का वर्णन करता है। OOP और ts के लिए संभावनाओं की श्रेणी बहुत बड़ी है। डेटा का हिस्सा निजी हो सकता है, भाग केवल पढ़ने के लिए है और इसी तरह। @O डेकोरेटर का उपयोग करते हुए, देखने योग्य फ़ील्ड निर्दिष्ट किए जाते हैं। रिएक्ट घटक उनके परिवर्तनों पर प्रतिक्रिया करते हैं। राज्य को बदलने के तरीकों में @ ए ( एक्शन ) डेकोरेटर का उपयोग किया जाता है।

 // TodoItemState.ts import { action as a, observable as o } from 'mobx'; export interface ITodoItem { id: string; name: string; completed: boolean; } export class TodoItemState { @o public readonly value: ITodoItem; @o public isEditMode: boolean = false; constructor(value: ITodoItem) { this.value = value; } @a public setIsEditMode = (value: boolean = true) => { this.isEditMode = value; }; @a public editName = (name: string) => { this.value.name = name; }; @a public editCompleted = (completed: boolean) => { this.value.completed = completed; }; } 

TodoItem.tsx में, केवल दो गुणों को सहारा में पारित किया जाता है। मोबेक्स में, जटिल डेटा संरचनाओं को प्रॉपर प्रतिक्रिया घटक में स्थानांतरित करने के लिए एक आवेदन के समग्र प्रदर्शन के लिए यह इष्टतम है। चूँकि हम ts का उपयोग करते हैं, इसलिए हम घटक द्वारा स्वीकृत वस्तु के प्रकार को ठीक से इंगित कर सकते हैं।

 // TodoItem.tsx import React, { ChangeEventHandler } from 'react'; import { observer } from 'mobx-react'; import { TodoItemState } from './TodoItemState'; import { EditModal } from 'components/EditModal'; import classNames from 'classnames'; import classes from './TodoItem.module.scss'; export interface ITodoItemProps { todo: TodoItemState; onDelete: (id: string) => void; } @observer export class TodoItem extends React.Component<ITodoItemProps> { private handleCompletedChange: ChangeEventHandler<HTMLInputElement> = e => { const { todo: { editCompleted }, } = this.props; editCompleted(e.target.checked); }; private handleDelete = () => { const { onDelete, todo } = this.props; onDelete(todo.value.id); }; private get editModal() { const { todo } = this.props; if (!todo.isEditMode) return null; return ( <EditModal name={todo.value.name} onSubmit={this.handleSubmitEditName} onClose={this.closeEditModal} /> ); } private handleSubmitEditName = (name: string) => { const { todo } = this.props; todo.editName(name); this.closeEditModal(); }; private closeEditModal = () => { const { todo } = this.props; todo.setIsEditMode(false); }; private openEditModal = () => { const { todo } = this.props; todo.setIsEditMode(); }; render() { const { todo } = this.props; const { name, completed } = todo.value; return ( <div className={classes.root}> <input className={classes.chackbox} type="checkbox" checked={completed} onChange={this.handleCompletedChange} /> <div onClick={this.openEditModal} className={classNames( classes.name, completed && classes.completedName )}> {name} </div> <button onClick={this.handleDelete}>del</button> {this.editModal} </div> ); } } 

ITodoItemProps इंटरफ़ेस, TodoItemState के प्रकार की संपत्ति का वर्णन करता है। इस प्रकार, प्रतिक्रिया घटक के अंदर, हमें प्रदर्शन और उन्हें बदलने के तरीकों के लिए डेटा प्रदान किया जाता है। इसके अलावा, बदलते डेटा पर प्रतिबंधों को राज्य कक्षा और कार्यों के आधार पर प्रतिक्रिया घटक के तरीकों में वर्णित किया जा सकता है।

टोडो लिस्ट घटक टोडोइटेम के समान है। TodoListState.ts में, आप @c (@computed) डेकोरेटर के साथ गेटर्स देख सकते हैं। ये साधारण श्रेणी के गेटर्स हैं, केवल उनके मूल्यों को याद किया जाता है और उनकी निर्भरता में बदलाव होने पर पुनरावृत्ति की जाती है। डिज़ाइन द्वारा गणना रेड्यूक्स चयनकर्ताओं के समान है। आसानी से, यह निर्भरता की सूची को स्पष्ट रूप से पारित करने के लिए, React.memo या reselect की तरह आवश्यक नहीं है। प्रतिक्रियाशील घटक गणना किए गए परिवर्तनों के साथ-साथ अवलोकन योग्य परिवर्तनों पर प्रतिक्रिया करते हैं। एक दिलचस्प विशेषता यह है कि मूल्य की पुनर्गणना तब नहीं होती है यदि गणना वर्तमान में प्रतिपादन में शामिल नहीं है (जो संसाधनों को बचाता है)। इसलिए, निरंतर निर्भरता के मूल्यों को बनाए रखने के बावजूद, गणना की जा सकती है (गणना किए गए मूल्य को बचाने के लिए मोबाइल को स्पष्ट रूप से बताने का एक तरीका है)।

 // TodoListState.ts import { action as a, observable as o, computed as c } from 'mobx'; import { ITodoItem, TodoItemState } from 'components/TodoItem'; export enum TCurrentView { completed, active, all, } export class TodoListState { @o public currentView: TCurrentView = TCurrentView.all; @o private _todos: TodoItemState[] = []; @c public get todos(): TodoItemState[] { switch (this.currentView) { case TCurrentView.active: return this.activeTodos; case TCurrentView.completed: return this.completedTodos; default: return this._todos; } } @c public get completedTodos() { return this._todos.filter(t => t.value.completed); } @c public get activeTodos() { return this._todos.filter(t => !t.value.completed); } @a public setTodos(todos: ITodoItem[]) { this._todos = todos.map(t => new TodoItemState(t)); } @a public addTodo = (todo: ITodoItem) => { this._todos.push(new TodoItemState(todo)); }; @a public removeTodo = (id: string): boolean => { const index = this._todos.findIndex(todo => todo.value.id === id); if (index === -1) return false; this._todos.splice(index, 1); return true; }; } 

प्रवेश टूडू सूची केवल एक गणना क्षेत्र के माध्यम से खुली है, जहां, देखने के मोड के आधार पर, आवश्यक फ़िल्टर किए गए डेटा सेट को लौटाया जाता है (पूरा, सक्रिय या सभी टूडू)। टूडो निर्भरता में गणना की गई पूर्णटोडोस, सक्रियटोडोस और निजी अवलोकन योग्य _todos फ़ील्ड निर्दिष्ट हैं।

ऐप के मुख्य घटक पर विचार करें। यह नए टूडू और टूडू सूची को जोड़ने के लिए एक रूप प्रदान करता है। मुख्य AppSate राज्य का एक उदाहरण तुरन्त बनाया जाता है।

 // App.tsx import React from 'react'; import { observer } from 'mobx-react'; import { TodoList, initialTodos } from 'components/TodoList'; import { AddTodo } from 'components/AddTodo'; import { AppState } from './AppState'; import classes from './App.module.scss'; export interface IAppProps {} @observer export class App extends React.Component<IAppProps> { private appState = new AppState(); constructor(props: IAppProps) { super(props); this.appState.todoList.setTodos(initialTodos); } render() { const { addTodo, todoList } = this.appState; return ( <div className={classes.root}> <div className={classes.container}> <AddTodo onAdd={addTodo} /> <TodoList todoListState={todoList} /> </div> </div> ); } } 

AppState फ़ील्ड में TodoListState वर्ग का एक उदाहरण होता है, जिसमें TodoList घटक और नए todo को जोड़ने की विधि प्रदर्शित होती है, जो AddTodo घटक को दी जाती है।

 // AppState.ts import { action as a } from 'mobx'; import { TodoListState } from 'components/TodoList'; import { ITodoItem } from 'components/TodoItem'; export class AppState { public todoList = new TodoListState(); @a public addTodo = (value: string) => { const newTodo: ITodoItem = { id: Date.now().toString(), name: value, completed: false, }; this.todoList.addTodo(newTodo); }; } 

AddTodo घटक में एक पृथक स्थिति है। सामान्य राज्य से इसकी कोई पहुंच नहीं है। AppState का एकमात्र कनेक्शन एक फॉर्म सबमिट करते समय appState.addTodo विधि के माध्यम से होता है।
AddTodo घटक के राज्य के लिए, फॉर्मस्टेट लाइब्रेरी का उपयोग किया जाता है, जो ts और mobx के साथ महान दोस्त हैं। फ़ॉर्मेट आपको आसानी से फ़ॉर्म, मान्य फ़ॉर्म और बहुत कुछ के साथ काम करने की अनुमति देता है। प्रपत्र में केवल एक आवश्यक फ़ील्ड नाम है।

 // AddTodoState.ts import { FormState, FieldState } from 'formstate'; export class AddTodoState { // Create a field public name = new FieldState('').validators( val => !val && 'name is required' ); // Compose fields into a form public form = new FormState({ name: this.name, }); public onSubmit = async () => { // Validate all fields const res = await this.form.validate(); // If any errors you would know if (res.hasError) { console.error(this.form.error); return; } const name = this.name.$; this.form.reset(); return name; }; } 

सामान्य तौर पर, सभी घटकों के व्यवहार का पूरी तरह से वर्णन करने का कोई मतलब नहीं है। पूरा कोड यहाँ दिया गया है ।

यह लेख लेखक के सरल, लचीले और संरचित कोड को लिखने की कोशिश का वर्णन करता है जिसे बनाए रखना आसान है। रिएक्ट यूआई को घटकों में विभाजित करता है। घटक राज्य कक्षाओं का वर्णन करते हैं (प्रत्येक वर्ग को अलग से परीक्षण किया जा सकता है)। कार्यों के आधार पर राज्यों के उदाहरण या तो घटक में या उच्च स्तर पर बनाए जाते हैं। पर्याप्त रूप से सुविधाजनक, आप टाइपस्क्रिप्ट के लिए वर्ग फ़ील्ड प्रकार और घटक संपत्ति प्रकार निर्दिष्ट कर सकते हैं। Mobx के लिए धन्यवाद, हम डेवलपर के लिए लगभग अपूर्ण रूप से कर सकते हैं, प्रतिक्रिया घटकों को डेटा परिवर्तनों पर प्रतिक्रिया दें।