Deciphering the TypeScript type in question - tips and tricks

Question

Deciphering the TypeScript type in question - tips and tricks

One of my abstract classes includes a static property with various properties, where default is consistently named while the others may have random names.

  public static data = {
    default: { //only this one always have 'dafault' name
      name: 'someName',
      category: ['cat 1','cat2','catN'],
      urls: ['url1', 'url2']
    },
    property1: { //can have any random name 'property3' 'xyz'
      name: 'property1',
      category: ['cat 3','cat4','cat1'],
      urls: ['url3', 'url5']
    },
    anotherThing: { //can have any random name 'oneMoreThing' 'abc'
      name: 'anotherThing',
      category: ['cat 2','catN','cat5'],
      urls: ['url5', 'url2']
    }
  };

I am looking to enforce strict typing for this property in order to improve error validation. How would you define this structure using a TypeScript interface?

typescript types

Answer 1

Answer №1

If you're looking to use the same name for a property and its corresponding subproperty's value, unfortunately that might not be possible...

However, if you simply want to assign names to properties, it can be done quite easily:

type MyType = {
  default: {
    name: string;
    category: string[];
    urls: string[]
  }
  [key: string]: {
    name: string;
    category: string[];
    urls: string[];
  }
};

To enhance readability or if the structure is needed elsewhere, consider adding a subtype like this:

type MySubType = {
  name: string;
  category: string[];
  urls: string[];
};

type MyType = {
  default: MySubType;
  [key: string]: MySubType;
};

Answer 2

If you're looking to use the same name for a property and its corresponding subproperty's value, unfortunately that might not be possible...

However, if you simply want to assign names to properties, it can be done quite easily:

type MyType = {
  default: {
    name: string;
    category: string[];
    urls: string[]
  }
  [key: string]: {
    name: string;
    category: string[];
    urls: string[];
  }
};

To enhance readability or if the structure is needed elsewhere, consider adding a subtype like this:

type MySubType = {
  name: string;
  category: string[];
  urls: string[];
};

type MyType = {
  default: MySubType;
  [key: string]: MySubType;
};

Deciphering the TypeScript type in question - tips and tricks

Answer №1

Similar questions

How to programmatically close an Angular 5 Modal

Angular 5's data display glitch

It takes a brief moment for CSS to fully load and render after a webpage has been loaded

Using the input type 'number' will result in null values instead of characters

Component fails to navigate to the page of another component

The element 'flat' is not found within the specified type

How to customize Material UI Autocomplete options background color

Tips for manually inputting dates in Primeng Calendar Datepicker with the slash "/" symbol

Expanding one type by utilizing it as an extension of another type

Containerizing Next.js with TypeScript

Discovering the generic type from an optional parameter within a constructor

Clicking on the image in Angular does not result in the comments being displayed as expected

It appears that Yarn is having trouble properly retrieving all the necessary files for a package

When delving into an object to filter it in Angular 11, results may vary as sometimes it functions correctly while other times

Create the HTTP POST request body using an object in readiness for submission

Enhancing React Flow to provide updated selection and hover functionality

What is the best way to choose a key from a discriminated union type?

What is the method for ensuring TypeScript automatically detects the existence of a property when an object is statically defined?

Pass data between different parts of the system

Ways to supersede an external TypeScript interface