Über die Typsicherheit hinaus: Machen Sie TypeScript intelligenter, indem Sie eine Laufzeitauswahl erstellen

Haftungsausschluss

Hey, bevor wir anfangen, möchte ich etwas klarstellen: Ich werde zwar viel über mein Paket ts-runtime-picker sprechen, aber dies ist kein Werbeartikel. Ich teile nur meine Erfahrungen und die Reise, die ich unternommen habe, bevor ich es gebaut habe. (Aber hey, wenn Sie neugierig sind, hier ist der Link zum Paket?).

---

Wie TypeScript mich zu einer neuen Idee (und einem Paket) führte

Lassen Sie uns etwas zurückspulen. Ich arbeite also schon seit einiger Zeit mit TypeScript. Ich würde mich nicht als TypeScript-Profi bezeichnen, aber ich habe ein paar große Projekte erstellt und in meinem Unternehmen damit gearbeitet. Wissen Sie, das Übliche – einige „Hallo Welt“-Projekte, einige etwas komplexere und natürlich eine ganze Reihe von Besuchen bei Google, um herauszufinden: „Was zum Teufel bedeutet dieser Fehler?“ oder „Wie wähle ich erneut Felder aus einer Schnittstelle aus?“ (Sie verstehen, worauf es ankommt. ?)

Eines Tages stieß ich bei der Arbeit mit Firebase-Cloudfunktionen auf ein Problem. Ich war am createUser-Endpunkt, habe meine Validierungslogik geschrieben, Daten gekürzt und den üblichen CRUD-Anfrage-Wahnsinn erledigt. Alles verlief reibungslos, bis ich auf diesen Code eines früheren Entwicklers stieß:

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

...und mein innerer TypeScript-Profi schrie. ?

Ich meine, komm schon, das war ein riesiges Warnsignal. Rechts? Das direkte Einfügen ungefilterter Benutzerdaten auf diese Weise war riskant – was wäre, wenn den Anforderungsdaten eine Validierung fehlte und wir am Ende unerwünschte Felder in die Datenbank einfügten? Nicht großartig.

Ich habe den Code schnell entfernt, aber dann erstarrte ich für eine Sekunde. ? Ich starrte auf meinen Bildschirm und dachte: „Moment mal, wenn ich einfach request.data dem Benutzeroberflächentyp zuweise, würde mich TypeScript dann nicht davon abhalten, so etwas zu tun? Sollte das das Problem nicht beheben?“ (Werfen Sie einen hoffnungsvollen Blick auf meine IDE und warten Sie darauf, dass die roten, verschnörkelten Linien erscheinen.)

Aber Moment... ?‍♂️ TypeScript ist keine Magie. Es ist nur eine Überprüfung zur Kompilierungszeit, oder? Es existiert nicht zur Laufzeit. TypeScript ist eine Maske für die Typsicherheit, erzwingt jedoch nichts, wenn der Code ausgeführt wird. Es verhindert nicht wirklich das Einfügen zusätzlicher Felder zur Laufzeit.

Also rief ich einen meiner Teamkollegen an und fragte: „Hey Bruder, wenn wir ein Objekt namens Alphabets mit allen Buchstaben im Alphabet haben und eine Schnittstelle OnlyTwoLetters erstellen, die nur die Buchstaben ‚a‘ und ‚ zulässt. b', was passiert, wenn wir das Alphabets-Objekt in diese Schnittstelle umwandeln?“

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

Ohne mit der Wimper zu zucken sagte mein Teamkollege: „Haha, nun, du bekommst immer noch alle Buchstaben des Alphabets, weil TypeScript das zur Laufzeit nicht wirklich stoppen kann.“

Verdammt. Ich wusste es. Ich war von Hoffnung erfüllt – gehofft, dass TypeScript mich auf magische Weise davon abhalten könnte, zur Laufzeit Fehler zu machen. ?

Aber dann wurde mir klar: Was wäre, wenn TypeScript dies zur Laufzeit erzwingen könnte? Was wäre, wenn wir ein Objekt in eine bestimmte Schnittstelle umwandeln könnten und TypeScript alle Eigenschaften, die nicht in der Schnittstelle definiert wurden, automatisch entfernen veranlassen könnte?

