טיפ טייפסקריפט: יצירת שלד לממשק מהרשת

11/08/2022

החבילה json-to-ts היא חבילת JavaScript מדליקה (כתובה בטייפסקריפט כמובן) שיכולה לחסוך הרבה עבודה כשכותבים קוד שעובד מול APIs. התפקיד שלה הוא פשוט לקחת אוביקט JSON ולהפוך אותו ל Interface בטייפסקריפט, ואנחנו יכולים להשתמש בה בתוך תוכנית בצורה הבאה:

import JsonToTS from 'json-to-ts';
import fetch from 'node-fetch';
const url = process.argv[2];

async function main() {
  const json = (await (await fetch(url)).json());
  JsonToTS(json).forEach( typeInterface => {
    console.log(typeInterface)
  })
}

main();

ניקח URL לדוגמה שמחזיר אוביקט JSON:

$ curl https://swapi.dev/api/people/1/ | jq

{
  "name": "Luke Skywalker",
  "height": "172",
  "mass": "77",
  "hair_color": "blond",
  "skin_color": "fair",
  "eye_color": "blue",
  "birth_year": "19BBY",
  "gender": "male",
  "homeworld": "https://swapi.dev/api/planets/1/",
  "films": [
    "https://swapi.dev/api/films/1/",
    "https://swapi.dev/api/films/2/",
    "https://swapi.dev/api/films/3/",
    "https://swapi.dev/api/films/6/"
  ],
  "species": [],
  "vehicles": [
    "https://swapi.dev/api/vehicles/14/",
    "https://swapi.dev/api/vehicles/30/"
  ],
  "starships": [
    "https://swapi.dev/api/starships/12/",
    "https://swapi.dev/api/starships/22/"
  ],
  "created": "2014-12-09T13:50:51.644000Z",
  "edited": "2014-12-20T21:17:56.891000Z",
  "url": "https://swapi.dev/api/people/1/"
}

וזה מה שיוצא כשאני מעביר אותו לתוכנית שלי:

$ node tsify.mjs https://swapi.dev/api/people/1/

interface RootObject {
  name: string;
  height: string;
  mass: string;
  hair_color: string;
  skin_color: string;
  eye_color: string;
  birth_year: string;
  gender: string;
  homeworld: string;
  films: string[];
  species: any[];
  vehicles: string[];
  starships: string[];
  created: string;
  edited: string;
  url: string;
}

אז נכון צריך לסדר את השם RootObject וצריך להפוך את כל המערכים מ any[] לסוג הנכון שלהם, אבל במהלך כתיבת קוד כלי כזה יכול לחסוך הרבה זמן. עכשיו רק נשאר לכתוב vim plugin שייתן לי לכתוב בקוד משהו כמו:

interface https://swapi.dev/api/people/1/

ויהפוך את זה אוטומטית לתוצאה של הסקריפט.