An item whose value is determined by the specific type of key it possesses

Consider the following scenario:

enum MouseType {
  GENERAL_USE = 1,
  SPECIALIZED_USE = 2,
}

enum KeyboardType {
  GENERAL_USE = 3,
  SPECIALIZED_USE = 4,
}

interface MouseSpecifications {
  buttons: number;
  dpi: number;
}

interface KeyboardSpecifications {
  keys: number;
}

type Data = {
  [key in MouseType | KeyboardType]: MouseSpecifications | KeyboardSpecifications;
}

What modification can be made to Data so that the last entry results in an error?

const information: Data = {
  [MouseType.GENERAL_USE]: { buttons: 4, dpi: 800 }, // valid
  [MouseType.SPECIALIZED_USE]: { buttons: 6, dpi: 1600 }, // valid
  [KeyboardType.GENERAL_USE]: { keys: 78 }, // valid
  [KeyboardType.SPECIALIZED_USE]: { keys: 120 }, // valid
  [MouseType.GENERAL_USE]: { keys: 999 }, // should not be valid
};
typescript

Answer №1

The issue here is that

[key in MouseType | KeyboardType]: MouseSpec | KeyboardSpec

allows for mapping KeyboardSpecs to MouseType.

A potential solution could involve creating two distinct indexed types, each mapping Mouse/Keyboard-Types to their respective Specs:

type MouseData = {
    [key in MouseType]: MouseSpec;
}

type KeyBoardData = {
    [key in KeyboardType]: KeyboardSpec;
}

You can then form your desired CustomData by combining these two indexed types using an intersection type:

type CustomData = MouseData & KeyBoardData

This new CustomData type would produce the intended error message.

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

Passing props from pages to components in NextJS: A guide

My nextjs-application has a unique folder structure: components -- layouts --- header.tsx --- index.tsx pages -- index.tsx -- [slug].tsx In the [slug].tsx file, I utilize graphql to fetch data and set the props accordingly: export default ...

javascriptreactjstypescriptnext.js

Setting up TypeScript to function with Webpack's resolve.modules

Imagine having a webpack configuration that looks like this: resolve: { extensions: ['.ts', '.tsx', '.js', '.jsx', '.json'], modules: ['my_modules', 'node_modules'], }, You have a ...

typescriptwebpackmodulenode-modules

Typescript: The dilemma of losing the reference to 'this'

My objective is to set a value for myImage, but the js target file does not contain myImage which leads to an error. How can I maintain the scope of this within typescript classes? I want to load an image with the Jimp library and then have a reference to ...

node.jstypescript

Performing a series of Http Get requests in Angular 2 with an array that can

Seeking assistance with an Observable http sequence that involves making two dependent http calls to an api. The first call returns an Array of Urls, and the second call makes get requests for each url in the array and then returns the responses on the str ...

typescriptangularrxjsobservableangular2-http

What is the importance of having a reference path for compiling an AngularJS 2 project using gulp-typescript?

I wanted to modify the Angular Tour Of Heros project to utilize gulp from this Github Repository. This is the gulpfile.json file I came up with: const gulp = require('gulp'); const del = require('del'); const typescript = require(&apo ...

angulartypescriptgulp

Version 4.0 of d3 introduces an import statement that provides a __moduleExports wrapper

Having difficulty with an import statement in my D3 4.0 and Ionic2/Angular2 project. I believe the import statement is correct, as everything compiles successfully. import * as d3Request from 'd3-request'; export class HomePage { construc ...

typescriptionic2rollupjses6-modulesd3.js

Exporting Types in an NPM Package: Best Practices

Struggling to create a private NPM package for internal use within my company's Nodejs applications using Typescript. Currently, I have a basic proof of concept with some constants, but I'm having trouble structuring it in a way that is importabl ...

node.jstypescriptnpm

Utilizing v-for in Vue with TypeScript to generate multiple checkboxes

My goal was to capture the values of checkboxes and store them in an array using v-model. However, I encountered an issue where the first time I toggle a checkbox, it doesn't register. Only after checking a second box and hitting submit does the secon ...

javascripttypescriptvue.js

Importing modules that export other modules in Typescript

I am facing an issue with two modules and two classes. ModuleA, ModuleB, ClassA, and ClassB are defined as follows: export class ClassA { } export class ClassB { } The modules are structured like this: export * from './ClassA'; export module ...

typescript

The TypeScript namespace does not exist or cannot be located

Currently, I am working on coding in TypeScript. The specific code pertains to an Angular 2 application, but the main focus of my inquiry lies within TypeScript itself. Within my project, there are certain files that contain various models, such as the exa ...

angulartypescript

Executing the ngIf directive in Angular 2 when a function or click event occurs

Is there a way to display an element only when a specific function is executed or a particular click event occurs? Here's the html code snippet I'm currently working with: <sebm-google-map [latitude]="lat" [longitude]="lng" [zoom]="zoom" [map ...

typescriptangular

Encountering a 403 error with RXJS when attempting to subscribe to a websocket in Angular

I am currently searching for a resolution to this issue without making any upgrades to Angular or its dependencies, as it could potentially impact other parts of the code base package.json { "name": "angular4", "version": "1.0.0", "description" ...

c#angulartypescriptwebsocket

Issues with Typescript and TypeORM

QueryFailedError: SQLITE_ERROR: near "Jan": syntax error. I am completely baffled by this error message. I have followed the same steps as before, but now it seems to be suggesting that things are moving too slowly or there is some other issue at play. ...

sqltypescriptsqlitesyntaxtypeorm

Issue with using third-party package types in Angular library creation

My project involves creating a custom voice recognition library, and I have decided to utilize 3rd party package types called @types/dom-speech-recognition. However, upon attempting to integrate these types into my service, the compiler raised errors indic ...

angulartypescriptnpmpackage.json

Can TypeScript identify and eliminate any undefined values within an array effectively?

Is there a simple and efficient method to achieve the following: const x: (string|undefined)[] = ['aaa', undefined, 'ccc']; const y = _.filter(x, it => !!it); in order for TypeScript to correctly identify y as string[], without nee ...

typescript

Formik QR code reader button that triggers its own submission

I recently developed a custom QR code reader feature as a button within the Formik component customTextInput.tsx, but I encountered an issue where clicking on the button would trigger a submission without any value present. The following code snippet show ...

reactjstypescriptformik

The eventsource property binding in Ionic 2 calendar does not correctly refresh the view

As a newcomer to the world of Ionic, Angular, and TypeScript, I am currently working on developing a calendar that allows users to set appointments (events) and make edits or deletions to them. To achieve this functionality, I have implemented a modal for ...

angulartypescriptionic2

Issues arise when trying to type ChangeEvent in React using Typescript

After spending some time learning React with TypeScript, I encountered a problem. The prop onChangeHandler in my code takes a function to modify properties in formik values. <Formik<FormModel> initialValues={{ favorite: ...

reactjstypescript

Issue with Angular standalone component importation causing rendering issue in HTML

Recently, I started working with Angular and I am currently creating a clone using Firebase. While working on this project, Angular is throwing two errors at me: The Component AppComponent is standalone and cannot be declared in an NgModule. Should it b ...

angulartypescript

Node.js: The choice between returning the original Promise or creating a new Promise instance

Currently, I am in the process of refactoring a codebase that heavily relies on Promises. One approach I am considering is replacing the new Promise declaration with simply returning the initial Promise instead. However, I want to ensure that I am correctl ...

javascriptnode.jstypescriptes6-promise