Implement an interface with a specific number of properties in TypeScript

Question

Implement an interface with a specific number of properties in TypeScript

I am attempting to create a custom type that defines an object with a specific number of key-value pairs, where both the key and value are required to be numbers. Here is what I envision:

type MatchResult = {
  [key: number]: number;
  [key: number]: number;
}

This particular type is meant to represent the result of a match between two teams, with the team ID as the key and the number of goals scored as the value (a practical application of this type).

However, there is an issue in the example above - it's not valid to have multiple index types defined.

typescript

Answer 1

Answer №1

If you're unsure of the keys in advance, they can be any number, allowing for a dynamic setup:

type MatchResult = {
 [key: number]: number
}

However, if you know the keys beforehand, you can specify them explicitly like so:

type MatchResult = {
 111: number,
 222: number
}

This enables accessing values using a[111], but not with undefined keys like a[232] assuming a is of type MatchResult.

Creating a type with exactly 2 integer keys may not be achievable in TypeScript as it would require contextual tracking of each object with type MatchResult.

A more practical approach would be defining a specific type, such as:

type TeamResult {
 id: number;
 result: number;
}

type MatchResult {
 host: TeamResult;
 guest: TeamResult;
}

Answer 2

If you're unsure of the keys in advance, they can be any number, allowing for a dynamic setup:

type MatchResult = {
 [key: number]: number
}

However, if you know the keys beforehand, you can specify them explicitly like so:

type MatchResult = {
 111: number,
 222: number
}

This enables accessing values using a[111], but not with undefined keys like a[232] assuming a is of type MatchResult.

Creating a type with exactly 2 integer keys may not be achievable in TypeScript as it would require contextual tracking of each object with type MatchResult.

A more practical approach would be defining a specific type, such as:

type TeamResult {
 id: number;
 result: number;
}

type MatchResult {
 host: TeamResult;
 guest: TeamResult;
}

Implement an interface with a specific number of properties in TypeScript

Answer №1

Similar questions

A guide on crafting a type definition for the action parameter in the React useReducer hook with Typescript

Verification for collaborative element

Is it possible to deactivate input elements within a TypeScript file?

Does a <Navigate> exist in the react-router-dom library?

TypeORM - Establishing dual Foreign Keys within a single table that point to the identical Primary Key

What are the benefits of using one state in React with useState compared to having multiple states?

Can we set a specific length for an array passed in as a prop?

The retrieval of cookies from the Response object is not possible with Typescript

showcasing products from database with the help of Angular 12

When working with TypeScript in Node, the module ""http"" does not have a default export available

Numerous toggle classes available

Issue with ReactJS Typescript: Cannot assign type 'number' to type '0, 8, 16, 24, 32, 40, or undefined'

How do I disable split panel on Ionic 2 login page exclusively?

Error: The type 'boolean | (() => void)' cannot be assigned to type 'MouseEventHandler<HTMLButtonElement> | undefined'

React: Content has not been refreshed

What is the correct method for importing React in TypeScript (.tsx) to ensure optimal integration?

Is it better to convert fields extracted from a JSON string to Date objects or moment.js instances when using Angular and moment.js together?

What is the safest method to convert a nested data structure into an immutable one while ensuring type safety when utilizing Immutable library?

NestJS Logger: Issue setting logger types in main.ts

Exploring the process for transitioning between pages within Angular