Typoskript und reagieren

Die Entwicklung von Javascript wird manchmal wie ein Detektiv. Wie verstehe ich den Code eines anderen? Es ist gut, wenn der Entwickler die subtile Fähigkeit besitzt, Variablen zu benennen, damit andere den Punkt verstehen. Aber was ist, wenn die Teammitglieder die Absicht ihres Kollegen immer noch nicht immer verstehen können? Wie kann man verstehen, was in das Argument einer Funktion einfließt?

Angenommen, das Funktionsargument heißt Fehler. Wahrscheinlich ist in den Fehlern ein Array. Höchstwahrscheinlich Linien? Nun, dieses Array ist verständlich. Immerhin wird seine Länge weiter überprüft. Die Eigenschaft length hat jedoch auch eine Zeichenfolge. Es scheint, dass Sie einen Haltepunkt setzen und das Skript ausführen müssen, um es genau herauszufinden. Gehen Sie dann das Skript auf der Benutzeroberfläche vollständig durch (zum Beispiel benötigen wir den letzten Schritt des Formulars). In devtools ist nun ersichtlich, dass Fehler ein Objekt mit einer Reihe spezifischer Felder sind, einschließlich des Längenfelds.

Eine solche Mehrdeutigkeit beim Parsen von Javascript-Code führt zu einer Verschwendung von Entwicklerzeit. Eine gute Lösung in diesem Fall könnte das Typoskript sein (im Folgenden ts). Sie können es im nächsten Projekt verwenden oder, noch besser, die Unterstützung im vorhandenen Projekt vornehmen. Danach wird die Zeit zum Verstehen des Codes einer anderen Person erheblich verkürzt. Um die Struktur von Daten zu verstehen, reicht ein Klick aus. Sie können sich auf die Logik des Arbeitens mit Daten konzentrieren und jederzeit wissen, dass Sie den Code klar verstehen.

Einige Vorteile von ts sollten beachtet werden. Es ist in verschiedenen Frameworks weit verbreitet und eng mit Javascript verwandt. Die Entwicklung von ts wird von den Bedürfnissen der Frontend-Entwickler bestimmt.

Dieser Artikel beschreibt die Entwicklung von Aufgabenanwendungen, aber nur eine kurze Beschreibung interessanter Punkte. Den vollständigen Code finden Sie hier .

Ich habe React, Typoskript und Mobx verwendet. Mobx ist ein flexibles Tool zum Verwalten des Anwendungsstatus. Mobx ist prägnant. Sie können damit synchron mit dem Status der Reaktionskomponenten arbeiten. Kein Problem wie:

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

In diesem Fall wird der alte state.name angezeigt.

Darüber hinaus ist mobx praktisch und beeinträchtigt die Arbeit mit ts-Typen nicht. Sie können den Status als separate Klassen oder direkt in der Reaktionskomponente beschreiben.

Der Einfachheit halber werden alle Komponenten im Komponentenordner abgelegt. Im Ordner der Komponente wird eine Klasse mit einer Beschreibung des Status definiert, der logisch mit der Anzeige und dem Betrieb der Komponente verknüpft ist.

Der TodoItem-Ordner enthält eine Datei mit der Reaktionskomponente TodoItem.tsx, eine Datei mit den Stilen TodoItem.module.scss und eine Statusdatei TodoItemState.ts.

TodoItemState.ts beschreibt die Felder zum Speichern von Daten, den Zugriff darauf und die Regeln zum Ändern. Das Spektrum der Möglichkeiten ist dank OOP und ts sehr groß. Ein Teil der Daten kann privat sein, ein Teil ist schreibgeschützt und so weiter. Mit dem @ o-Dekorator werden beobachtbare Felder angegeben. Reaktionskomponenten reagieren auf ihre Veränderungen. Die Dekoratoren @a ( Aktion ) werden in Methoden zum Ändern des Status verwendet.

 // 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; }; } 

