GENERAR DATA DESDE INTERFACES EN TYPESCRIPT.

interface User {
  id: ExtraTypes.ID;
  nickname: ExtraTypes.FULL_NAME;
  avatar: ExtraTypes.AVATAR;
  level: ExtraTypes.AGE;
  premium: boolean;
  phoneNumber: ExtraTypes.PHONENUMBER;
  game: Game
}

interface Game {
  gameId: ExtraTypes.ID;
  title: string;
  kills: number;
  deaths: number;
}

Hace algún tiempo trabajando en un proyecto estaba agregando todos los types que me venian de una respuesta de una API, para tener mejor experiencia al desarrollar la UI y a mi suerte me comentaron de un plugin que se usa en Visual Studio Code que al llegar la respuesta del backend te genera automaticamente los typos para Typescript y esto para mi fue de gran ayuda si aún no conoces esta herramienta te dejo este enlace para que vayas rapido a darle una mirada Thunder Client.

Luego a mas de uno le puede pasar el caso invertido puede ser que aún la API del backend no esta terminada o que incluso depende de los datos que necesites consumir en el cliente se generaran estos datos en el backend para que sean consumidos finalmente. Y aquí es donde empece a buscar alguna solución que hiciera exactamente esto dado unas interfaces de Typescript generar data obviamente seria data con propositos de desarrollo, por cierto hay generadores de este tipo de data para el backend depende de lo que esten usando, en este caso no soy yo el que esta trabajando con la base de datos sino directamente en el frontend, así que me puse manos a la obra de encontrar algo que me ayudará con este problema, como en su momento no conseguí nada que me ayudará especificamente en mi problema, use otra herramienta que esta muy buena que también dejare el enlace por si no lo conocen Faker sirve para generar muchos tipos de datos como números de telefonos, nombres de usuario incluso avatares o imagenes muy recomendado.

Esto me llevo a que en el proyecto que estaba continue haciendo esto con muchas partes de la aplicación, así que me dije que tan dificil puede ser desarrollar esto me tome unas horas y empecé con la prueba de concepto tampoco quería gastar mucho tiempo en desarrollar esto y medí el alcance inicial de lo que quería que no era mas que dada una interface me devolviera un objeto JSON, primeramente iba a manejar datos primitivos como boolean, string, number, Date y undefined, después de lograr esto podría intentar ir mas lejos así que empece con un interface como este.

interface User {
  id: string;
  nickname: string;
  avatar: string;
  level: number;
  premium: boolean;
}

Si logro todo lo que tengo en mente el resultado debería ser un objeto con esta forma y una data mas o menos real algo como esto.

{
  "id": "051191f5-adba-437b-8061-45ab1a6194eb",
  "nickname": "Mrs. Matthew Jacobi",
  "avatar": "https://cloudflare-ipfs.com/ipfs/Qm/avatar/732.jpg",
  "level": 90,
  "premium": true
}

Lo que empezo con lo hago en unas horas me llevo unos dias pero aquí les dejare el resultado de este proyecto.

Para tener en consideración esta versión acepta nested interfaces si, pero con algunas restricciones por ejemplo esto funcionará sin problemas.

interface ChatMessage {
  created_at: number;
  message: Message;
  publisher: string;
  channel?: string;
  timestamp: string;
}

interface Message {
  text: string;
  reply: boolean;
  forward?: string;
  groupInvite?: string;
  message?: { text: string };
  file: { name: string; id: string };
}

Pero esto ya no.

interface ChatMessage {
  created_at: number;
  messages: Array<Message>; // <<<< esto fallará por ahora... use esto mejor Message[]
  publisher: string;
  channel?: string;
  timestamp: string;
}

interface Message {
  text: string;
  reply: boolean;
  forward?: string;
  groupInvite?: string;
  message?: { text: string };
  file: { name: string; id: string };
}

Adicionalmente agregue otros types que pueden ser muy utililes para generar data un poco mas real y podrás acceder a ellos solo escribiendo ExtraTypes. esto te mostrará algunas propiedades para tus mocks.

Y como paso final tienes la posibilidad de generar un array con mucha data solo atravez de tus interfaces de Typescript.

Gracias por leer, espero sea util para el que lo necesite :D. carlosmanotas.com