Avoid using @ts-ignore in TS and Vue3 to handle the error of a "boolean" type not being compatible with a "never" type

Hey everyone, I could really use some help with fixing a typing error related to interfaces. It's been driving me crazy and I'm not sure how to resolve it without using @ts-ignore.

Here is the function causing the issue:

function proceed() {
  // @ts-ignore
  let mockOptions: MockOptions = {};
  Object.keys(models).forEach((modelKey) => {
    const _modelKey = modelKey as keyof MockOptions;
    const model = models[_modelKey];

    // @ts-ignore
    if (model.id.includes("not")) {
      mockOptions[_modelKey] = false;
    } else {
      mockOptions[_modelKey] = true;
    }
  });

  emit("proceed", mockOptions);
}

And here is the interface being used:

export interface MockOptions {
  hasHotelComment: boolean;
  isInStornofrist: boolean;
  withDifferentBillingAddress: boolean;
  paymentOption: string;
}

What am I trying to accomplish? I am rendering RadioButtons based on the data from my Mock in order to change show case properties. Typically, these properties are booleans but now I want to introduce strings so I can assign values based on the selected Radio button. However, I keep getting an error when adding 'paymentOption: string'. If I switch it back to 'boolean', the error goes away:

TS2322: Type 'boolean' is not assignable to type 'never'.
const _modelKey: keyof MockOptions

javascripttypescriptvue.jsvuejs3typing

Answer №1

To create a custom type that includes only keys with boolean values in an object, you can utilize a mapped type:

type BooleanKeys<T> = keyof {[K in keyof T as T[K] extends boolean ? K : never]: any}

const _modelKey = modelKey as BooleanKeys<CustomSettings>; // "isDarkMode" | "hasNotifications" | "autoRefresh"

If you want to understand the process better, let's break it down step by step:

type BooleanKeys<T> = keyof         
{                                 
   K in keyof T                     
   as                               
   T[K] extends boolean ? K : never 
  ]: any                           
 }

The key remapping is achieved through the use of the as keyword, for more details you can refer to the official TypeScript documentation.

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

Encountering difficulties in storing array data into MongoDB collection

I am facing an issue with connecting to two different MongoDB instances using different URLs. One URL points to a remote connection string while the other one is for a local MongoDB instance. Initially, I establish a connection to MongoDB using MongoClient ...

javascriptnode.jsmongodbexpressmongodb-query

The issue is that the JavaScript output is not being displayed after submitting the HTML

I'm looking to add not only a submit button for the default form action, but also an extra button for a second action. Here is the code I have so far: <html> <head><title></title> <?PHP $Input = ""; if(isset($_POST['I ...

phpjavascriptforms

Keep an eye out for a specific attribute within a Vue component

Is it possible to have an asynchronous operation in the parent component and then notify the child component once it has completed? Can I set up a watch in the child component to detect when a specific property changes, similar to the following example: ...

javascriptvue.jsvuejs2

Exploring the seamless integration of okta-vue within VueCLI4

Currently, I am in the process of setting up a Vue authentication page using the Okta-Vue package. The tutorial that I am following can be found here: . For this particular project, I have opted to use VueCLI 4. Following the creation of the project, my ne ...

vue.jsvuejs3vue-clioktaokta-api

TypeScript is throwing an error, indicating that it only expects a single key in the object instead of

