Using a typescript interface field as a reference

As I work on a react component, I am interested in passing a reference to a field within an interface. When working with interfaces, such as the example below:

interface Person {
name: String
}

I want to pass a ref specifically for accessing Person::name. This way, I can easily set this field within the component without having to write additional code each time. While I could achieve this with a function like (p: Person) -> p.name = "the name", it feels like unnecessary boilerplate.

Passing "name" as a string is another option, but it opens the door for misspellings or refactoring issues. My goal is to leverage type safety for efficiency and accuracy.

Thank you!

typescript

Answer №1

Based on the question you've presented, it seems like you're interested in passing the name property of the Person interface to a component. One way to accomplish this is by utilizing TypeScript's Pick utility type as shown below:

interface Props {
  name: Pick<Person, "name">;
}
export const Component: React.FC<Props> = (
  props: Props
): React.ReactElement<Props> => {
  // ....
};

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How to apply dynamic styling to a MatHeaderCell using NgStyle?

My goal is to dynamically style a MatHeaderCell instance using the following code: [ngStyle]="styleHeaderCell(c)" Check out my demo here. After examining, I noticed that: styleHeaderCell(c) It receives the column and returns an object, however ...

cssangulartypescriptangular-materialng-style

Employing an undeclared value as a property key within an object

I am using an object to associate one value with another, like so: const wordToNumber = { one: 1, two: 2, three: 3, } However, I have a special case where if the user tries to retrieve a value by the key undefined, I want it to return 1. To accommo ...

typescript

Ways to ensure TypeScript shows an error when trying to access an array index

interface ApiResponse{ data: Student[]; } interface Student { name: string; } Imagine a scenario where we receive an API response, and I am confident that it will contain the data field. However, there is a possibility that the data could be an empty ...

arraystypescriptinterface

Unable to allocate an object to a variable in Angular

Currently, I am facing a challenge in my HTML page. My objective is to utilize an object by fetching it from my API and storing it in a variable for future data manipulation. The API functions properly, as it returns the Parking object with all the necessa ...

javascriptangulartypescript

Integrating HTTP JSON responses into HTML using Ionic 2, Angular 2, TypeScript, and PHP: A comprehensive guide

Currently in the midst of developing my first Ionic 2 app, however, my understanding of typescript is still limited.. I aim to execute the authenticate() method within my constructor and then to: Retrieve the entire JSON response into the textarea and/o ...

htmljsonapiangulartypescript

Implementing custom query filtering in apollo-server-express

Most of the requests and changes processed by my server require authorization. But, there are a few specific resolvers that need to be public such as sign-in, register, and forgot-password. How can I enable these resolvers to be accessed selectively and au ...

typescriptauthorizationapollo-servertypegraphql

The preflight request in Angular2 is being rejected due to failing the access control check: The requested resource does not have the 'Access-Control-Allow-Origin' header

I encountered an issue while attempting to execute a basic POST request to establish an account using an API in .NET. The process fails with the mentioned warning title. Interestingly, performing the same request in Postman (an API testing tool) yields a s ...

angularhttptypescriptpostpostman

Creating an array of objects data is a breeze with Vue.js

I have an array of data containing selected items, and I need to extract the IDs from this array into a new array so that I can send only the IDs to the back-end. Sample Code method toggleSelection(rows) { console.log('this.multipleSelection : &a ...

javascripttypescriptvue.jsvuejs2

Tips for integrating Tesseract with Angular 2 and above

I'm currently exploring the use of Tesseract within one of my components for OCR processing on a file. .ts: import * as Tesseract from 'tesseract.js'; fileToUpload: File = null; handleFileInput(files: FileList) { this.fileToUpload = f ...

angulartypescriptimportocrtesseract

How would you classify a function that accepts an input of T<A>[] and returns T<A[]>?

Here are a few instances const f = <L, R>(xs: Either<L, R>[]): Either<L, R[]> => { throw new Error('Not Implemented') }; const f = <T>(xs: Promise<T>[]): Promise<T[]> => { throw new Error('Not Imp ...

typescriptfunctional-programmingnaming-conventionsnaming

Swapping out 'useResult' in graphql for Vue and Apollo: A step-by-step guide

I need to replace the useResult function that is fetching data from GraphQL with a computed function. const locationOptions = useResult( result, [], ({ getLocations }): Option[] => formatOptions(getLocations) ) Instead, I want ...

javascripttypescriptvue.jsgraphqlapollo

Adding extra fields to an existing JSON response in a TypeScript REST API

I am in need of an additional column to be added to my response data. Currently, I am fetching data from multiple REST endpoints one by one and merging the results into a single JSON format to display them in an Angular Mat table. The columns that I want t ...

javascriptnode.jsangulartypescript

Vuetify's v-data-table is experiencing issues with displaying :headers and :items

I'm facing an issue while working on a Vue project with typescript. The v-data-table component in my Schedule.vue file is not rendering as expected. Instead, all I can see is the image below: https://i.sstatic.net/AvjwA.png Despite searching extensi ...

typescriptvue.jsvuetify.js

What is the process for testing ng-select in Angular using the testing library?

Below is a list of companies displayed in an ng-select: <div class="input-group"> <ng-select role="company" id="company" class="form-control" #Company formControlName="company"&g ...

angulartypescriptangular-testing-library

Tips on incorporating esbuild extensions in the template.yaml file of AWS SAM

Currently, my TypeScript Lambda functions are managed using the AWS Serverless Application Model (SAM), and I rely on esbuild for the build process. I'm interested in incorporating esbuild plugins into my build process to enable support for TypeScrip ...

typescriptaws-lambdaserverlessaws-samesbuild

What is the correct method for packaging and using a TypeScript library built with webpack?

Recently delving into the world of TypeScript, I find myself struggling to grasp how to create a TypeScript library that can be utilized in another TypeScript module through webpack. This particular library is meant to be functional within a browser envir ...

typescriptwebpack

How to fix an unresolved TypeScript import?

Within my node_modules directory, there is a package that contains the following import statement: import { x } from 'node_modules/@types/openfin/_v2/main'; Unfortunately, I am receiving an error message stating "cannot find module 'node_mo ...

angulartypescripttypesnode-modules

How to retrieve the value of a dynamically added textbox using Angular

While working with input elements in Angular, I noticed that they did not automatically come with a value property or any other properties unless manually added. Even after setting the value property manually, it would not update accordingly. Attempting to ...

angulartypescriptclassdynamictextbox

Unused Angular conditional provider found in final production bundle

Looking for a way to dynamically replace a service with a mock service based on an environment variable? I've been using the ?-operator in the provider section of my module like this: @NgModule({ imports: [ ... ], providers: [ ... en ...

angulartypescriptaotdead-code

Tips for creating animations using parent and child components in Angular

Despite my best efforts, it seems like this should be functioning properly... but unfortunately it's not... I'm attempting to achieve a transition effect on the parent element (ui-switch-groove) while the child element (ui-switch-dongle) moves. ...

javascriptangulartypescriptanimation