Why do referees attempt to access fields directly instead of using getters and setters?

I am facing an issue with my TypeScript class implementation:

class FooClass
 {
    private _Id:number=0 ; 
    private _PrCode: number =0; 

    public get Id(): number {
        return this._Id;
    }

    public set Id(id: number) {
        this._Idproduit = id;
    }

    public get PrCode(): number {
        return this._PrCode;
    }

    public set PrCode(prCode: number) {
      
       this._PrCode = prCode;
    }
 }

When I create a reactive variable inside a component like this:

 const Model = ref<FooClass|null>(null);

and try to pass it to a function as shown below:

let FooFunc  = (FooClass|null) =>{//Do something} 

using FooFunct(Model), I encounter the following error:

Argument of type '{ Id: number; PrCode: number; }is not assignable to parameter of type 'FooClass'. type { Id: number; PrCode: number; } is missing the following properties from type 'FooClass': {_Id,_PrCode}

It seems that the Ref Function is trying to access "the private fields" directly instead of using the getters and setters. How can I solve this issue?

Answer №1

There is a TypeScript error occurring that only manifests during compile time, so it's unrelated to private fields being accessed at runtime.

In TypeScript, private fields play a role in determining type compatibility. They can be utilized to purposely create type mismatches and prevent inadvertent matching of similar types. In this case, the goal is to specifically exclude private fields from the type.

The correct approach would involve:

type BarInterface = Omit<BarClass, keyof BarClass>
...
const Data = ref<BarInterface|null>(null);
let BarFunc = (BarInterface|null) =>{//Perform some action} 

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

Creating a different type by utilizing an existing type for re-use

Can you help me specify that type B in the code sample below should comprise of elements from interface A? The key "id" is mandatory, while both "key" and "value" are optional. interface A { id: string; key: string; value: string | number; } /** ...

Retrieve: Type 'string | undefined' does not match the parameter type 'RequestInfo'

When using the fetch function, I encountered an error with the "fetchUrl" argument: Error: Argument of type 'string | undefined' is not assignable to parameter of type 'RequestInfo'. This is the code snippet where the error occurred: ...

Having trouble resolving all parameters for AuthService in Angular

Launching my angular app has hit a roadblock with this perplexing error. Despite attempts to troubleshoot by removing the auth service provider and constructor reference from my component, the issue persists. As a novice in angular, I'm struggling to ...

Utilizing Template Styling for Iterating through Lists in Vue.js

I would like the output format to display one player value followed by one monster value, repeating this pattern for each pair of values. new Vue({ el: app, data: { output: { player: [1, 5, 61, 98, 15, 315, 154, 65], monster: [2,14, ...

Retrieving Vue component properties as a data type

I'm facing a dilemma with my Vue components. I want to extract the props from one component and use them as a type instead of a value in another component. Specifically, I have a component where I need to take in an array of props from a different com ...

The 'Content-Type' header cannot be defined for HTTP GET requests

I am currently working on setting up my GET requests to include the specific header: Content-Type: application/json Based on information from the documentation, I need to make the following adjustment: To customize these defaults, you can add or remov ...

Improprove the performance of an array of objects using JavaScript

Hello there, I am currently in the process of creating an array. this.data = [{ label: 'Total', count: details.request.length, }, { label: 'In-Progress', count: details.request.filter((obj) => obj.statusId === 0 || ob ...

Restrict the keys to only properties that have an array data type

Is there a way to limit the keyof operator to only accept keys of a specified type in TypeScript? interface Data { items: string[]; name: string; } // I want to restrict the keyof operator to only allow keys where the value is of type `F` type Key&l ...

Physically eliminate (and obliterate) a component from keep-alive

Is there a way to access and programmatically unmount a component instance loaded from Vue Route and persisted using <keep-alive> and <component>? I am working on a dynamic tab system where each tab renders a URL which displays its declared com ...

Assign a value to a variable within the generate:before hook in Nuxt

I managed to implement a generate:before hook in nuxt.config.js that sends a request and retrieves the desired result. How can I assign a variable that can be shown in a view when the site is generated? Ideally, I would like to store the variable in the v ...

Stop vuetify from cluttering the global style scope

Seeking to embed a Vue component into another from an external source without using a Vue Plugin. The components are mounting correctly, but the embedded component's use of Vuetify is affecting the parent application's style. Visual examples can ...

Stepper that is vertical combined with table information

I am currently facing a unique challenge with a component I'm trying to create. It's a combination of a vertical Stepper and a Datagrid. My goal is to group specific table sections within the content of a vertical Stepper, purely for data visual ...

Regular Expressions: Strategies for ensuring a secure password that meets specific criteria

Struggling to craft a regex for Angular Validators pattern on a password field with specific criteria: Minimum of 2 uppercase letters Minimum of 2 digits At least 1 special character. Currently able to validate each requirement individually (1 uppercase ...

"Vue: The persistent issue of props returning as undefined continues to trouble developers

While checking my Root and child component (Topbar), I keep finding that the foo prop is undefined in each one. It's perplexing because I have defined it properly. app.js window.Vue = require('vue'); Vue.component('Topbar', ...

Ways to adjust height dynamically to auto in React

I am currently stuck on a problem concerning the adjustment of my listing's height dynamically from 300 to auto. My goal is to create a post-like feature where users can click "read more" to expand and view the full post without collapsing it complete ...

What could be causing the data in the data table to remain undeleted unless the page is manually refreshed

I am facing an issue with the delete button functionality. When I press the button, it successfully deletes the row but requires a page refresh to make the deleted row disappear. How can I resolve this problem and ensure that the row is deleted without the ...

Configuring NextJs routes with multiple parameters

Seeking guidance on structuring files in Nextjs for handling multiple URL parameters. Can anyone offer advice? The given URL structure is: /api/upload?file=${filename}&fileType=${fileType} This is the current file structure: app api upload ...

Proper method for determining return type through the use of `infer`

I need to find out the return type based on input values, like in the code below: type ReturnType<S> = { array: S extends 'number' ? number[] : S extends 'string' ? string[] : never; value: S extends 'number' ? n ...

Nuxt - It is not possible to use useContext() within a watch() callback

I'm currently utilizing version 0.33.1 of @nuxtjs/composition-api along with Nuxt 2. Here's a snippet from my component: import { defineComponent, useContext, useRoute, watch } from '@nuxtjs/composition-api'; export default defineCompo ...

"Utilizing VueJS XHR functionality within a versatile and reusable component

Seeking advice on best practices for improving the following scenario: I have a single global reusable component called <MainMenu>. Within this component, I am making an XHR request to fetch menu items. If I place <MainMenu> in both the heade ...