What is the method to fix a type error while duplicating an object in `typescript`?

I'm facing an issue with the code snippet below. I have two types, MyType and MyTypeDto. My goal is to clone an instance of MyType into MyTypeDto, but I encounter a compile error on the assignment line:

Type 'string | boolean | Date' is not assignable to type 'undefined'. Type 'string' is not assignable to type 'undefined'.

How can I resolve this error?

interface MyType {
  str: string;
  bool: boolean;
  d: Date;
   ...
}

interface MyTypeDto {
  str?: string;
  bool?: boolean;
  d?: Date;
  name?: string;
  ...
}

const t: MyType = {
    str: "",
    bool: false,
    d: new Date(),
};

const keys = Object.keys(t);
const dto: MyTypeDto = {};

keys.forEach((key: string) => {
    dto[key as keyof MyTypeDto] = t[key as keyof MyType];  // encountering error here
});

Answer №1

In order to achieve the desired outcome, creating a custom copy function seems like the best approach.

const copy = (myType: MyType): MyTypeDto => {
 const { str, bool } = myType;

 return {
   str,
   bool   
 }
}

If you want to explore further options, consider checking out Destructin syntax with rest. This method is named after de-structuring, which involves breaking up the structure - exactly what you need right now.

For handling multiple properties, you can extract interface keys using ts-transform-keys available here.

import { keys } from 'ts-transformer-keys';

interface MyType {
  str: string;
  bool: boolean;
  d: Date;
}
const keysOfMyType = keys<MyType>();

console.log(keysOfMyType); // ['str', 'bool', 'd']

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

Is it possible that I am making a mistake when using the multi-mixin helper, which is causing an unexpected compiler error that I cannot

As I work on creating a multi-mixin helper function that takes in a map of constructors and returns an extended map with new interfaces, I come across some challenges. Let's first look at the basic base classes: class Alpha { alpha: string = &ap ...

click event on ion card

Attempting to handle a click event within an ion-card using Ionic 5.0.2 version has presented some challenges. Despite my efforts, I have not been successful in handling the event with the expected function. Here is a snippet of my code: Dynamic card list ...

My goal is to create a carousel using Vue 3 with the Composition API and TypeScript

Creating a carousel with Vue 3 and TypeScript has been quite challenging for me. I heard about using "vue-awesome-swiper" to build a carousel, but I couldn't find a tutorial on how to use it. Does anyone know how to utilize this tool effectively? Alte ...

Is it advisable to encapsulate my entire Express server within a TypeScript class?

After working extensively with nodeJs, I have decided to explore developing applications in Typescript. Recently, I came across various blogs (like this one) that recommend wrapping modules and the app's entry point in a class when creating a RESTful ...

Having trouble adding custom props to MUI-Material ListItemButtonProps? Facing a TypeScript error?

This particular task should be relatively straightforward. I am seeking a custom component that inherits all props from ListItemButtonProps, while also adding an extra state prop: type SidebarListItemButtonProps = ListItemButtonProps & { state: Sideb ...

What is the process for creating a coverage report for a TypeScript extension in vscode?

It appears that generating coverage reports with coveralls is not feasible for a VSCode extension built with TypeScript. Currently, I am incorporating test cases into our project https://github.com/PicGo/vs-picgo/pull/42. Despite exploring various methods ...

How can I use the target type (and maybe even the property type) as a type parameter within a decorator?

In the process of incorporating a deep-watch property decorator in Angular, the following usage has been implemented: @Component({ /* ... */ }) export class AppComp { @Watch( 'a.b.c', function (last, current, firstChange) { // ca ...

"Here's a comprehensive guide on how to connect dynamic data with angular-tree-grid components

ERROR TypeError: Cannot read property 'map' of undefined Can anyone help with binding dynamic data? I'm currently using angular-tree-grid but struggling to bind dynamic data. <html> <db-angular-tree-grid (expand)= ...

ANGULAR: Issue with filtering an array by clicking a button is not functioning

I've been attempting to apply a filter to my array by using modulo on the id when clicking multiple buttons. I initially tried using pipe but was advised to stick with .filter(). Despite watching numerous online tutorials, I keep encountering errors o ...

What causes the canLoad function to create an endless loop when rerouting?

Utilizing Angular's canLoad function in my AuthGuard to authenticate a lazy loaded module at the root of my application. If the user is not authenticated, the module will not load and the user will be directed to the login page. This process works sm ...

The axios try-catch statement encountered an unexpected token, expecting a closing parenthesis

I encountered an unexpected issue with the error message "Unexpected token, expected ")"" when I tried adding the type any to the exception variable e in the try-catch statement. It works without any errors when I remove the any type from the cat ...

What is the best way to combine two messages in the Global Message Service within an Angular application?

In a particular scenario, I am faced with the need to combine two error messages - one from a backend response and the other being a localized and translated text. The code snippet in question is as follows: this.globalMessageService.add( { key: ...

Modify the code in JavaScript without utilizing the keyword "let"

Looking for alternative approaches to avoid using let in this code snippet due to the risks associated with variable reassignment leading to bugs that are hard to debug. Any suggestions? function findNodeById<F extends ISomeOptions>( optionsList ...

The TN-Models-FP error message states that it is not allowed to use the `create` model without an associated `entity` model

Utilizing the TN-models-fp library to construct a basic api inspired by the provided examples, here is my implementation in api.ts: import { axios } from '../axios-instance' import { createApi } from '@thinknimble/tn-models-fp' import { ...

Using Vue with Typescript to leverage generics for interfaces

What is the proper syntax for allowing any type that extends a base type in this specific scenario? interface SomeBase {} interface A extends SomeBase {} interface B extends SomeBase {} interface Foo { bar: // Can be an array of A or B } Is it simply ba ...

Universal function for selecting object properties

I've recently delved into TypeScript coding and have run into a puzzling issue that has me stumped. Take a look at the code snippet below: interface testInterface { a: string; b: number; c?: number; } const testObject: testInterface = { a: & ...

When using react-admin with TypeScript, it is not possible to treat a namespace as a type

Encountering issues while adding files from the react-admin example demo, facing some errors: 'Cannot use namespace 'FilterProps' as a type.' Snippet of code: https://github.com/marmelab/react-admin/blob/master/examples/demo/src/orde ...

Launch the Image-Infused Modal

I am completely new to the world of Ionic development. Currently, I am working on a simple Ionic application that comprises a list of users with their respective usernames and images stored in an array. Typescript: users = [ { "name": "First ...

Important notice: It is not possible to assign refs to function components. Any attempt to do so will result in failure. If you intended to assign a ref, consider

My console is showing a warning when I use the nextJs Link component. Can someone assist me in resolving this issue and providing an explanation? Here is the message from the console: https://i.stack.imgur.com/jY4FA.png Below is a snippet of my code: im ...

Having trouble navigating using router.navigate in the nativescript-tab-navigation template?

I have everything properly configured in my routes and no errors are popping up. When the initial tab is loaded, I am attempting to automatically switch to the second tab based on whether the user is logged in or not. tabs-routing.module.ts file: import ...