„Wenn ein Arbeiter seine Arbeit gut machen will, muss er zuerst seine Werkzeuge schärfen.“ – Konfuzius, „Die Gespräche des Konfuzius. Lu Linggong“
Titelseite > Programmierung > Übertypen Sicherheit: Typscript-Laufzeitauswahlanalyse eingehende Tiefanalyse

Übertypen Sicherheit: Typscript-Laufzeitauswahlanalyse eingehende Tiefanalyse

Gepostet am 2025-03-12
Durchsuche:607

Beyond Type Safety: making TypeScript smarter by Building a Runtime Picker

Haftungsausschluss

Hey, bevor wir anfangen, lassen Sie mich etwas klarstellen: Während ich viel über mein Paket ts-Runtime-Picker spreche, ist dies kein Werbeartikel. Ich teile nur meine Erfahrungen und die Reise, die ich unternommen habe, bevor ich sie aufgebaut habe. ( aber hey , wenn du neugierig bist, hier ist der Link zum Paket?).


Wie TypeScript mich zu einer neuen Idee (und einem Paket) geführt hat

Lass uns ein bisschen zurückspulen. Also arbeite ich jetzt schon eine Weile mit TypeScript. Ich würde mich nicht als Typenkriptprofi bezeichnen, aber ich habe ein paar große Projekte erstellt und in meinem Unternehmen damit gearbeitet. Sie wissen, die üblichen - einige „Hello World“ -Projekte, einige etwas komplexere und natürlich ein angemessener Anteil von Reisen nach Google, um herauszufinden: „Was zum Teufel bedeutet dieser Fehler?“ Oder "Wie wähle ich wieder Felder von einer Schnittstelle aus?" (Sie bekommen den Punkt.?)

Eines Tages bin ich auf ein Problem gestoßen, während ich mit Firebase Cloud -Funktionen gearbeitet habe. Ich war auf dem createUser endpunkt, schrieb meine Validierungslogik, die Trfingdaten und den Umgang mit dem üblichen CRUD -Anfrage -Wahnsinn. Alles bewegte sich reibungslos, bis ich diesen Code eines früheren Entwicklers auf dieses Stück Code stieß:

firebase.collection("users").add(request.data.user);

... und mein inneres typescript Pro schrie. ?

Ich meine, Komm schon , das war eine massive rote Fahne. Rechts? Es war riskant, nicht filterte Benutzerdaten direkt einzuführen - was, wenn die Anforderungsdaten eine Validierung fehlten und wir schließlich unerwünschte Felder in die Datenbank eingefügt haben? Nicht großartig.

Ich habe den Code schnell entfernt, aber dann habe ich für eine Sekunde gefroren. ? Ich starrte auf meinen Bildschirm und dachte: "Halten Sie sich an, wenn ich nur die Anfrage zuweisen kann. (Cue einen hoffnungs-

Aber warte ... ‍eitung Typ ist

nicht Magie. Es ist nur eine Kompilierungs-Zeit-Prüfung, oder? Es existiert nicht zur Laufzeit. TypeScript ist eine Maske für die Sicherheit Typ, erzwingt jedoch nichts, wenn der Code ausgeführt wird. Es ist nicht Wirklich verhindern, dass zusätzliche Felder zur Laufzeit eingefügt werden.

Also habe ich einen meiner Teamkollegen angerufen und gefragt: „Hey Bro, wenn wir ein Objekt mit dem Namen Alphabets mit allen Buchstaben im Alphabet haben, und nur eine Schnittstelle erstellen, die nur eine Schnittstelle erstellt, die nur die Buchstaben 'A' und 'B' zulässt, wenn wir die Alphabets an dieser Grenzfläche Objekte an diese Grenzfläche gießen?


// Objekt mit allen Alphabetbuchstaben const alphabets = { A: 'Apfel', B: 'Banane', C: 'Kirsche', D: 'Date',, E: 'Aubergine', F: 'Feigen', // ... bis z bis z }; // Schnittstelle, die nur 'a' und 'B' zulässt Interface OnlyTwoletters { A: String; B: String; } // Alphabete auf nur Twoletters gießen const filteredalphabets = Alphabete als nur Twoletter; console.log (filteredalphabets);

// Object with all alphabet letters
const alphabets = {
  a: 'Apple',
  b: 'Banana',
  c: 'Cherry',
  d: 'Date',
  e: 'Eggplant',
  f: 'Fig',
  // ... all the way to z
};

// Interface that only allows 'a' and 'b'
interface OnlyTwoLetters {
  a: string;
  b: string;
}

// Casting alphabets to OnlyTwoLetters
const filteredAlphabets = alphabets as OnlyTwoLetters;

console.log(filteredAlphabets);

Verdammt. Ich wusste es. Ich stand unter der Auswirkung der Hoffnung -

in der Hoffnung

, dass TypeScript mich auf magische Weise daran hindern könnte, zur Laufzeit Fehler zu machen. ? Aber dann hat es mich getroffen: Was ist, wenn TypeScript dies zur Laufzeit erzwingen könnte? Was wäre, wenn wir ein Objekt an eine bestimmte Schnittstelle werfen und Typen

irgendwelche Eigenschaften, die nicht in der Schnittstelle definiert wurden, automatisch ausziehen lassen könnten?

dass

mein Problem lösen würde.


Die Geburt von Ts-Runtime-Picker

Also, mit diesem Glühbirnenmoment dachte ich: "Warum nicht die Realität werden lassen?" Wenn ich Request.data an die Benutzeroberfläche werfen könnte, könnte TIPYScript mir

automatisch helfen. ?

Und einfach so wurde die Idee für ts-Runtime-Picker

