I have a simple Purchase class:

export class Purchase {

    customer!: Customer;
    
    shippingAddress!: Address;

    billingAddress!: Address;

    order!: Order;

    orderItems!: OrderItem[];
    
}

I have a checkout component which does the following:

// populate purchase - customer
purchase.customer = this.checkoutFormGroup.controls['customer'].value;

// populate purchase - shipping address
purchase.shippingAddress = this.checkoutFormGroup.controls['shippingAddress'].value;
const shippingState: State = JSON.parse(JSON.stringify(purchase.shippingAddress.state));
const shippingCountry: Country = JSON.parse(JSON.stringify(purchase.shippingAddress.country));
purchase.shippingAddress.state = shippingState.name;
purchase.shippingAddress.country = shippingCountry.name;

In this the below lines give the error Cannot find name 'JSON'.ts(2304):

const shippingState: State = JSON.parse(JSON.stringify(purchase.shippingAddress.state));
const shippingCountry: Country = JSON.parse(JSON.stringify(purchase.shippingAddress.country));

I suspect the problem is that I've the following config in tsconfig.json:

"compilerOptions": {
    ...
    "target": "es2017",
    "module": "es2020",
    "lib": [
      "es2018",
      "dom"
    ]
}

I tried changing es2018 to es5 but that didn't resolve my issue. Either way, surely there should be a way of doing this sort of thing with es2018. Can anybody tell me how to resolve this?