TypeScript - Minimize redundancy when defining types for a class and its constructor arguments

Here is a class structure I am currently using:

class Person {
    id?: string = uuid();
    name: string;

    constructor(data: Person) {
        _.merge(this, data);
    }
}

The 'uuid' function generates an id and '_' refers to lodash.

I am facing an issue where I have a function that requires the id parameter:

function savePersonInDb(p: Person & { id: string }) {...}
However, TypeScript does not allow calling it with a new Person() instance because id is optional, even though it is always instantiated when calling the constructor.

I am aware that I could modify my class like this:

interface PersonData {
    id?: string;
    name: string;
}

class Person {
    id: string = uuid();
    name: string;

    constructor(data: PersonData) {
        _.merge(this, data);
    }
}

However, I am reluctant to rewrite all the attributes twice. Is there a more straightforward way to achieve what I need?

In my actual project, I have numerous attributes, so it would be great if I could avoid duplicating them for every class.

Thank you for your assistance!

Answer №1

If you want to create a type in TypeScript that excludes a specific property, such as 'id', you can use the Omit utility type. This will allow you to define a new type based on an existing type but without including the specified property. You can try it out in this TypeScript playground:

type OptionalId<T> = {
    id?: string
} & Omit<T, 'id'>

// PersonData is automatically updated when Person is changed
type PersonData = OptionalId<Person>;

// savePersonInDb just takes Person
function savePersonInDb(person: Person) {}

class Person {
    id: string = ''; // uuid();
    name: string = '';
    member1: number = 0;
    // member2 and so on

    constructor(data: PersonData) {
        // _.merge(this, data);
    }
}

// id is optional
const person = new Person({
    name: 'test',
    member1: 5
});

// new person object can be used.
savePersonInDb(person)

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

Utilizing Angular 4 with Ahead-Of-Time compilation in combination with Electron, as well as

I am new to Angular/Typescript and currently developing a cross-platform Desktop application with Electron and Angular 4. My current challenge involves using a Service in different components, but I need this service to be loaded from a separate file based ...

Sequelize v5 & Typescript Model Loader

Having previous experience with Sequelize for projects (v4), I am now venturing into starting a new project using Sequelize v5 & Typescript. I have been following Sequelize's documentation on how to define Models at: https://sequelize.org/master/ ...

Creating assets from typescript plugins in Angular 6: A comprehensive guide

Situation I am currently in the process of migrating from Angular 4 and Angular Seed to Angular 6 and Angular CLI. Challenge One issue I am facing is with dynamic loading of plugins within a component using SystemJS. SystemJS.import("client/plugins/" + ...

Sharing an array of React objects with PHP using REACT JS

I am new to React JS and I have a question regarding sending files as a react object array to php $_FILES using axios. Any help is appreciated, thank you in advance. Here is my react code: This is the code snippet: <Row> <Col lg={4}> ...

What is the best way to refine React Component's props with Typescript?

My setup involves utilizing two specific components: Test and Subtest. The main functionality of the Test component is to provide visual enhancements and pass a portion of its props down to the Subtest component. Some props in the Subtest component are des ...

An issue has occurred while attempting to differentiate '[object Object]'. Please note that only arrays and iterable objects are permitted

myComponent.component.ts ngOnInit() { this.getData.getAllData().subscribe( response => { console.log(response); this.dataArray = response; }, () => console.log('there was an error') ); } myservi ...

Enabling a mat-slide-toggle to be automatically set to true using formControl

Is there a way to ensure that the mat-slide-toggle remains true under certain conditions? I am looking for a functionality similar to forcedTrue="someCondition". <mat-slide-toggle formControlName="compression" class="m ...

The error thrown by Mongoose, stating "TypeError: Cannot read property 'catch' of undefined," is not caught after the data is saved

After updating to Mongoose version 5.0.15, I encountered an error that says TypeError: Cannot read property 'catch' of undefined when trying to save my object with errors found, even though everything was working fine on Mongoose version 4.13.11. ...

Issue encountered when attempting to run "ng test" in Angular (TypeScript) | Karma/Jasmine reports an AssertionError stating that Compilation cannot be undefined

My development setup includes Angular with TypeScript. Angular version: 15.1.0 Node version: 19.7.0 npm version: 9.5.1 However, I encountered an issue while running ng test: The error message displayed was as follows: ⠙ Generating browser application ...

Learn the art of generating multiple dynamic functions with return values and executing them concurrently

I am currently working on a project where I need to dynamically create multiple functions and run them in parallel. My starting point is an array that contains several strings, each of which will be used as input for the functions. The number of functions ...

Using Angular BehaviorSubject in different routed components always results in null values when accessing with .getValue or .subscribe

I am facing an issue in my Angular application where the JSON object saved in the service is not being retrieved properly. When I navigate to another page, the BehaviorSubject .getValue() always returns empty. I have tried using .subscribe but without succ ...

Angular - delay execution until the variable has a value

When the ngOnInit() function is called, the first line of code retrieves a value from local storage which is then used to filter data from the database. Both actions happen simultaneously, resulting in an issue where I don't receive the expected resu ...

The Typescript compiler has trouble locating the definition file for an npm package

Recently, I released an npm package that was written in typescript. However, I have been facing difficulties in getting the definition recognized by typescript (webback and vscode). The only workaround that has worked for me so far is creating a folder wit ...

The type 'myInterface' cannot be assigned to the type 'NgIterable<any> | null | undefined' in Angular

I am facing an issue that is causing confusion for me. I have a JSON data and I created an interface for it, but when I try to iterate through it, I encounter an error in my HTML. The structure of the JSON file seems quite complex to me. Thank you for yo ...

React throwing an error when trying to use inline fontWeight styling with Typescript

I am currently working on applying a CSS rule to a td element. const boldText = { fontWeight: 'bold' } <td style={boldText}>Content</td> Unfortunately, I am encountering the following error: [ts] Type '{ style: { fontWeig ...

Encountered a problem when implementing flowbite in a project using NextJS and TypeScript

I recently added tailwind and flowbite to my NextJS project. After importing "flowbite" in the _app.tsx file, I encountered the following error message: ReferenceError: document is not defined at Object.366 (D:\shopflo\next-tailwin ...

How to implement automatic scrolling to the bottom of a div in React

Currently facing an issue in React: I am looking to implement auto-scroll functionality when the page loads, so it scrolls to the bottom of the messages box. Here is my current code snippet: import Title from "components/seo/Title"; import { u ...

The TypeScript compiler is generating node_modules and type declaration files in opposition to the guidelines outlined in the tsconfig.json file

For the past week, I've been trying to troubleshoot this issue and it has me completely puzzled. What's even more puzzling is that this app was compiling perfectly fine for months until this problem occurred seemingly out of nowhere without any c ...

Is it Control or ControlGroup in Angular 2 - How to tell the difference?

let aa = this._formBuilder.control(""); let bb = this._formBuilder.group({ aa: aa }; I am trying to achieve the following: if (typeof(aa) == "Control") { // perform a specific action } else if (typeof(aa) == "ControlGroup") { // perform anoth ...

Utilizing ngx-translate in Angular6 to dynamically load translations by making an API request to the backend

Using ngx-translate in my frontend, I aim to dynamically load translations upon app launch. The backend delivers a response in JSON format, for example: { "something: "something" } Instead of utilizing a local en.json file, I desire to integrate thi ...