Validating a TypeScript type against an enum

I have two categories, the first one being an enum:

enum Vehicle {
   Car = 'car',
   Plane = 'plane',
}

The second category is a regular object that utilizes the enum as keys:

type VehicleProperties = {
   [Vehicle.Car]: { amountOfWheels: number };
   [Vehicle.Plane]: { amountOfWings: number };
}

How can I create a type VehicleConfig that combines both and meets the following requirements:

const vehicle: VehicleConfig = {
   type: Vehicle.Car,
   properties: {
      amountOfWheels: 4,
   }
}

Answer №1

To implement a custom mapped type, you can define it as follows:

type VehicleConfig= {
    [P in keyof VehicleProperties]: {
        type: P,
        properties: VehicleProperties[P]
    }
}[keyof VehicleProperties]

const vehicle: VehicleConfig = {
   type: Vehicle.Car,
   properties: {
      amountOfWheels: 4
   }
}

Playground Link

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

Typescript allows for the creation of a static class that can be accessed without needing to instantiate it

My goal is to design a TypeScript class that can be accessed directly without the need to create new instances. This is necessary because some classes will modify the variables in this shared class, while others must reference those changes. Below is the ...

The TypeScript error message is saying that it cannot find the property 'push' of an undefined value, resulting in a error within the

Issue: Unable to access property 'push' of undefined in [null]. class B implements OnInit { messageArr: string[]; ngOnInit() { for(let i=0; i<5; i++) { this.messageArr.push("bbb"); } } } ...

Tips for utilizing window.scrollTo in order to scroll inside an element:

I'm experiencing an issue where I have a vertical scrollbar for the entire page, and within that, there's an element (let's call it 'content') with a max-height and overflow-y scroll. The 'content' element contains child ...

How can you ensure a code snippet in JavaScript runs only a single time?

I have a scenario where I need to dynamically save my .env content from the AWS secrets manager, but I only want to do this once when the server starts. What would be the best approach for this situation? My project is utilizing TypeScript: getSecrets(&qu ...

What could be causing a compile error in my React and TypeScript application?

I recently downloaded an app (which works in the sandbox) from this link: https://codesandbox.io/s/wbkd-react-flow-forked-78hxw4 However, when I try to run it locally using: npm install followed by: npm start I encounter the following error message: T ...

Express TypeScript Error Handling Function

What are the different data types for the four parameters used in the error handling function in Typescript? app.use((err: ??, req: ??, res: ??, next: ??) => { }); While working in VS Code, I noticed red wiggly lines under all four parameters without ...

Develop a simple server with NodeJS, Express, and TypeScript to handle the following tasks in separate API endpoints within the same app.ts file

PS E:\Nodejs Training\Project_1> npm run build [email protected] build tsc PS E:\Nodejs Training\Project_1> npm run start [email protected] start node dist/node app.js node:internal/modules/cjs/loader:1147 throw er ...

Issues with Angular 9 application compatibility with IE11

Our Angular 9 project runs smoothly on Google Chrome and Firefox, but nothing appears on IE11. Despite trying various solutions found online and following related blogs, the issue remains unresolved. Here is a snippet from my tsconfig.json: { // Com ...

ResizableBox is failing to render any content

My current project involves trying out react-resizable. Unfortunately, my basic example only shows the text XYZ in the browser without displaying any resizable box as expected. There are no error messages either. import { ResizableBox } from 'react-re ...

Issue with data not being assigned to TypeScript class variable

Utilizing an http call to fetch data from the backend, I am able to see the retrieved data in the browser console. However, for some reason, the data is not being assigned to the class variable as expected. The code snippet is shown below: "use strict"; ...

Typescript: organizing nested types within an interface

My goal is to create an interface CountersData based on my JSON data. The challenge lies in the nested id property, which contains an array of nested dictionaries. I want this property to be optional. However, I have not been successful in making it option ...

Tips for hiding a sidebar by clicking away from it in JavaScript

My angular application for small devices has a working sidebar toggling feature, but I want the sidebar to close or hide when clicking anywhere on the page (i.e body). .component.html <nav class="sidebar sidebar-offcanvas active" id="sid ...

Issue encountered while utilizing combineReducers: "Error: The assetsReducer returned an undefined value during initialization."

Issue: The "assetsReducer" has returned an undefined value during initialization. When the state passed to the reducer is undefined, it must explicitly return the initial state, which cannot be undefined. If no value is set for this reducer, consider using ...

Is your Angular5 service failing to transmit data?

I have two components in my code, A and B. Component A contains a form with data that I want to send to component B. However, it seems like component B is not receiving any data. Here is the code for Component A: import { MyService } from 'path/my ...

Understanding the typing inference of Symbol.species in Typescript

Imagine I have a customized MyArray<T> class that extends the built-in Array<T> class. How can I type it so that when using myMap<T>(myArr: MyArray<T>, <Function>), the return type is correctly inferred as MyArray<T> rat ...

What is the method to transfer the outcome of a GET request into a POST request?

My task involves sending a GET request to retrieve information from . When the request is made, it generates a random image and returns a JSON object that includes details such as "fileSizeBytes" and "url". My goal is to extract the "url" value and then ...

What is the best way to send a string literal as a parameter to a method triggered by a click event

I'm trying to pass a string literal to a method as a click handler. <button (click)="changeLanguage('en')">EN</button> The above code is not working. Any suggestions on how to achieve this? ...

Initiating preparation during NPM Installation

During the installation of a TypeScript module from Git, I noticed that the package.json file contains a prepare script in its scripts section. Strangely, it seems that the prepare script is not being run when using npm install <git repository#version&g ...

CDK deployment of lambda functions does not currently support the importing of Typescript modules

I’m currently using CDK to develop my serverless application in AWS. However, I encountered an issue where the lambda function fails to import TypeScript modules as JavaScript modules post TS file compilation. As a result, I am encountering a “Module ...

Issue arises when fastify/websocket is being used and an argument of type '{ websocket: boolean; }' is not compatible or able to be assigned to a parameter

I am facing an issue with my new project that involves fastify and Typescript. The error I am encountering is as follows: Argument of type '{ websocket: boolean; }' is not assignable to parameter of type 'RouteShorthandOptions ...ts(2345) B ...