Utilizing TypeScript to reference keys from one interface within another interface

Question

Utilizing TypeScript to reference keys from one interface within another interface

I have two different interfaces with optional keys, Obj1 and Obj2, each having unique values:

interface Obj1 {
  a?: string
  b?: string
  c?: number 
}

interface Obj2 {
  a: boolean
  b: string
  c: number 
}

In my scenario, Obj1 is used as an argument for a function, while Obj2 represents the return type of that function. I need the return type to only include the keys present in Obj1. For example, if Obj1 only has keys a and b, then Obj2 should also have only keys a and b.

I attempted the following approach, but encountered a TypeScript error

Type 'Property' cannot be used to index type 'ValueType'

type Obj1KeysWithObj2Values<KeyType extends Obj1, ValueType extends Obj2> = {
  [Property in keyof KeyType]: ValueType[Property]
}

UPDATE: Here's how the function and its call look like:

const myFunc = <T extends Obj1>({ a, b, c }: T) => {
  const returnObj: Partial<Obj2> = {}
  if (a) {
    returnObj.a = true
  }
  if (b) {
    returnObj.b = '1'
  }
  if (c) {
    returnObj.c = 20
  }
  return returnObj as Obj1KeysWithObj2Values<T, Obj2>
}

const resultObj = myFunc({ a: 'hello', b: 'hello' })

If you test it out, you'll notice that the resultObj will contain whatever was passed to the function within the Obj1 interface, regardless of Obj2.

typescript

Answer 1

Answer №1

It's recommended to utilize the Pick<Type, Keys> method from the standard library:

interface Object1 {
 a?: string
 b?: string
 c?: string
}

interface Object2 {
 a?: boolean
 b?: boolean
 c?: boolean
}

type Result = Pick<Object2, keyof Object1>

The first argument represents the source object, while the second argument signifies a union of keys that should be selected.

In your scenario, you'll also need to intersect the keys of Object1 and Object2:

interface Object1 {
  a?: string
  b?: string
  c?: number
}

interface Object2 {
  a: boolean
  b: string
  c: number
}

const myFunction = <T extends Object1>({ a, b, c }: T) => {
  const returnObj: Partial<Object2> = {}
  if (a) {
    returnObj.a = true
  }
  if (b) {
    returnObj.b = '1'
  }
  if (c) {
    returnObj.c = 20
  }
  return returnObj as Pick<Object2, keyof T & keyof Object2>
}

const resultObject = myFunction({ a: 'hello', b: 'hello' })

Try it out in the Playground

Answer 2

It's recommended to utilize the Pick<Type, Keys> method from the standard library:

interface Object1 {
 a?: string
 b?: string
 c?: string
}

interface Object2 {
 a?: boolean
 b?: boolean
 c?: boolean
}

type Result = Pick<Object2, keyof Object1>

The first argument represents the source object, while the second argument signifies a union of keys that should be selected.

In your scenario, you'll also need to intersect the keys of Object1 and Object2:

interface Object1 {
  a?: string
  b?: string
  c?: number
}

interface Object2 {
  a: boolean
  b: string
  c: number
}

const myFunction = <T extends Object1>({ a, b, c }: T) => {
  const returnObj: Partial<Object2> = {}
  if (a) {
    returnObj.a = true
  }
  if (b) {
    returnObj.b = '1'
  }
  if (c) {
    returnObj.c = 20
  }
  return returnObj as Pick<Object2, keyof T & keyof Object2>
}

const resultObject = myFunction({ a: 'hello', b: 'hello' })

Try it out in the Playground

Answer 3

Answer №2

It's important to note that while you may understand that you expect `Obj2` to always contain all the keys of `Obj1`, TypeScript lacks this knowledge and requires confirmation. To resolve this, you can utilize conditional types to verify that the property key is indeed present in the `ValueType`:

type Obj1KeysWithObj2Values<KeyType extends Obj1, ValueType extends Obj2> = {
    [Property in keyof KeyType]: Property extends keyof ValueType ? ValueType[Property] : never;
// −−−−−−−−−−−−−−−−−−−−−−−−−−−−−^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
};

Playground example

Answer 4

It's important to note that while you may understand that you expect `Obj2` to always contain all the keys of `Obj1`, TypeScript lacks this knowledge and requires confirmation. To resolve this, you can utilize conditional types to verify that the property key is indeed present in the `ValueType`:

type Obj1KeysWithObj2Values<KeyType extends Obj1, ValueType extends Obj2> = {
    [Property in keyof KeyType]: Property extends keyof ValueType ? ValueType[Property] : never;
// −−−−−−−−−−−−−−−−−−−−−−−−−−−−−^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
};

Playground example

Answer 5

Answer №3

This response is absolutely universal and it does the job.

I simply wanted to discuss something similar that I implemented to transform Date into a customized DateTimeFormatParts formatted date using Intl, although it has a touch of uniqueness.

It functioned in this manner:

// Accommodates T which possesses any or all Intl.DateTimeFormatOptions properties
export type DateFormatPartsList<T extends Intl.DateTimeFormatOptions = Intl.DateTimeFormatOptions> = {
  // adjust keys to correspond with props having result props
  [P in keyof T as P extends "fractionalSecondDigits"
    ? "fractionalSecond"
    : P extends "hour12"
    ? "dayPeriod"
    : P]?: string;
};

// input type for my invoking function
export type DateIntlPreferences<T extends Intl.DateTimeFormatOptions = Intl.DateTimeFormatOptions> = {
  locale?: string | string[];
  options?: T;
};

