Use TypeScript to selectively return a portion of the interface

Question

Use TypeScript to selectively return a portion of the interface

I am faced with a User interface structured as follows

interface IUser {
    name: string,
    phoneNumber: string
}

and another interface called PublicUser structured like this

interface IPublicUser {
   name: string
}

The goal is to extract only public information from an object of type IUser.

I attempted the following approach:

 const user: IUser = {
   name: 'Eliott',
   phoneNumber : '+1...'
}

console.log(user as unknown as  IPublicUser)

However, it consistently returns the full user object.

To solve this issue temporarily, I created a method called toPublicJson to selectively return the desired field. However, this solution is not ideal since any changes in my interface will necessitate updating this method as well.

Do you have any suggestions or advice?

Thank you

javascript typescript

Answer 1

Answer №1

It is important to keep in mind that TypeScript ultimately compiles down to JavaScript. Statements like variable as type may not carry through the transpilation process, as they are merely guidelines for the transpiler and user, with no real impact. Similarly, interfaces serve as aids for the compiler, but hold no significance at runtime.

If you wish to achieve this functionality, manual intervention is required to create a new object with specific properties:

const publicUser : IPublicUser = { name: user.name };

While your primary concern may be how other developers interact with your code – ensuring they see the constraints of the IPublicUser interface and receive compile-time errors for any unauthorized properties usage – if you seek a deeper understanding of the code execution process, explicit actions are necessary.

Answer 2

It is important to keep in mind that TypeScript ultimately compiles down to JavaScript. Statements like variable as type may not carry through the transpilation process, as they are merely guidelines for the transpiler and user, with no real impact. Similarly, interfaces serve as aids for the compiler, but hold no significance at runtime.

If you wish to achieve this functionality, manual intervention is required to create a new object with specific properties:

const publicUser : IPublicUser = { name: user.name };

While your primary concern may be how other developers interact with your code – ensuring they see the constraints of the IPublicUser interface and receive compile-time errors for any unauthorized properties usage – if you seek a deeper understanding of the code execution process, explicit actions are necessary.

Use TypeScript to selectively return a portion of the interface

Answer №1

Similar questions

React TypeScript - creating a component with a defined interface and extra properties

Is it possible for the binding model of Mat-Checkbox to be optional or null?

Changing the URL parameters to accommodate a specific query

Methods for altering the color of a div using addEventListener

Experiencing a 403 Error while using request-promise to extract price data from a website

Looking for assistance in retrieving a document by its reference id from Firestore using ReactJS?

Downloading a file utilizing Selenium through the window.open method

How to dynamically update data in Angular without the need for a page refresh or loading?

Obtaining rotate3d values using JavaScript / jQuery

Looking to include some extra padding when an item is displayed - jQuery

What security measures does Angular implement to safeguard against malicious user input?

Managing the vertical space within a nested accordion section

Having difficulty retrieving the necessary information for manipulating the DOM using Express, Ajax, and Axios

Apply a spread of nested elements onto another spread

Tips for eliminating the undefined/null values from an array nested within another array in Angular

Deleting the initial line in a JSON reply

access the ckeditor within the frame

Modify the getAttribute value if it is null

Having trouble loading my script in the frontend plugin?

``In JavaScript, the ternary conditional operator is a useful