Das würde mein Problem lösen.

---

Die Geburt von ts-runtime-picker

Also dachte ich bei diesem Aha-Moment: „Warum das nicht Wirklichkeit werden lassen?“ Wenn ich „request.data“ in die Benutzeroberfläche umwandeln könnte, könnte mir TypeScript dabei helfen, alle zusätzlichen Eigenschaften automatisch zu entfernen, sodass das Objekt sicher in Firebase eingefügt werden kann. ?

Und so war die Idee für ts-runtime-picker geboren. Das Ziel war einfach: Erstellen Sie ein Paket, das es TypeScript-Benutzern ermöglicht, unerwünschte Eigenschaften aus einem Objekt herauszufiltern, basierend auf den in einer bestimmten Schnittstelle definierten Feldern.

Das Beste daran? Es würde mir die manuelle Validierung und Filterung von Feldern ersparen. Vorbei waren die Zeiten von:

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

---

So funktioniert es: Lassen Sie TypeScript seine Arbeit erledigen

Mit ts-runtime-picker wird der gesamte Prozess automatisiert. Sie können ein Objekt in eine Schnittstelle umwandeln und das Paket stellt sicher, dass nur die in der Schnittstelle definierten Eigenschaften beibehalten werden. So funktioniert es in Aktion:

Vorher: Manuelle Validierung

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

Nachher: ​​Mit ts-runtime-picker

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

firebase.collection("users").add(filteredData);  // More work, less fun.

Das Beste daran? Dieser Code ist standardmäßig sicher. Es sind keine manuellen Prüfungen oder Objektmanipulationen erforderlich. ts-runtime-picker übernimmt dies automatisch für Sie, indem es alle Felder herausfiltert, die in der Benutzeroberfläche nicht vorhanden sind. Sie können sich einfach auf Ihre Kernlogik konzentrieren, ohne sich Gedanken über versehentliche Felderinfügungen machen zu müssen. ?

---

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

Sie fragen sich vielleicht: „Ist das aus purer Faulheit entstanden?“ Und dazu sage ich: Ja, aber auch nein. ?

Natürlich kam die Idee ursprünglich aus meiner Faulheit – ich wollte die Felder nicht jedes Mal manuell filtern, wenn ich Daten eingeben musste. 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 damit verbracht, das Paket zu erstellen. Ja, das stimmt. ?

Aber so ist das manchmal. „Das Bedürfnis bringt Erfindungen hervor“ und dieses Bedürfnis, mühsame, sich wiederholende Kontrollen zu vermeiden, führte zu einer neuen Lösung, die letztendlich mein Leben (und hoffentlich das Leben vieler anderer) viel einfacher machte.

Obwohl ich die Schuld Faulheit dafür verantwortlich machen kann, dass der Stein ins Rollen gekommen ist, war es die Notwendigkeit, das Problem zu lösen, das zu ts-runtime-picker geführt hat. Und deshalb ist Feststecken oder Faulheit manchmal nicht unbedingt eine schlechte Sache – es ist der Geburtsort von etwas Neuem und Nützlichem!

---

Fazit

Und das ist die Geschichte hinter dem Paket ts-runtime-picker. Eine Reise von der TypeScript-Frustration zur Entwicklung eines Tools, das ein echtes Problem löst. Mit diesem Paket helfe ich TypeScript-Benutzern dabei, die Typsicherheit voll auszuschöpfen – nicht nur während der Entwicklung, sondern auch zur Laufzeit.

Wenn Sie es leid sind, Felder manuell zu filtern oder sich Sorgen darüber machen, dass sich unerwünschte Daten einschleichen, probieren Sie ts-runtime-picker aus. Das ist eine Sache weniger, über die Sie sich Sorgen machen müssen, und es macht die Arbeit mit TypeScript ein wenig intelligenter. ?

Das obige ist der detaillierte Inhalt vonÜber die Typsicherheit hinaus: Machen Sie TypeScript intelligenter, indem Sie eine Laufzeitauswahl erstellen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!