How to fix Typescript errors on recursive reduce function

Question

I am new to Typescript and I wrote a very rudimentary implementation of JSON stringify. The code works as expected, but my types are a bit messed up on the part where I recursively stringify nested arrays. Any help is appreciated :D

Here is a link to the TS playground and there it shows all the errors I get. PLAYGROUND LINK

type ValidJSON = ValidJSONObject | string | number | boolean | JsonArray

interface JsonArray extends Array<string | number | boolean | Date | ValidJSONObject | JsonArray> { }

interface ValidJSONObject {
    [x: string]: string | number | boolean | Date | JsonArray
}

export const stringify = (input: ValidJSON) :string => {
   if (input === null)
    return 'null'
  else if (input.constructor === String)
    return '"' + input.replace(/"|\n/g, (x:string) =>  x === '"' ? '\\"' :'\\n') + '"'
  else if (input.constructor === Number)
    return String(input)
  else if (input.constructor === Boolean)
    return input ? 'true' : 'false'
  else if (input.constructor === Array)
    return '[' + input.reduce((acc, v) => {
      if (v === undefined)
        return [...acc, 'null']
      else
        return [...acc, stringify(v)]
    }, []).join(',') + ']'
  else if (input.constructor === Object)
    return '{' + Object.keys(input).reduce((acc, k) => {
      if (input[k] === undefined)
        return acc
      else
        return [...acc, stringify(k) + ':' + stringify(input[k])]
    }, []).join(',') + '}'
  else
    return '{}'
};

tatsuya kanemoto · Accepted Answer · 2020-07-15 17:53:06Z

2

The reduce method need type argument if the accumulator type cannot be inferenced.

For example. The accumulator of following code doesn't tell what type of the array is.

[1,2,3].reduce((acc, cur) => ([...acc, cur+'']), [])

So you need to pass type argument like follows.

[1,2,3].reduce<string[]>((acc, cur) => ([...acc, cur+'']), [])

I also fixed the all of errors. The changes as follows.

Added Date type to the ValidJSON type definition.
Added string[] to type argument of reduce method.
Cast the input as (input as ValidJSONObject)

The generated javascript code is the same of yours.
I hope this will help!

playground

type ValidJSON = ValidJSONObject | string | number | boolean | Date | JsonArray

interface JsonArray extends Array<string | number | boolean | Date | ValidJSONObject | JsonArray> { }

interface ValidJSONObject {
    [x: string]: string | number | boolean | Date | JsonArray
}

export const stringify = (input: ValidJSON) :string => {
   if (input === null)
    return 'null'
  else if (input.constructor === String)
    return '"' + input.replace(/"|\n/g, (x:string) =>  x === '"' ? '\\"' :'\\n') + '"'
  else if (input.constructor === Number)
    return String(input)
  else if (input.constructor === Boolean)
    return input ? 'true' : 'false'
  else if (input.constructor === Array)
    return '[' + input.reduce<string[]>((acc, v) => {
      if (v === undefined)
        return [...acc, 'null']
      else
        return [...acc, stringify(v)]
    }, []).join(',') + ']'
  else if (input.constructor === Object)
    return '{' + Object.keys(input).reduce<string[]>((acc, k: keyof ValidJSONObject) => {
      if ((input as ValidJSONObject)[k] === undefined)
        return acc
      else
        return [...acc, stringify(k) + ':' + stringify((input as ValidJSONObject)[k])]
    }, []).join(',') + '}'
  else
    return '{}'
};

edited Jul 15, 2020 at 17:53

answered Jul 15, 2020 at 17:30

tatsuya kanemoto

2,03814 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Andrey Tyukin Over a year ago

Why is it not just interface JsonArray extends Array<ValidJSON>?

Andrey Tyukin Over a year ago

And also, why can properties of object not be other objects?

Esther Cuan Over a year ago

looks like I was on the right path with type assertions but I was not sure how to use them yet. Thank you so much for this!

Collectives™ on Stack Overflow

How to fix Typescript errors on recursive reduce function

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related