How to Typescript to JSON with Butlermock
Tags: mock, typescript, interfaces, types
Published: 2023-08-19 20:40:29

---
title: How to Typescript to JSON with Butlermock
published: true
description: interface to json - tool for building mocks from typescript's types/interfaces
tags: mock, typescript, Interfaces, Types
# Use a ratio of 100:42 for best results.
# published_at: 2023-08-19 19:37 +0000
---

## Butlermock

It's a tool for building mocks from typescript's types/interfaces into object with actual data provided by Fakerjs

It's [open source](https://github.com/Devrax/Butlermock) :) 

## Web usage

Just go to https://butlermock.deno.dev/ and in the left panel paste your interfaces or types.

Wait until the monaco editor shows up and paste your interfaces to later clicking the play button and the mock shows up almost immediately.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rcrfzoimihaeryv0njm0.png)

> The "play" button mocks up, "clipboard" copies the mock created and the "X" button is for cleaning the view

## API documentation

Easy peasy

``` typescript

fetch(new URL("/api/mock", 'https://butlermock.deno.dev').href, {
    method: "POST",
    headers: {
      "content-type": "application/json",
    },
    body: JSON.stringify({
      value: `interface Test {
        Hello: "World!";
        }`,
      valueForAny: "null", // any parseable json value, values: "null" | "\"Whatever the text you want\"" | "{}" | "0" | "1" | ... | "9"
      mustReturn: "", // empty or the top-level name of the interfaces that you provided
      quantity: 1, // if is greater than 1, the api response will be an array of the interfaces provided
    }),
  })
  .then(res => res.json()).then(console.log); // should log:
  //{
  // "Test": {
  //    "Hello": "World!"
  //  }
  //}

```

> **Always remember to format your interfaces or types correctly, if you forget to add ";" it may result in bad parsing**


``` typescript
new interface2mock(`interface Test {
  Hello: "World!" // -> No closing semicolon ( ; )
  supa: string;
}`).buildMock()

/*
{
  "Test": {
    "Hello": null
  }
}
*/
```

### Recommedations when using the API

If you are going to consume the API I suggest that you use fetch() instead of your own HTTPS calling implementation, to avoid sending credentials which I don't store, but security reasons try to use it in the way I suggest, just for privacy reasons. **REPEATING, I DO NOT STORE ANY DATA. :)**.


## Limitations

This section is for known limitations that Butlermocks has, but in the future might be able to recognize and mock:

|type| casting | description |
|----|---------|-------------|
|Array| Array<string \| boolean \| number \| any>| This casting is not supported, use (string \| boolean \| number \| any)[] instead|

## Status

- [x] *Interfaces*
```typescript
interface NonMockeableInterface {} // ❌ empty interface

interface MockeableInterface {
  somethingToMock: any;
} // ✅ Mockeable

export interface AnotherMockeableInterface {
  anotherThingToMock: any;
} // ✅ Mockeable, 'export' is ignored
```

<br />

- [x] Interfaces with nested interfaces/types
```typescript
type mockeableType = {
  name: string;
} // ✅ Mockeable

interface MockeableInterface {
  somethingToMock: any;
  nestedInterface: AnotherMockeableInterface;
  extraNestedInterface: AnotherMockeableInterface[];
} // ✅ Mockeable

export interface AnotherMockeableInterface {
  anotherThingToMock: any;
} // ✅ Mockeable, 'export' is ignored
```

<br />


- [ ] Interfaces that extends from other interfaces/types
``` typescript
// Not mockeable yet
interface That { ... }

interface This extends That {} // ❌
```

<br />

- [ ] Generic Interfaces
``` typescript
// Not mockeable yet
interface This<T> {
  here: T;
} // ❌
```

<br />

- [ ] Generic Interfaces that extends from other interfaces/types
```Typescript
// Not mockeable yet
interface Evnt<T> {
  name: T;
}

interface IPropertiesToAdd<T> extends Evnt<T> {
  on(): void;
  off(): void;
} // ❌
```

<br />

- [x] Primitive Type
``` typescript
// Not mockeable yet
type justString = string; // ✅ Mockeable
```

<br />

- [x] Type object
``` typescript
type justString = {
  yes: 'you can';
}; // ✅ Mockeable
```

<br />

- [x] Type with nested interfaces/types
``` typescript

type mockeableType = {
  nestedObject: MockeableInterface;
} // ✅ Mockeable

interface MockeableInterface {
  somethingToMock: any;
} // ✅ Mockeable
```

<br />

- [ ] Generic Type
``` typescript
// Not mockeable yet
type IPropertiesToAdd<T extends {}> = T & {
    on(): void
    off(): void
}; // ❌
```