Future of Converting BigInt to JSON by 2024

The transformation of BigInt values to JSON format presents challenges without a universally accepted solution. In a recent exchange on the Google Chrome Labs GitHub repository, Jakob Kummerow addressed this issue:

Sticking to specifications: (step 10).

The dilemma arises from JSON's widespread use across various platforms and languages, making any alteration to the format risky due to compatibility concerns.

To maintain control over potential compatibility issues, one can define a custom .toJSON() function along with a corresponding "reviver" function for use with JSON.parse().

By default, Typescript (and Javascript) does not handle BigInt values accurately during JSON parsing, leading to precision errors as it approximates large numbers. Various strategies exist to overcome this limitation, provided that the JSON generation and parsing process can be customized to adhere to standards.

Several approaches include:

Utilizing a Structured String Approach

A feasible suggestion involves representing BigInt as a quoted string suffixed with 'n' for improved human readability and automatic conversion. Implementing a replacer and reviver function is essential in this method:

function bigIntReplacer(key: string, value: any): any {
  if (typeof value === "bigint") {
    return value.toString() + 'n';
  }
  return value;
}

function bigIntReviver(key: string, value: any): any {
  if (typeof value === 'string' && /^\d+n$/.test(value)) {
    return BigInt(value.slice(0, -1));
  }
  return value;
}

This enables proper usage of these functions within JSON.stringify() and JSON.parse() operations.

Adopting Numeric Conversion as an Intermediate Step

An alternative approach involves converting BigInt values to Numbers for JSON serialization, although this method sacrifices precision accuracy.

Using Object-based Serialization

Another verbose technique employs object encapsulation to represent BigInt within JSON, offering a structured alternative that avoids conflicts with other libraries.

Despite its benefits, some argue that this method compromises the direct correlation between JSON structure and parsed output.

Incorporating String Manipulation

⚠️CAUTION: Modifying standard Javascript objects' prototypes is strongly discouraged for valid reasons.

If necessary, converting BigInt to strings may serve as a viable workaround, albeit with certain restrictions and potential drawbacks based on individual requirements.

Various suggestions and polyfills have been proposed to address these challenges, underscoring the complexity of handling BigInt-to-JSON conversions effectively.

Here is the solution you've been searching for:

Extend the BigInt prototype with a method to convert it to JSON format: BigInt.prototype.toJSON = function() { return this.toString() }

For more details, check out the link: https://github.com/GoogleChromeLabs/jsbi/issues/30#issuecomment-953187833

In order to make JSON.stringify function properly within one of the dependencies, I had to find an alternative solution as the previous method was not working. Instead, I decided to create a separate patch.js file:

BigInt.prototype.toJSON = function() {
    return this.toString()
} 

To implement this fix, I included the following line at the beginning of my TypeScript source code:

require('patch.js')

Following these steps, JSON.stringify was able to handle BigInts without encountering any issues.

This issue specifically pertains to the JSON.stringify() method in JavaScript.

To address this issue, you can implement a custom JavaScript polyfill solution.

Start by creating a new script file within your project and insert the following code snippet:

// Custom polyfill for JavaScript
BigInt.prototype.toJSON = function() {
    return this.toString()
} 

If you are using TypeScript, use the following modification:

// Custom polyfill for TypeScript
(BigInt.prototype as any).toJSON = function() {
    return this.toString()
} 

Finally, ensure that you import this polyfill file at the entry point of your project, like so:

// Import polyfills.js into index.js
import './polyfills.js'

// ... continue with the rest of your code

After implementing strict typing, I found success with this configuration:

// src/types/global.d.ts
interface BigInt {
  toText: () => string;
}

// src/main.ts
BigInt.prototype.toText = function () {
  return this.toString();
};

Here is a unique approach for implementing a TypeScript polyfill:

interface BigIntPolyfill {
  toJSON(): number | string
}

interface JSONPolyfill {
  parseWithBigIntSupport(text: string, reviver?: (this: any, key: string, value: any) => any): any;
}

BigIntPolyfill.prototype.toJSON = function BigIntToJSONPolyfill(this: bigint) {
  return this >= Number.MIN_SAFE_INTEGER && this <= Number.MAX_SAFE_INTEGER ? Number(this) : `$BigInt:${this}`
};

function bigIntReviverPolyfill(this: any, _key: string, value: unknown): any {
  return typeof value === "string" && value.startsWith("$BigInt:")
    ? BigInt(value.substring(8))
    : value;
};

JSONPolyfill.parseWithBigIntSupport = function jsonParseWithBigIntSupportPolyfill(text: string, reviver?: (this: any, key: string, value: any) => any): any {
  if (reviver) {
    return JSON.parse(text, function (this: any, key: string, value: any): any {
      const bigIntRevived = bigIntReviverPolyfill(key, value);
      return reviver!.call(this, key, bigIntRevived);
    });
  }
  return JSON.parse(text, bigIntReviverPolyfill);
}

If you wish to replace the original parse with one that supports BigInt, consider this alternative method:

interface BigIntPolyfill {
  toJSON(): number | string
}

BigIntPolyfill.prototype.toJSON = function BigIntToJSONPolyfill(this: bigint) {
  return this >= Number.MIN_SAFE_INTEGER && this <= Number.MAX_SAFE_INTEGER ? Number(this) : `$BigInt:${this}`;
};

const originalJsonParserPolyfill = JSON.parse;
function bigIntReviverPolyfill(this: any, _key: string, value: unknown): any {
  return typeof value === "string" && value.startsWith("$BigInt:")
    ? BigInt(value.substring(8))
    : value;
};

JSON.parse = function jsonParseWithBigIntSupportPolyfill(text: string, reviver?: (this: any, key: string, value: any) => any): any {
  if (reviver) {
    return originalJsonParserPolyfill(text, function (this: any, key: string, value: any): any {
      const bigIntRevived = bigIntReviverPolyfill(key, value);
      return reviver!.call(this, key, bigIntRevived);
    });
  }
  return originalJsonParserPolyfill(text, bigIntReviverPolyfill);
}