geboren. Das Ziel war einfach: Erstellen Sie ein Paket, mit dem TypeScript -Benutzer unerwünschte Eigenschaften aus einem Objekt herausfiltern können, basierend auf den in einer bestimmten Schnittstelle definierten Feldern.

Das Beste? Es würde mich vor der manuellen Validierung und Filterung von Feldern ersparen. Vorbei waren die Tage von:

const filteredData = { Name: RequestData.name, Alter: RequestData.age, }; Firebase.Collection ("Benutzer"). add (filteredData); // mehr Arbeit, weniger Spaß.

const filteredData = {
  name: requestData.name,
  age: requestData.age,
};

firebase.collection("users").add(filteredData);  // More work, less fun.
wie es funktioniert: lass typecript seinen Job machen

mit ts-runtime-picker

, der gesamte Prozess ist automatisiert. Sie können ein Objekt an eine Schnittstelle geben, und das Paket stellt sicher, dass nur die in der Schnittstelle definierten Eigenschaften aufbewahrt werden. So funktioniert es in Aktion:

vor: Handbuch Validation

interface user { Name: String; Alter: Zahl; } const requestData = {Name: 'John', Alter: 30, Adresse: '123 Street'}; // unerwünschte Felder manuell überprüfen und entfernen: const filtrtereddata = { Name: RequestData.name, Alter: RequestData.age, }; Firebase.Collection ('Benutzer'). add (filteredData); // nicht sehr elegant.

interface User {
  name: string;
  age: number;
}

const requestData = { name: 'John', age: 30, address: '123 Street' };

// Manually check and remove unwanted fields:
const filteredData = {
  name: requestData.name,
  age: requestData.age,
};

firebase.collection('users').add(filteredData);  // Not very elegant.

import {pick} aus 'TS-Runtime-Picker'; Benutzeroberfläche Benutzer { Name: String; Alter: Zahl; } const requestData = {Name: 'John', Alter: 30, Adresse: '123 Street'}; // filtert automatisch nicht existierende Eigenschaften: const safedata = pick (RequestData, Benutzer); Firebase.Collection ('Benutzer'). add (safedata); // viel sauberer!

Das Beste? Dieser Code ist standardmäßig
import { pick } from 'ts-runtime-picker';

interface User {
  name: string;
  age: number;
}

const requestData = { name: 'John', age: 30, address: '123 Street' };

// Automatically filters out non-existent properties:
const safeData = pick(requestData, User);

firebase.collection('users').add(safeData);  // Much cleaner!
. Keine manuellen Überprüfungen oder Objektmanipulationen erforderlich. TS-Runtime-Picker behandelt es automatisch für Sie, indem Sie alle Felder herausfiltern, die nicht in der Benutzeroberfläche vorhanden sind. Sie können sich nur auf Ihre Kernlogik konzentrieren, ohne sich um ein versehentliches Feldinsertion zu sorgen. ?

Die Kraft der Faulheit (und wie es zu Innovation führen kann)

Also, du fragst dich vielleicht: "Ist das aus bloßer Faulheit herausgekommen?" Und dazu sage ich: ja, aber auch nein.

?

Sicher, der erste Funke der Idee kam von mir, dass ich ein wenig faul war - ich wollte nicht jedes Mal, wenn ich Daten einfügen musste, manuell filtern. Aber hey, manchmal führt Faulheit zu Brillanz! Der Wunsch, die Dinge einfacher zu machen kann eine treibende Kraft für Innovation sein.

Tatsächlich habe ich trotz der anfänglichen „Faulheit“ 8 Stunden das Paket aufgebaut. Ja, das stimmt. ?

Aber so geht es manchmal. "Die Notwendigkeit bringt Erfindung zur Welt" und dies musste mühsame Wiederholungsprüfungen vermeiden, führte zu einer neuen Lösung, die mein Leben (und hoffentlich viele andere Leben) viel einfacher machte. Während ich

Faulheit für das Rollen des Balls beschuldete, war es die Notwendigkeit, das Problem zu lösen, das zu

ts-Runtime-Picker

führte. Und so ist es manchmal, dass stecken oder faul nicht unbedingt eine schlechte Sache ist - es ist der Geburtsort von etwas Neuem und Nützliches! Abschluss


und das ist die Geschichte hinter dem ts-runtime-picker paket. Eine Reise vom TypeScript -Frustration zum Erstellen eines Tools, das ein echtes Problem löst. Dieses Paket ist meine Art, Typscript -Benutzer dabei zu helfen, die Sicherheit vom Typ in vollem Umfang zu nutzen - nicht nur während der Entwicklung, sondern auch in der Laufzeit.

Wenn Sie es satt haben, Felder manuell zu filtern oder sich Sorgen um unerwünschte Daten zu machen, geben Sie ts-Runtime-Picker einen Schuss. Es ist eine Sache weniger, über die man sich Sorgen machen muss, und es macht die Arbeit mit Typenkript nur ein bisschen schlauer. ?

Freigabeerklärung Dieser Artikel ist reproduziert unter: https://dev.to/hichemtab-tech/beyond-type-safety-making-typescript-smarter-by-building-a-runtime-picker-26d5?1 Wenn es eine Verletzung gibt, wenden Sie sich bitte an [email protected], um es zu löschen.
Neuestes Tutorial Mehr>

Haftungsausschluss: Alle bereitgestellten Ressourcen stammen teilweise aus dem Internet. Wenn eine Verletzung Ihres Urheberrechts oder anderer Rechte und Interessen vorliegt, erläutern Sie bitte die detaillierten Gründe und legen Sie einen Nachweis des Urheberrechts oder Ihrer Rechte und Interessen vor und senden Sie ihn dann an die E-Mail-Adresse: [email protected] Wir werden die Angelegenheit so schnell wie möglich für Sie erledigen.

Copyright© 2022 湘ICP备2022001581号-3