In TodoItem.tsx werden nur zwei Eigenschaften an Requisiten übergeben. In mobx ist es für die Gesamtleistung einer Anwendung optimal, komplexe Datenstrukturen auf die Requisitenreaktionskomponente zu übertragen. Da wir ts verwenden, können wir den von der Komponente akzeptierten Objekttyp genau angeben.

 // 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> ); } } 

Die ITodoItemProps-Schnittstelle beschreibt die todo-Eigenschaft vom Typ TodoItemState. Somit erhalten wir innerhalb der Reaktionskomponente Daten zur Anzeige und Methoden zu deren Änderung. Darüber hinaus können Einschränkungen beim Ändern von Daten je nach Aufgabenstellung sowohl in der Zustandsklasse als auch in den Methoden der Reaktionskomponente beschrieben werden.

Die TodoList-Komponente ähnelt TodoItem. In TodoListState.ts können Sie Getter mit dem Dekorator @c (@computed) sehen. Dies sind gewöhnliche Klassen-Getter, nur ihre Werte werden gespeichert und wiedergegeben, wenn sich ihre Abhängigkeiten ändern. Das vom Design berechnete Modell ähnelt Redux-Selektoren. Praktischerweise ist es nicht erforderlich, wie bei React.memo oder reselect, eine Liste von Abhängigkeiten explizit zu übergeben. Reaktionskomponenten reagieren sowohl auf berechnete Änderungen als auch auf beobachtbare Änderungen. Ein interessantes Merkmal ist, dass die Neuberechnung des Werts nicht erfolgt, wenn die Berechnung derzeit nicht am Rendering beteiligt ist (was Ressourcen spart). Daher kann die Berechnung trotz konstanter Abhängigkeitswerte neu berechnet werden (es gibt eine Möglichkeit, mobx explizit anzuweisen, den berechneten Wert zu speichern).

 // 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; }; } 

Die Zugriffsliste ist nur über ein berechnetes Feld geöffnet, in dem je nach Anzeigemodus der erforderliche gefilterte Datensatz zurückgegeben wird (abgeschlossen, aktiv oder alle Aufgaben). Die Aufgabenabhängigkeiten geben die berechneten Felder completeTodos, activeTodos und private beobachtbare _todos an.

Betrachten Sie die Hauptkomponente der App. Es wird ein Formular zum Hinzufügen neuer Aufgaben und einer Aufgabenliste gerendert. Eine Instanz des AppSate-Hauptstatus wird sofort erstellt.

 // 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> ); } } 

Das Feld appState enthält eine Instanz der TodoListState-Klasse zum Anzeigen der TodoList-Komponente und der Methode zum Hinzufügen neuer Aufgaben, die an die AddTodo-Komponente übergeben wird.

 // 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); }; } 

Die AddTodo-Komponente hat einen isolierten Zustand. Es gibt keinen Zugang vom allgemeinen Staat. Die einzige Verbindung zu appState besteht beim Senden eines Formulars über die Methode appState.addTodo.
Für den Status der AddTodo-Komponente wird die formstate-Bibliothek verwendet, die mit ts und mobx sehr gut befreundet ist. Mit Formstate können Sie bequem mit Formularen arbeiten, Formulare validieren und vieles mehr. Das Formular hat nur einen erforderlichen Feldnamen.

 // 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; }; } 

Im Allgemeinen ist es nicht sinnvoll, das Verhalten aller Komponenten vollständig zu beschreiben. Den vollständigen Code finden Sie hier .

Dieser Artikel beschreibt den Versuch des Autors, einfachen, flexiblen und strukturierten Code zu schreiben, der leicht zu pflegen ist. React unterteilt die Benutzeroberfläche in Komponenten. Die Komponenten beschreiben Zustandsklassen (jede Klasse kann separat getestet werden). Instanzen von Zuständen werden je nach Aufgabe entweder in der Komponente selbst oder auf einer höheren Ebene erstellt. Praktischerweise können Sie dank Typoskript Klassenfeldtypen und Komponenteneigenschaftstypen angeben. Dank mobx können wir, für den Entwickler fast unmerklich, Reaktionskomponenten auf Datenänderungen reagieren lassen.