Safe JSON clone
Calling
JSON.serialize and then JSON.parse on a value is the fastest general-purpose way to deeply clone an object in Javascript. However, the downside is that it only works on values for which x => JSON.parse(JSON.serialize(x)) is the identity function. In other words, this function will only work correctly on strings, numbers, booleans, null, undefined, and arrays and objects built off of these types.It's common to choose a function name or leave comments warning about this constraint. However, in Typescript we can enforce this constraint at the type level using a recursive type:
1
// note that the primitives Symbol and BigInt are not serializable
2
// this is also the same as the JSON type from Typescript's docs, but with the
3
// addition of undefined as a valid value:
4
// https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-7.html#more-recursive-type-aliases
5
type FastClonable =
6
| string
7
| number
8
| boolean
9
| null
10
| undefined
11
| FastClonable[]
12
| { [x: string]: FastClonable }
13
14
const fastClone = <T extends FastClonable>(x: T): T = JSON.parse(JSON.serialize(x))
Copied!
Now, when passing any value that will not be transparently cloned via this function, Typescript will emit an error.
1
// valid
2
fastClone(123)
3
fastClone([123, true, 'foo'])
4
fastClone({ foo: 123 })
5
6
// invalid
7
fastClone(Symbol('foo'))
8
fastClone(123n)
9
fastClone(new Foo())
Copied!
This also works generically. However, note that this approach does not work when passed an interface, which is due to an intentional Typescript design decision. (Note that this may change in future versions of Typescript.)
1
type FooType = {
2
bar: {
3
baz: number
4
}
5
}
6
7
interface FooInterface {
8
bar: {
9
baz: number
10
}
11
}
12
13
const myFoo = {
14
bar: {
15
baz: 123
16
}
17
}
18
19
// correctly returns a value with type FooType
20
fastClone(myFoo as FooType)
21
22
// Argument of type 'FooInterface' is not assignable to parameter of type 'FastClonable'.
23
// Type 'FooInterface' is not assignable to type '{ [x: string]: FastClonable; }'.
24
// Index signature is missing in type 'FooInterface'.
25
fastClone(myFoo as FooInterface)
Copied!
Last modified 7mo ago
Copy link