// the method that converts formatted intl array sections to my custom object type.
export function ToDateFormatSections<T extends Intl.DateTimeFormatOptions = Intl.DateTimeFormatOptions>(
  val: number | string | Date,
  intl?: DateIntlPreferences<T>
): DateFormatPartsList<T> {
  const formatVal = new Date(val);
  const condensed: DateFormatPartsList<T> = {};
  Intl.DateTimeFormat(intl?.locale, intl?.options ?? { day: "2-digit", month: "short", year: "numeric" })
    .formatToParts(formatVal)
    .forEach(({ type, value }) => {
      if (type === "literal") return;
      condensed[type] = value;
    });
  return condensed;
}

Implementing this to your scenario, you can formulate a bespoke type grounded on the original:

// instead of obj2 interface:
type Obj2FromObj1<T extends Obj1> = {
  [K extends keyof T]: boolean;
} // or a shorter version: Record<keyof T, boolean>

Now you can construct a function to solely provide what properties are defined in the obj1:

function Obj2ValuesFromObj1<T extends Obj1>(args: T): Obj2FromObj1<T> {
  // your approach here.
}

Answer 6

This response is absolutely universal and it does the job.

I simply wanted to discuss something similar that I implemented to transform Date into a customized DateTimeFormatParts formatted date using Intl, although it has a touch of uniqueness.

It functioned in this manner:

// Accommodates T which possesses any or all Intl.DateTimeFormatOptions properties
export type DateFormatPartsList<T extends Intl.DateTimeFormatOptions = Intl.DateTimeFormatOptions> = {
  // adjust keys to correspond with props having result props
  [P in keyof T as P extends "fractionalSecondDigits"
    ? "fractionalSecond"
    : P extends "hour12"
    ? "dayPeriod"
    : P]?: string;
};

// input type for my invoking function
export type DateIntlPreferences<T extends Intl.DateTimeFormatOptions = Intl.DateTimeFormatOptions> = {
  locale?: string | string[];
  options?: T;
};

// the method that converts formatted intl array sections to my custom object type.
export function ToDateFormatSections<T extends Intl.DateTimeFormatOptions = Intl.DateTimeFormatOptions>(
  val: number | string | Date,
  intl?: DateIntlPreferences<T>
): DateFormatPartsList<T> {
  const formatVal = new Date(val);
  const condensed: DateFormatPartsList<T> = {};
  Intl.DateTimeFormat(intl?.locale, intl?.options ?? { day: "2-digit", month: "short", year: "numeric" })
    .formatToParts(formatVal)
    .forEach(({ type, value }) => {
      if (type === "literal") return;
      condensed[type] = value;
    });
  return condensed;
}

Implementing this to your scenario, you can formulate a bespoke type grounded on the original:

// instead of obj2 interface:
type Obj2FromObj1<T extends Obj1> = {
  [K extends keyof T]: boolean;
} // or a shorter version: Record<keyof T, boolean>

Now you can construct a function to solely provide what properties are defined in the obj1:

function Obj2ValuesFromObj1<T extends Obj1>(args: T): Obj2FromObj1<T> {
  // your approach here.
}

Answer 7

Answer №4

I stumbled upon this insightful piece of code, which I didn't write myself but find highly valuable. It seems to have been shared by another user, although the authorship is now unknown since it was later removed.

type Obj1KeysWithObj2Values<KeyType extends Obj1, ValueType extends Obj2> = {
  [Property in keyof KeyType]: Property extends keyof ValueType ? ValueType[Property] : never;
};

My interpretation of this snippet, subject to your enhancements, is that Obj1KeysWithObj2Values represents a generic type with two parameters:

KeyType, extending from the type of the function parameter.
ValueType, extending from the type of the function return value.

The type defines a new object where the keys are derived from KeyType and the value types are based on properties found in ValueType, or defaulted to never if not present.

Answer 8

I stumbled upon this insightful piece of code, which I didn't write myself but find highly valuable. It seems to have been shared by another user, although the authorship is now unknown since it was later removed.

type Obj1KeysWithObj2Values<KeyType extends Obj1, ValueType extends Obj2> = {
  [Property in keyof KeyType]: Property extends keyof ValueType ? ValueType[Property] : never;
};

My interpretation of this snippet, subject to your enhancements, is that Obj1KeysWithObj2Values represents a generic type with two parameters:

KeyType, extending from the type of the function parameter.
ValueType, extending from the type of the function return value.

The type defines a new object where the keys are derived from KeyType and the value types are based on properties found in ValueType, or defaulted to never if not present.

Utilizing TypeScript to reference keys from one interface within another interface

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Creating a custom class to extend the Express.Session interface in TypeScript

Tips for ensuring proper dependency regulations in javascript/typescript/webpack

Angular 2 Issue: @Input() Directive Not Recognized - Unresolved Reference Error

What are the steps to utilize a personalized validation access form within a component?

How do I modify the local settings of the ngx-admin datepicker component to show a Turkish calendar view?

Vercel: Failed to create symbolic link, permission denied

The attribute 'body' cannot be found in the specified 'Request' type

What is the best way to retrieve props for computed properties using Vue with Typescript?

Understanding the appropriate roles and attributes in HTML for a modal backdrop element in a TypeScript React project

Encountered an error with API request while utilizing Cashfree in a React Native environment

What benefits does a bundler offer when releasing packages on npm?

Encountering a Nextjs hydration issue after switching languages

Utilizing Typescript and Jest to prevent type errors in mocked functions

Why are traditional Angular dependencies still necessary even when typedefinitions are being used?

What is the best way to dynamically add data to a JSON file?

problem encountered when running "ionic cordova build android --prod --release"

Node was experiencing difficulty locating a module alias that had been defined in the tsconfig file and package.json

What is the best method to terminate an Electron application using TypeScript?

What is the best way to organize checkboxes (either checked or unchecked) within a mat-table?

Using TypeScript, we can assign a JSON object to an extended class by leveraging the