Exploring index type signatures in TypeScript

Question

Exploring index type signatures in TypeScript

I'm relatively new to using TypeScript and I am trying to define a type similar to the following:

type U = { [key: string]: number }; // any string for the keys
type T = { [key: string]: U };      // again, any string for the keys

Here's an example of how it would be used:

const test: T = {
    'aaa': {
        'xxx': 777,
        'yyy': 888,
        'zzz': 999  // expecting an error here
    },
    'bbb': {
        'xxx': 444,
        'yyy': 555,
        'ooo': 666  // expecting an error here
    }
};

Is there a more sophisticated signature that can ensure all properties of U within T will have the same keys?

typescript

Answer 1

Answer №1

To mandate specific keys within an interface, you can utilize an index signature:

interface CustomInterface { 
  [key: string]: number;
  xxx: number;
  yyy: number;
  zzz: number; 
};

If the goal is to ensure two objects share the exact same keys, you can achieve this using generics:

interface BaseDataType<T> {
  xxx: T;
  yyy: T;
  zzz: T; 
}

type PrimaryType = BaseDataType<number>;
type SecondaryType = BaseDataType<PrimaryType>;

Answer 2

To mandate specific keys within an interface, you can utilize an index signature:

interface CustomInterface { 
  [key: string]: number;
  xxx: number;
  yyy: number;
  zzz: number; 
};

If the goal is to ensure two objects share the exact same keys, you can achieve this using generics:

interface BaseDataType<T> {
  xxx: T;
  yyy: T;
  zzz: T; 
}

type PrimaryType = BaseDataType<number>;
type SecondaryType = BaseDataType<PrimaryType>;

Answer 3

Answer №2

Specify U with specific attributes to achieve the desired functionality:

type U = {
    "xxx": number,
    "yyy": number;
    "zzz": number;
}
type T = { [key: string]: U }

This approach helps catch errors like ooo:

const test: T = {
    'aaa': {
        'xxx': 777,
        'yyy': 888,
        'zzz': 999
    },
    'bbb': {
        'xxx': 444,
        'yyy': 555,
        'ooo': 666  // error expected here
    }
};

You can experiment on the Playground using this link for a complete example.

Answer 4

Specify U with specific attributes to achieve the desired functionality:

type U = {
    "xxx": number,
    "yyy": number;
    "zzz": number;
}
type T = { [key: string]: U }

This approach helps catch errors like ooo:

const test: T = {
    'aaa': {
        'xxx': 777,
        'yyy': 888,
        'zzz': 999
    },
    'bbb': {
        'xxx': 444,
        'yyy': 555,
        'ooo': 666  // error expected here
    }
};

You can experiment on the Playground using this link for a complete example.

Exploring index type signatures in TypeScript

Answer №1

Answer №2

Similar questions

Establish a route nickname for files outside the project directory

Using TypeScript, you can utilize RxJS to generate a fresh Observable named "Array" from a static array

Loop through the coefficients of a polynomial created from a string using JavaScript

Angular error: Trying to assign a value of type ArrayBuffer to a string type

How can we declare and showcase a generic object with an unspecified number and names of keys in React using TypeScript?

The Angular application is not functioning properly after running npm start, even though all the necessary packages have

What is the correct way to initialize an object in Angular 5?

Exploring the power of TypeScript with React-Router

Middleware fails to execute on routing in Nextjs 13.4 application

What could be causing the parameter "id" to be undefined in Nest JS

Troubleshooting the issue with mocking the useTranslation function for i18n in JEST

What could be causing this error when running nodemon in an Angular TS file?

The Word Document is unable to locate the module or its associated type declarations

A guide on activating the <b-overlay> component when a child triggers an Axios request in vue.js

Help! I keep getting the NullInjectorError in the console saying there is no provider for Subscription. Why is this happening?

Adjust the dimensions of the mat-icon-button

Guide on integrating react-tether with react-dom createPortal for custom styling of tethered components based on their target components

Top method for extracting a correlation matrix using an API endpoint

Adding a custom type to a selected option for the onChange event in React-Select can be done by modifying the

Tips for updating the front end with the status of a lengthy playwright test