Typescript - Custom Object type that is always terminated by either a string or a number

Question

Typescript - Custom Object type that is always terminated by either a string or a number

Does TypeScript have a way to create a versatile object that can have multiple nested levels but always end with either a string or number property?

interface GenericObject {
  [key: string]: string | number | GenericObject | GenericObject[];
}

const object: GenericObject = {
  test: 'test',
  testNum: 2,
  test2: {
    test: 'test'
  },
  test3: [
    {
      test: 'test'
    }
  ]
}

While creating the object works fine, attempting to access its properties throws an error.

object.test2.test;
object.test3[0].test;

Property 'test' does not exist on type 'string | number | GenericObject | GenericObject[]'

Is there a way to make this structure work so it can be infinitely nested but always ending in either a string or a number?

Playground url - https://www.typescriptlang.org/play?#code/JYOwLgpgTgZghgYwgAgOIRNYCDyAjAKwgTGQG8BYAKGWQG0BrCATwC5kBnMKUAcwF12XHiF7IAPshABXALZ5oEtBiy5CxUpPSYeaoiTr8A3NQC+1aggD2ILsivqS7bavz7SAXnLVakLuwByPzAAgBofZGCAOTl2ACZwmkiILjj2SiTfFLBA4ICI00SsrgBmdjoI2gzaGuT-ZCDs-MzkcyT+MwsqB3cAOmC4-uyTbscwIdK6AAZ+CbAjIA

typescript typescript-generics type-constraints

Answer 1

Answer №1

For those seeking a combination of restriction and property inference, simply incorporate an additional function.

interface GenericObject {
  [key: string]: GenericObject | GenericObject[] | string | number
}

const validation = <Obj extends GenericObject>(obj: Obj) => obj

const result = validation({
  test: 'test',
  testNum: 2,
  test2: {
    test: 'test'
  },
  test3: [
    {
      test: [{ a: 's' }]
    }
  ]
})

result.test2.test // ok


const withError = validation({
  test: 'test',
  testNum: 2,
  test2: {
    test: 'test'
  },
  test3: [
    {
      test: [{ a: false }] // <--- expected error
    }
  ]
})

Playground

Answer 2

For those seeking a combination of restriction and property inference, simply incorporate an additional function.

interface GenericObject {
  [key: string]: GenericObject | GenericObject[] | string | number
}

const validation = <Obj extends GenericObject>(obj: Obj) => obj

const result = validation({
  test: 'test',
  testNum: 2,
  test2: {
    test: 'test'
  },
  test3: [
    {
      test: [{ a: 's' }]
    }
  ]
})

result.test2.test // ok


const withError = validation({
  test: 'test',
  testNum: 2,
  test2: {
    test: 'test'
  },
  test3: [
    {
      test: [{ a: false }] // <--- expected error
    }
  ]
})

Playground

Answer 3

Answer №2

Although I am not an expert in TS, it seems like your definition is correct.

The issue lies in the fact that in TS, you can only access members that are present in all parts of a union type.

Therefore, the error you are encountering makes sense. There isn't enough overlap between the types number, string, and a certain GenericObject interface. TS cannot determine if the test2 variable is a primitive or an object with keys.

One possible solution to specify what test2 or test3 props are would be to remap the key using as:

(object.test2 as GenericObject).test;

Keep the object: GenericObject as it is. This is just my opinion. I'm curious to hear other suggestions on how to address your question about deeply nested objects.

Answer 4

Although I am not an expert in TS, it seems like your definition is correct.

The issue lies in the fact that in TS, you can only access members that are present in all parts of a union type.

Therefore, the error you are encountering makes sense. There isn't enough overlap between the types number, string, and a certain GenericObject interface. TS cannot determine if the test2 variable is a primitive or an object with keys.

One possible solution to specify what test2 or test3 props are would be to remap the key using as:

(object.test2 as GenericObject).test;

Keep the object: GenericObject as it is. This is just my opinion. I'm curious to hear other suggestions on how to address your question about deeply nested objects.

Typescript - Custom Object type that is always terminated by either a string or a number

Answer №1

Answer №2

Similar questions

Customize the initial color of the text field in Material UI

Trouble with updating data in Angular 8 table

The string returned from the Controller is not recognized as a valid JSON object

Can you explain the significance behind the syntax used in ngrx adapter selectors?

Can Ansible and Pulumi be integrated to work together effectively?

Resolving the "Abstract type N must be an Object type at runtime" error in GraphQL Server Union Types

Exploring the world of interfaces in nested mapping functions

Lack of Typescript 2.1 and Angular 2 type definitions with browserify

In Vue3, using the script setup feature allows for setting default property values within nested objects

Showing Firebase messages in a NativeScript ListView in an asynchronous manner

Limit Typescript decorator usage to functions that return either void or Promise<void>

Obtaining the value of an ion-toggle in Ionic2 using the ionChange

In order to make Angular function properly, it is crucial that I include app.get("*", [...]); in my server.js file

Is there a more effective alternative to using the ternary condition operator for extended periods of time?

Various gulp origins and destinations

Challenge: Visual Studio 2015 MVC6 and Angular 2 compilation issue - Promise name not found

Variable not accessible in a Typescript forEach loop

I had high hopes that TypeScript's automatic type inference for constructor parameters would do the trick, but it seems to have let

Securing Your Next.js Web App with Session Authentication

Eliminating every instance of the character `^` from a given string