DEV Community

Project Rinjani
Project Rinjani

Posted on

Why are those web services sending "Number" with double-quotes in JSON? Castable library can handle them.

Castable TypeScript Library

Castable sanitizes dirty external data by casting all properties at runtime to the types specified at compile time.

Why do you need this library?

A lot of web services return number type fields with double-quotes in JSON. If you convert them by JSON.stringify, the double-quoted numbers will become string type!!

const serverResponse = `{
  "name": "Milk", 
  "price": "200", 
  "tax": "10", 
}`;
const product = JSON.parse(serverResponse);
const sum = product.price + product.tax;
console.log(`sum: ${sum}`); // "200" + "10" = "20010"⛔️
Enter fullscreen mode Exit fullscreen mode

TypeScript type annotation can help it? No, TypeScript cannot check such runtime type mismatch. You will get the same result even type annotation is perfect.

That's why I've made this library. Castable can convert those types at runtime. All fields will be converted to the annotated types.

import { cast, Castable } from 'castable';

class Product extends Castable { 
  @cast name: string;
  @cast price: number;
  @cast tax: number;
}

const serverResponse = `{"name": "Milk", "price": "200", "tax": "10"}`;
const product = new Product(JSON.parse(serverResponse));
const sum = product.price + product.tax;
console.log(`sum: ${sum}`); // 200 + 10 = 210👍
Enter fullscreen mode Exit fullscreen mode

Castable internally applies Number("200") for price field and Number("10") for tax field in order to cast them to the correct type, recognizing those are actually number type, not string.

Supported types:

  • number: "100" will be converted to real number 100.
  • boolean: string "true", "false" in JSON will be real boolean true, false.
  • Date: Any string representation supported by Date constructor, like "Thu Dec 21 2017 18:38:58 GMT+0900 (Tokyo Standard Time)"
  • Nested type
  • Array
  • Multi-dementional Array

Install

npm install @bitr/castable
Enter fullscreen mode Exit fullscreen mode

Usage

  1. Extend Castable
  2. Add @cast decorator to primitive type field (string, number, boolean)
  3. Add @cast(Date) decorator to Date type field
  4. Add @cast @element(T) to Array type field
  5. Add @cast decorator to nested type
  6. Do same to all nested types

Example

This library is extensively used in R2, e.g. type.ts.

Top comments (1)

Collapse
 
ahmadalfy profile image
Ahmad Alfy

This is really lovely