How to convert a JS k-v object to a typescript version?

Question

I want to convert a js object into typescript version (we are refactoring the code) :( But I don't get how to migrate a JS JSON object into a correct TS format. For example, we have a JS object like this:

JS Object:
{
  "filter": {
    "price": {
      "$gte": 10,
      "$lte": 100
    },
    "symbol": "appl"
  },
  "sort": {
    "createdAt": -1
  }
}

So it's easy in js code that we declare a params = {} and we can insert params.filter[price] = .....

However, if we want to do it in Typescript, the compiler will complain that we need to determine the type, and it's hard because as you can see the "value" can be string or int or another object.

Do you have any ideas on it? Super thanks!!!!!

Does this answer your question? [How do I initialize a TypeScript Object with a JSON-Object?](https://stackoverflow.com/questions/22885995/how-do-i-initialize-a-typescript-object-with-a-json-object) — Cesare Polonara, Apr 30 '22 at 21:23

score 0 · Answer 1 · answered Apr 30 '22 at 21:11

0

If you want type of specific object try using VSCode Paste JSON as Code extension or this website that will generate typescript interface from your object http://json2ts.com/ .

answered Apr 30 '22 at 21:11

AndyDev__

29
1
4

score 0 · Answer 2 · answered Apr 30 '22 at 21:24

There is no need to create a type/interface in order to parse JSON:

const json = `{
  "filter": {
    "price": {
      "$gte": 10,
      "$lte": 100
    },
    "symbol": "appl"
  },
  "sort": {
    "createdAt": -1
  }
}`

const data = JSON.parse(json)

console.log(data)

If you want too, you can create an interface and assign the parsed data to it. Note however that this doesn't validate that the parsed data matches the type/interface (it could be any arbitrary JSON data and it would be assigned to the result variable, but typescript would then only let you access the members that exist in the interface.

interface Data {
  filter: {
    price: {
      $gte: number
      $lte: number
    }
    symbol: string
  }
  sort: {
    createdAt: number
  }
}

const json = `{
  "filter": {
    "price": {
      "$gte": 10,
      "$lte": 100
    },
    "symbol": "appl"
  },
  "sort": {
    "createdAt": -1
  }
}`

const data: Data = JSON.parse(json)

console.log(data)
console.log(data.filter.symbol)

Hi Dave, Super thanks for your detailed explanation. I know your point, however, the reason I didn't do in this way is because it's also possible that the input may not be the strict format. For example, there also exist `price: 123` case, so it's not align with the type or interface. — Ada, Apr 30 '22 at 21:31
@Ada then it seems your JSON nodes can be of any random type, in that case, will this solve your problem? [Code Playground](https://tsplay.dev/mLlj4m). If you have fixed JSON structure (i.e the nodes) then we can make it work with type inference as well — Bishwajit jha, May 01 '22 at 03:27
Then `price?: { … }` would indicate that price is optional. There not really anything that can’t be expressed in the type system. — Dave Meehan, May 01 '22 at 09:28

score -1 · Answer 3 · answered Apr 30 '22 at 21:15

You can use TypeScript interfaces to do so. You can easily generate TS using websites or extensions like https://app.quicktype.io/

TS

export interface Pokedex {
    filter: Filter;
    sort:   Sort;
}

export interface Filter {
    price:  { [key: string]: number };
    symbol: string;
}

export interface Sort {
    createdAt: number;
}

JS

{
  "filter": {
    "price": {
      "$gte": 10,
      "$lte": 100
    },
    "symbol": "appl"
  },
  "sort": {
    "createdAt": -1
  }
}

How to convert a JS k-v object to a typescript version?

3 Answers3

TS

JS