Recursive object types in Typescript allow for defining complex data structures

Question

Recursive object types in Typescript allow for defining complex data structures

I am looking to create a type/interface that can store properties of the same type as itself.

For Instance:

    type TMessagesFormat = { [key: string]: string };
    
    interface TMessages {
      messages: TMessagesFormat;
    }
    
    interface TGroupMessages {
      messages?: TMessagesFormat;
      controls: { [key: string]: TMessages | TGroupMessages }
    }
    
    let groupMessages: TGroupMessages = {
      controls: {
        username: { messages: {required: 'Username required'} }
      }
    }
    
    let messages: TGroupMessages = {
      controls: {
        username: { messages: { required: 'Username required' } },
        passwordGroup: {
          messages: { nomatch: 'Passwords doesn't match' },
          controls: {
            password: { messages: { required: 'Password required' } }
          }
        }
      }
    };

The type checking is functioning correctly for username and passwordGroup, but the controls in passwordGroup can currently be anything without triggering any errors from the TS compiler. Even if I add the property controls: 'whatever' (which should not be a valid type) inside the username object literal, the code still compiles without any warnings or errors. How is this possible? Thank you!

typescript

Answer 1

Answer №1

With the release of version 3.7, TypeScript has transitioned into a new realm of possibility. Initially criticized for being too strict, the language has evolved to strike a balance between rigidity and flexibility. The decision to start off stringent and gradually relax restrictions was a strategic move by the language developers, ultimately resulting in a more versatile TS v3.7. The adjustments made to the typescript compiler have allowed for more recursive type aliases, paving the way for intricate and layered type definitions.

While there are numerous examples to showcase this shift, one standout demonstration is the newfound freedom in defining recursive types.


type TMessagesFormat = { [key: string]: TMessagesFormat };

interface TMessages extends TMessagesFormat{
   [key: string]: TMessagesFormat;
}

interface TGroupMessages {
   messages?: TMessagesFormat;
   controls: { [key: string]: TMessages | TGroupMessages };
}

The above TypeScript code is now completely valid

Answer 2

With the release of version 3.7, TypeScript has transitioned into a new realm of possibility. Initially criticized for being too strict, the language has evolved to strike a balance between rigidity and flexibility. The decision to start off stringent and gradually relax restrictions was a strategic move by the language developers, ultimately resulting in a more versatile TS v3.7. The adjustments made to the typescript compiler have allowed for more recursive type aliases, paving the way for intricate and layered type definitions.

While there are numerous examples to showcase this shift, one standout demonstration is the newfound freedom in defining recursive types.


type TMessagesFormat = { [key: string]: TMessagesFormat };

interface TMessages extends TMessagesFormat{
   [key: string]: TMessagesFormat;
}

interface TGroupMessages {
   messages?: TMessagesFormat;
   controls: { [key: string]: TMessages | TGroupMessages };
}

The above TypeScript code is now completely valid

Answer 3

Answer №2

It appears that there is an issue in TypeScript where excess property checks on object literals do not behave as expected for unions. The following code snippet demonstrates this:

interface A {
    a: string;
}
interface B {
    b: number;
}
const a: A = {a: 'dog', b: 'cat'}; // error, because 'b' is an unknown property
const ab: A | B = {a: 'dog', b: 'cat'}; // no error

One would expect ab to throw an error such as "'cat' is not a number", but it does not due to the aforementioned issue. If and when this issue is resolved, your problem should be resolved as well.

However, we do not necessarily have to wait for a fix. Excess property checking on object literals is not overly strict; it simply warns you if you add an unknown property to a "fresh" object literal. In TypeScript, adding extra properties to an object that already conforms to a certain interface is generally allowed. So, if you find a way to bypass the excess property checking (for instance, by assigning a "non-fresh" literal), you can freely add additional properties.

const dogCat = {a: 'dog', b: 'cat'};
const a: A  = dogCat; // no error

If you truly wish to disallow extra properties, particularly ones with known key names, there is a method:

interface A {
    a: string;
    b?: never; // cannot have a defined 'b'
}
interface B {
    b: number;
}
const dogCat = {a: 'dog', b: 'cat'};
const a: A  = dogCat; // error, 'string' is not assignable to 'undefined'
const ab: A | B = {a: 'dog', b: 'cat'}; // error, 'string' is not assignable to 'number'

This will result in errors for both non-fresh instances of a and ab. Returning to your scenario...

If we assume that TMessages cannot contain a controls property:

interface TMessages {
  messages: TMessagesFormat;
  controls?: never; // no defined 'controls'
}

interface TGroupMessages {
  messages?: TMessagesFormat;
  controls: { [key: string]: TMessages | TGroupMessages }
}

In this case, if a TMessages | TGroupMessages has a specified controls property, it must adhere to the type defined in TGroupMessages:

let tm: TMessages | TGroupMessages = {messages: {foo: 'hey'}, controls: 3}
// error, 'number' is not assignable to '{ [k: string]: TMessages | TGroupMessages }'

This approach should address your issue. Best of luck!

TL;DR

Either await resolution of Microsoft/TypeScript#22129, or modify your TMessages interface as follows:

interface TMessages {
  messages: TMessagesFormat;
  controls?: never; // no defined 'controls'
}

Answer 4

It appears that there is an issue in TypeScript where excess property checks on object literals do not behave as expected for unions. The following code snippet demonstrates this:

interface A {
    a: string;
}
interface B {
    b: number;
}
const a: A = {a: 'dog', b: 'cat'}; // error, because 'b' is an unknown property
const ab: A | B = {a: 'dog', b: 'cat'}; // no error

One would expect ab to throw an error such as "'cat' is not a number", but it does not due to the aforementioned issue. If and when this issue is resolved, your problem should be resolved as well.

However, we do not necessarily have to wait for a fix. Excess property checking on object literals is not overly strict; it simply warns you if you add an unknown property to a "fresh" object literal. In TypeScript, adding extra properties to an object that already conforms to a certain interface is generally allowed. So, if you find a way to bypass the excess property checking (for instance, by assigning a "non-fresh" literal), you can freely add additional properties.

const dogCat = {a: 'dog', b: 'cat'};
const a: A  = dogCat; // no error

If you truly wish to disallow extra properties, particularly ones with known key names, there is a method:

interface A {
    a: string;
    b?: never; // cannot have a defined 'b'
}
interface B {
    b: number;
}
const dogCat = {a: 'dog', b: 'cat'};
const a: A  = dogCat; // error, 'string' is not assignable to 'undefined'
const ab: A | B = {a: 'dog', b: 'cat'}; // error, 'string' is not assignable to 'number'

This will result in errors for both non-fresh instances of a and ab. Returning to your scenario...

If we assume that TMessages cannot contain a controls property:

interface TMessages {
  messages: TMessagesFormat;
  controls?: never; // no defined 'controls'
}

interface TGroupMessages {
  messages?: TMessagesFormat;
  controls: { [key: string]: TMessages | TGroupMessages }
}

In this case, if a TMessages | TGroupMessages has a specified controls property, it must adhere to the type defined in TGroupMessages:

let tm: TMessages | TGroupMessages = {messages: {foo: 'hey'}, controls: 3}
// error, 'number' is not assignable to '{ [k: string]: TMessages | TGroupMessages }'

This approach should address your issue. Best of luck!

TL;DR

Either await resolution of Microsoft/TypeScript#22129, or modify your TMessages interface as follows:

interface TMessages {
  messages: TMessagesFormat;
  controls?: never; // no defined 'controls'
}

Recursive object types in Typescript allow for defining complex data structures

Answer №1

While there are numerous examples to showcase this shift, one standout demonstration is the newfound freedom in defining recursive types.

Answer №2

TL;DR

Similar questions

angular determine if a column exists within a matCellDef iteration

What methods can be used to specify the shape of this variable within typescript callback functions?

Having trouble retrieving attributes from Typed React Redux store

Issue with Typescript and react-create-app integration using Express

Modifying the property value based on the selected item from a dropdown menu in Angular 2

Asynchronous handling of lifecycle hooks in TypeScript for Angular and Ionic applications

Ways to utilize Subjects for sharing global information in Angular 6

What is the best method for combining two observables into one?

An issue occurred while attempting to pretty-print JSON in Typescript

React Native Expo Launch disregards typescript errors

Converting an existing array into a TypeScript string literal type: A step-by-step guide

Passing a retrieved parameter from the URL into a nested component in Angular

Using React.useMemo does not efficiently avoid unnecessary re-renders

The Measure-x Annotation toolbar in High stocks is conspicuously absent from the graph, instead making an appearance in the navigator section below

When using TypeScript, how can I effectively utilize the Component property obtained from connect()?

Is it possible in Typescript to reference type variables within another type variable?

Refreshing an Angular page when navigating to a child route

Tips for sending the image file path to a React component

Having trouble accessing the property 'prototype' of null in Bing Maps when using Angular4

Ways to bring in a Typescript Vue project to a Javascript Vue