Here is the code snippet I am working with: import React from 'react'; import {useState} from 'react'; type Configurations = { mysql: { datasourceName: string; host: string; port: string; databaseName: string; ...

reactjstypescript

Utilizing Vuex to manage the state of modal components within a list of child components

I am attempting to utilize vuex to maintain a value that controls the visibility of a modal in a child component. The parent component renders the child component multiple times in a list, but the modal consistently displays only the last item in the list. ...

javascriptvue.jsvuejs2vuexquasar

Error message "jQuery ajax call receiving 405 (POST method not permitted) within Laravel application"

I'm really struggling with this issue. Could it be related to an Apache configuration? I've come across some filters.php configurations for adding POST, but if that were the problem, wouldn't it be documented in Laravel's official docs? ...

javascriptphpajaxlaravellaravel-4

Guide to adding files to a WordPress post with Selenium in Python

I attempted to automate the creation of WordPress post content using Selenium Webdriver (Python), but I encountered an issue with uploading files in the post content. Despite searching for a solution, most methods involved send_keys which is not suitable f ...

javascriptpythonwordpressseleniumfile-upload

Issues have been observed with the keyframe animation involving a JavaScript timer, specifically in the rotation of the outer circle around the inner circle

I seem to be encountering an issue with an animation. My goal is to have three arrows in a circle that rotate around an inner circle and pause every 3 seconds for another 3 seconds before continuing to rotate. However, instead of rotating smoothly, the ani ...

javascripthtmljquerycss

Leveraging angular.forEach for JSON Iteration

In my app and controller, I am working on creating a "flow chart style" question and answer system. To keep track of the current question and answer, I am using variables like $scope.ActiveQuestion and an array named $scope.ActiveAnswers. I am struggling ...

javascriptarraysjsonangularjsangularjs-ng-repeat

Ways to verify the input label in Angular version 4 and above?

I'm working on an Angular component that includes a form structured like this: <form> <label for="Name">Click me</label> <input type="text" id="Name" name="Name" /> <label for="Name2">Click me 2</label> &l ...

angulartypescriptunit-testingjasminekarma-jasmine

Issue encountered with asynchronous waiting while invoking a function

var value = await this.upload(); if (value == true) { // Update item properties this.item.photos = this.uploaded; this.item.price = null; this.item.qty = null; // Add item to data service this.dataSrv.addItem(this.item) .then(() => { ...

angularjstypescriptionic-frameworkangular-promise

Do elements containing {visibility:hidden} properties exist within the HTML DOM structure?

Do HTML elements that have the css property visibility:hidden still exist within the DOM tree? ...

javascripthtmlcss

Adding properties to a class object in Javascript that are integral to the class

Recently, I've been contemplating the feasibility of achieving a certain task in JavaScript. Given my limited experience in the realm of JavaScript, I appreciate your patience as I navigate through this. To illustrate what I am aiming for, here' ...

javascriptnode.jstypescriptecmascript-6

Service update causing $scope in Ionic Angular Cordova to remain stagnant

As a newcomer to Angular, I've been working on a project to create an app that can answer questions, select images, and send data to the server. I'm facing some challenges with updating the scope properly when a user selects an image. It seems l ...

javascriptangularjscordovaionic-framework

Nuxt - varied scrollToTop functionality based on the previous page visited

On my website, I have a 'page' that has links to itself with different parameters. I am familiar with the scrollToTop attribute that determines whether the page will start at the top scroll position upon entering. However, I want the scrolling b ...

vue.jsnuxt.js

I aim to retrieve the names of all directories

I am seeking assistance from seniors in creating a dropdown list of root directories using PHP. I have almost completed the task, but I am facing an issue with not being able to retrieve the root directory. For example, I want all directories like home/ab ...

javascriptphpajaxroot

Find keys in an array based on a specified value

I need to retrieve an array of keys from an object that match a specified value ...

javascriptarraystypescriptobjectecmascript-6

What is the best way to locate an item within a Redux array when working with TypeScript?

Below is the content of my slice.ts file. interface iItem { Category: string; Id: string; } interface iDataState { Items: Array<iItem>; } const initialState: iDataState = { Items: [], }; reducers: { updateItem: (state, action: PayloadAc ...

reactjstypescriptreduxredux-toolkit

Show all column data when a row or checkbox is selected in a Material-UI datatable

I am currently working with a MUI datatable where the properties are set as below: data={serialsList || []} columns={columns} options={{ ...muiDataTableCommonOptions(), download: false, expa ...

javascriptreactjsmaterial-uimui-datatable