Creating TypeScript code that allows for accessing properties of a TypeScript object that may be undefined

Question

Creating TypeScript code that allows for accessing properties of a TypeScript object that may be undefined

I am looking to create a custom type that allows access to undefined properties of an object with the type of any, and does so recursively. To better illustrate the issue, I have included a simplified and corrected example below based on feedback received.

const data = {a: "a", b: {c: 'hey'}}

type Data = typeof data & { [key: string]: any }

const dataOptional: Data = data

// This errors:) as expected, because the property "a" does not have such method
dataOptional.a.nonExistentStringMethod
// These do not error:) as expected, because d has the correct type of "any"
dataOptional.d
dataOptional.d.nonExistentStringMethod
// This does error:( highlighting the problem with this type
dataOptional.b.d

The issue with the current implementation is that it does not apply recursively. It is important to note that I start with the JSON value of data and need to generate TypeScript code that allows me to export the original data in a way that enables accessing undefined properties as described above.

So my question is, how can I transform a JSON value into TypeScript code that exports the JSON value in a manner where I can recursively access any undefined property with the value of any, while preserving typing information for defined properties within the original object?

json typescript

Answer 1

Answer №1

If you are looking to modify object types in TypeScript, consider using this utility function:

type WithAny<T> = {
  [key: string]: any;
} & {
  [key in keyof T]: T[key] extends object ? WithAny<T[key]> : T[key]
}

This utility function will recursively combine the given type with an index type that sets all string keys to have a value of any. It maintains the typing for known keys without affecting their specificity.

For example:

const data = {
  a: "a",
  b: {
    c: "hey",
  },
}

type AnyData = WithAny<typeof data>

const anyData: AnyData = data

anyData.a.foo // Will result in an error
anyData.b.foo // Will not throw an error

/*
Pseudo-type of AnyData:
{
  a: string
  b: {
    c: string
    [key: string]: any
  }
  [key: string]: any
}
*/

TypeScript playground

Note of Caution

Be aware that this utility function intersects with any object type, including built-in objects like Date, Map, etc. If your data contains these types, they will also be affected by the intersection.
If you know the specific object types in your data, make sure to update the extends check to exclude them. Proceed with caution when implementing the provided code if you are unsure about the data structure.

For handling Date objects, you can customize the WithAny type as follows:

type WithAny<T> = {
  [key: string]: any
} & {
  [key in keyof T]: T[key] extends object
    ? T[key] extends Date
      ? T[key]
      : WithAny<T[key]>
    : T[key]
}

You can extend these checks further by nesting them where necessary.

Answer 2

If you are looking to modify object types in TypeScript, consider using this utility function:

type WithAny<T> = {
  [key: string]: any;
} & {
  [key in keyof T]: T[key] extends object ? WithAny<T[key]> : T[key]
}

This utility function will recursively combine the given type with an index type that sets all string keys to have a value of any. It maintains the typing for known keys without affecting their specificity.

For example:

const data = {
  a: "a",
  b: {
    c: "hey",
  },
}

type AnyData = WithAny<typeof data>

const anyData: AnyData = data

anyData.a.foo // Will result in an error
anyData.b.foo // Will not throw an error

/*
Pseudo-type of AnyData:
{
  a: string
  b: {
    c: string
    [key: string]: any
  }
  [key: string]: any
}
*/

TypeScript playground

Note of Caution

Be aware that this utility function intersects with any object type, including built-in objects like Date, Map, etc. If your data contains these types, they will also be affected by the intersection.
If you know the specific object types in your data, make sure to update the extends check to exclude them. Proceed with caution when implementing the provided code if you are unsure about the data structure.

For handling Date objects, you can customize the WithAny type as follows:

type WithAny<T> = {
  [key: string]: any
} & {
  [key in keyof T]: T[key] extends object
    ? T[key] extends Date
      ? T[key]
      : WithAny<T[key]>
    : T[key]
}

You can extend these checks further by nesting them where necessary.

Creating TypeScript code that allows for accessing properties of a TypeScript object that may be undefined

Answer №1

Similar questions

What is the best way to generate JSON requests in Objective-C?

Changing Array into a JSON Document

What are the most efficient methods for extracting information from tables on Wikipedia and converting the data and links into JSON format?

Solving the challenges of creating a product index with JSON array using a combination of PHP, Javascript, and JSON

Processing and handling XML and JSON requests and responses in Spring MVC

Error in Angular: Http Provider Not Found

Error: The use of await in RequestPromise is not valid

Sending PHP variable to jQuery using POST

Is there a way to inform TypeScript that the process is defined rather than undefined?

SonarQube seems to be overlooking TypeScript files with the .ts extension

How can we effectively map Typescript Enums using their keys without relying on a Map?

Converting a JSON array containing multiple arrays into a SQL table

Potential absence of object.ts(2531)

Showing Nested Numerical Objects Post RequestBeing Made

What is the process for accessing the value of a property within the parent's generic type using a key?

The error message "Property 'name' is not found in type 'RepositoryResponse[]'" is being displayed by Typescript

What is the best way to transform a socket message into a JSON format using Python?

Transforming JSON data into a visual flowchart using VUE.js

Utilizing Typescript and sinon to mock the functionalities of jsonwebtoken

The TCP server is cutting off the received message from the network stream