Defining object properties in TypeScript types

Let me explain the issue in a simple way

I have a type consisting of predefined strings like:

type myType = 'name' | 'age' | 'family' | 'other';

I want to define a type that enforces these strings to be used

const myObject: myCastType<myType> = {
    name: 'string',
    age: 'string',
    family: 'string',
    other: 'string',
}

What I need to create is myCastType

The missing piece is how to mandate an object to have properties named after the supplied types

To clarify, I don't want to explicitly declare a type like:

type Person = { name: string, age: string, family: string, other: string }

const myObject: Person = { ... }

The challenge is that the specific properties like 'name', 'age', etc. are unknown and may vary in different implementations, requiring dynamic definition

I've attempted various methods like Pick, Record, Extract, etc., but haven't found a solution yet

If anyone has suggestions or can point me in the right direction with relevant resources, please feel free to share

Answer №1

It's worth mentioning that the "cast type" is already available as Record:

type MyType = "name" | "age" | "family" | "other";

const myObject: Record<MyType, string> = {
    name: "string",
    age: "string",
    family: "string",
    other: "string",
};

Record<MyType, string> signifies "a record (object) with property names from MyType [which can be a simple type or a union] and values of string."

If any of those properties are omitted, TypeScript will flag the object as invalid.

Example in the Playground

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

Ensure all fields in an interface are nullable when using TypeScript

Is it possible to create type constraints in TypeScript that ensure all fields in an interface have a type of null? For example, if I want to write a validation function that replaces all false values with null, how can I achieve this? interface y { ...

Enhance the express request to include the user parameter for the passport

I am currently utilizing Passport for authentication in an Express application. This authenticates the user and sets it on the Express response. As I am using TypeScript, trying to set the request type to Request in the route definitions results in an erro ...

What is the functionality of mergeMap in handling errors?

In our unique scenario, we are dealing with a specific use case where we need to load 200 images 10 at a time. Utilizing MergeMap with concurrency in rxjs seems like the ideal approach for handling 200 HTTP requests and executing them in batches of 10. How ...

Exploring Pan Gestures in Ionic 3

Looking for information on Pan events in Ionic 3 - not sure if they are related to Cordova or Angular 4? <div class="swipper" #swipper (panleft)="swipe( $event)" (panright)="swipe( $event)" (panend)="swipe( $event) " (panup)="swipe( $event) " (pandown) ...

Declaring TypeScript functions with variable numbers of parameters

Is it possible to define a custom type called OnClick that can accept multiple types as arguments? How can I implement this feature so that I can use parameters of different data types? type OnClick<..> = (..) => void; // example usage: const o ...

Unlocking the power of vscode webview with acquireVsCodeApi in a React project

Currently, I am in the process of creating a new extension for Visual Studio Code using Webview. However, I am encountering difficulties with sending messages from the client to the extension. To kickstart the project, I decided to utilize this awesome rep ...

Images are failing to render on Next.js

Hello there! I am facing an issue while working on my Next.js + TypeScript application. I need to ensure that all the images in the array passed through props are displayed. My initial approach was to pass the path and retrieve the image directly from the ...

Vue encountered a double loading issue when utilizing a library compiled with Webpack

I am facing an issue with my TypeScript library of Vue components that gets compiled into a single JS file using Webpack. The problem arises when the TypeScript project consuming this library also depends on Vue. Upon running the application, I noticed tha ...

Accessing information from an Odata controller in Angular2

Greetings as a first-time question asker and long-time reader/lurker. I've been delving into learning angular2, but I'm facing some challenges when it comes to retrieving data from an odata controller. In my simple Angular 2 application, I'm ...

Can we categorize various types by examining the characteristics of an object?

Is it feasible with TypeScript to deduce the result below from the given data: const data = { field1: {values: ['a', 'b', 'c']}, field2: {values: ['c', 'd', 'e'], multiple: true} } const fiel ...

The unexpected identifier 'express' was encountered in the import call, which requires either one or two arguments

I'm in the process of constructing an express server using typescript and Bun. Recently, I completed my register route: import express from "express"; const router = express.Router(); router.get('/registerUser',(_req:express.Reque ...

What's preventing access to class property in TypeScript when using asynchronous methods?

Consider the following TypeScript class: class Greeter { greeting: string; constructor(message: string) { this.greeting = message; } greet() { return "Hello, " + this.greeting; } thisworks(input) { console.log("I am " + input) ; ...

Verify user using Cognito user pool log-in information

Is it possible to authenticate a user using only user pool credentials without an identity pool/IdentityPoolId? Check out this link for more information: https://github.com/aws/amazon-cognito-identity-js The example provided in the link above specifically ...

Frozen objects in Typescript 2 behave in a variety of ways depending on their shape

Let's say I'm working with an object whose inner structure is unknown to me because I didn't create it. For instance, I have a reference to an object called attributes that contains HTML attributes. I then made a shallow copy of it and froze ...

Apply a different background color to ion-item when it is clicked

Is there a way to change the background color of an ion-item when it is clicked by a user? Any help on how to achieve this would be greatly appreciated. Here's an example code snippet: <ion-item (click)="openDetail(variant)">{{variant.Product ...

Using React to iterate through the child components of the parent

I have created a component that can accept either a single child or multiple children. Here is an example with multiple children: <SideDataGridItem> <div id='top'> <div>A1</div> <div>B1</div> ...

Is there a way to assign DTO to an entity within typescript?

For my current project, I am utilizing Vue with TypeScript and Axios to retrieve objects from the backend. Here is an example of the object type I am working with: class Annoucement { id!: string; description?: string; deal?: Deal; realty?: ...

What potential issue could result in a property length of null error while working with a Material Data Table?

I'm experiencing a similar issue as the one discussed in this post, but none of the suggestions there have resolved my problem, and my scenario has some differences. In my case, a parent component is assigning an array to a child component's inp ...

Encountering a problem when launching the "vite-express" template on the Remix app (TSConfckParseError: error resolving "extends")

I recently launched a brand-new [email protected] project using the remix-run/remix/templates/vite-express template after executing this command: npx create-remix@latest --template remix-run/remix/templates/vite-express However, upon trying to run th ...

Similar to TypeScript's `hasOwnProperty` counterpart

When working with TypeScript objects, is there a way to loop through a dictionary and set properties of another dictionary similar to how it is done in JavaScript? for (let key in dict) { if (obj.hasOwnProperty(key)) { obj[key] = dict[key]; } } If ...