Is it possible for two distinct TypeScript interfaces to share identical keys while allowing for varying values?

Question

Is it possible for two distinct TypeScript interfaces to share identical keys while allowing for varying values?

Is it possible in TypeScript to ensure that objValidator has the same keys as the obj it validates, with different key values? Any suggestions on how I can achieve this requirement? Specifically, the obj and objValidator should share identical keys.

I want to be notified if my objValidator does not possess the exact same keys as the obj.

interface obj {
  alpha: number
  beta: string
}

interface objValidator {
  alpha: {
    message: string
    valid(ALPHA'S TYPE): boolean
  }
  beta: {
    message: string
    valid(BETA'S TYPE): boolean
  }
}

typescript typescript2.0

Answer 1

Answer №1

Here is an example that demonstrates the use of mapped types with TypeScript:

interface Employee {
  name: string;
  age: number;
}

type Validator<T> = {
    [P in keyof T]: {message: string, valid: boolean};
};

let employee: Employee = { name: "John Doe", age: 30 };
let validator: Validator<Employee> =
{
  name: {
    message: "Name is required",
    valid: true
  },
  age: {
    message: "Age must be a number",
    valid: true
  }
}

Answer 2

Here is an example that demonstrates the use of mapped types with TypeScript:

interface Employee {
  name: string;
  age: number;
}

type Validator<T> = {
    [P in keyof T]: {message: string, valid: boolean};
};

let employee: Employee = { name: "John Doe", age: 30 };
let validator: Validator<Employee> =
{
  name: {
    message: "Name is required",
    valid: true
  },
  age: {
    message: "Age must be a number",
    valid: true
  }
}

Answer 3

Answer №2

My expertise may be limited, but I have a suggestion for addressing a similar need:

interface MyBase<X=any, Y=any> {
  first: X,
  second: Y,
}
export interface Example1 extends MyBase<string, number> {}
export interface Example2 extends MyBase<
  { description: string, value: Example1['first'] },
  { description: string, value: Example1['second'] }
> {}

// Now, let's try this out...
const sample1: Example1 = { first: 'greetings', second: 456 };
const sample2: Example2 = { 
  first: { description:'note', value: 'yes' },
  second: { description:'note', value: 456 },
};

Please keep in mind that enabling the allow empty interfaces setting in the tsconfig might be necessary.

Answer 4

My expertise may be limited, but I have a suggestion for addressing a similar need:

interface MyBase<X=any, Y=any> {
  first: X,
  second: Y,
}
export interface Example1 extends MyBase<string, number> {}
export interface Example2 extends MyBase<
  { description: string, value: Example1['first'] },
  { description: string, value: Example1['second'] }
> {}

// Now, let's try this out...
const sample1: Example1 = { first: 'greetings', second: 456 };
const sample2: Example2 = { 
  first: { description:'note', value: 'yes' },
  second: { description:'note', value: 456 },
};

Please keep in mind that enabling the allow empty interfaces setting in the tsconfig might be necessary.

Is it possible for two distinct TypeScript interfaces to share identical keys while allowing for varying values?

Answer №1

Answer №2

Similar questions

Using Mat-Error for Two Way Binding leads to frequent triggering of ngModelChange事件

Angular Typescript error: Trying to assign a value to 'someProperty' property of an undefined object

Tips for troubleshooting TypeScript integration tests within Pycharm

Mastering the art of utilizing Function's construct signatures within TypeScript

Testing Slack's Web API with Jest for mock purposes

Managing a click event with an element in React using TypeScript

Converting ASP .Net Core Dto's and Controllers into TypeScript classes and interfaces

Adding TH into a TABLE in Angular 2 by verifying TD elements

The Angular Material date picker unpredictably updates when a date is manually changed and the tab key is pressed

Changing the name of an Angular2 import module

Tips for linking my TypeScript document to the server

How to Reload the Active Tab in Angular 5?

Is there a way to access the value of the --base-href parameter in my Angular project during the build process?

In Vue3, when using the `script setup` with the `withDefaults` option for a nested object, its attributes are marked as required. How can this issue

Optional parameters in typed languages can either have zero or all parameters provided

Facing a 'No provider for' error in my Angular 2.0.0 application

Dealing with mouseover and mouseout events for ul li elements in Angular 9: An easy guide

Error encountered while retrieving data from Firebase and storing it in an array within an IONIC application

Is there a way to customize the scrollbar color based on the user's preference?

What steps can I take to improve this code and prevent the error "Property 'patient' does not exist on type 'Request<ParamsDictionary>'" from occurring?