In TypeScript, there is a curious phenomenon where private properties seem to be mimicking the

Here is an example of an issue I encountered while working with private properties in TypeScript.

I expected that only the public properties would be visible in my object output, similar to normal encapsulation.

My aim here is to include the property with a setter and getter as part of the exposed API of my class rather than the private property (similar to C#).

 class MyClass {
      public otherProp: boolean;

      constructor() {
          this.otherProp = false;
          this._privateProp = false;
      }

      private _privateProp: boolean;

      get publicProp() : boolean {
        return this._privateProp;
      }

      set publicProp(values : boolean) {
          this._privateProp = values;
      }

    }

    let x: MyClass = new MyClass();

    console.log(x); // MyClass {otherProp: false, _privateProp: false}
                   // Expected output: MyClass {otherProp: false, publicProp: false}

Answer №1

To make properties private in TypeScript, you can use the `#` symbol:

class MyClass {
      public otherProp: boolean;

      constructor() {
          this.otherProp = false;
          this.#_privateProp = false;
      }

      #_privateProp: boolean;

      get publicProp() : boolean {
        return this.#_privateProp;
      }

      set publicProp(values : boolean) {
          this.#_privateProp = values;
      }

    }

    let newObj: MyClass = new MyClass();

    console.log(newObj); // MyClass {otherProp: false}

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

Building a React.js application and fetching information with Ajax

In my quest to create a high-speed React.js application that functions as a game, I find myself in need of displaying real-time data. However, the traditional method of loading this data from the server using Ajax doesn't quite align with the reactive ...

Executing JavaScript with Python in Selenium

Completely new to Selenium. I need help running a javascript snippet in this code (as commented), but struggling to do so. from selenium import webdriver import selenium from selenium.common.exceptions import NoSuchElementException from selenium.webdriver ...

Is there a way to verify if a checkbox has been checked?

Having trouble with this code: if($('#primayins').prop('checked')) { $("#tx_nm0x0_pricingplan").val(1); } else { $("#tx_nm0x0_pricingplan").val(2); } It keeps returning false consistently ...

Exploring creative methods for incorporating images in checkboxes with CSS or potentially JavaScript

Although it may seem like a basic question, I have never encountered this particular task before. My designer is requesting something similar to this design for checkboxes (positioned on the left side with grey for checked boxes and white for unchecked). ...

best practices for transferring object data to a table with ng-repeat

I have an object called 'SEG-Data with the following structure. I am attempting to display this data in a table using ng-repeat. SEG_Data Object {ImportValues: Array[2]} ImportValues: Array[2] 0: Object ImportArray: "004 ...

Issue with Angular: RouterLinkActive fails to work properly with formControlName

I am currently working on a vertical navigation bar that allows the user to navigate to different components. However, I am facing an issue where when I click on a list item, it's supposed to be active but I have to click on it to navigate to the comp ...

Decode JSON and generate a user-friendly Array

My aim is to extract and organize the JSON data received from an external API into a custom array. However, I am encountering two challenges: I'm struggling to access the value labeled #2 under "Meta Data". If I want to extract the first array n ...

The function findOne from Mongoose seems to be non-existent, all while utilizing the Passport library

Whenever I try to implement my local strategy using the passport lib, I keep encountering this error. TypeError: UserModel.findOne is not a function I've spent hours searching for a solution that addresses this issue but haven't been successful ...

How to pass the Exact property in React MaterialUI Button with RouterLink Component?

I came across this code snippet: <Button activeClassName={classes.active} className={classes.button} component={RouterLink} exact={true} to="/app/certificates" > Certificates </Button> <Button activeClassName={classe ...

($rootScope: busy) Applying changes right now

Whenever I try to make changes to the UI grid after refreshing the data, I keep encountering this error message: angular.js:13236 Error: [$rootScope:inprog] $apply already in progress http://errors.angularjs.org/1.5.0/$rootScope/inprog?p0=%24apply ...

Leveraging ZOD's discriminatedUnion() method to differentiate among three different forms

ValidationSchema = z.object({ AuthenticationBlock: z.object({ ChoiceOfForm: z.enum() DataBlock: z.discriminatedUnion(ChoiceOfForm, [ z.object({ ChoiceOfForm = 1, empty fields}) //corresponds to the basic form z.object({ ChoiceOfForm = 2, just ...

Implementing an Ant Design Form field for an array of objects

Is it possible to edit an entity with a one-to-many relation? { id: 1, title: 'Title', tags: [ { id: 1 }, { id: 2 }, ], } Here is the code snippet: <Form.Item name={["tags", "id"]} > < ...

Add a JavaScript library to the header directly from the body of a webpage, ensuring it is exclusive to a single

I am using the Google Charts JS library on a single page within my project, with external and global headers and footers. The head tags are located in a head.php file, where all required JS libraries are included. The structure of my pages is as follows: ...

Can you explain the distinction between an optional field and a union?

Is there a significant distinction between the following structures: { ok: boolean; } | { ok: boolean; error: any; } and: { ok: boolean; error?: any; } I have observed variance in the inferred types of frontend methods' return ou ...

Returning from a find operation in Node.js using Mongoose and MongoDB collections involves implementing a specific process

When attempting to find an element in a MongoDB collection using Mongoose in Test.js, the console.log is not being executed. Within Test.js, the console.log is failing to display the data retrieved from the MongoDB collection. var model = require(' ...

Navigating the implementation of undefined returned data in useQuery hook within Apollo and ReactJS

I am facing an issue with my code where the cookieData is rendered as undefined on the initial render and query, causing the query to fail authentication. Is there a way to ensure that the query waits for the response from the cookie API before running? co ...

Using Vue.js to dynamically append varying inputs upon user interaction

When I select an option, I want to display different types of inputs based on the selected option. For Example: Select input -> show input fields Select textarea -> show text areas Select boolean -> show radio buttons The Code This is where ...

Transfer an HTML file object between two <input type="file"> elements

I am looking to integrate a multi-file uploader into a form that allows users to prioritize the files they upload using draggable and sortable jQuery tools. One way I have added a multi-file input is: <input type = "file" multiple> When I select m ...

NodeJS produces identical outcomes for distinct requests

RESOLVED THANKS TO @Patrick Evans I am currently working on a personal web project and could use some assistance. In my website, users are prompted to upload a photo of their face. When the user clicks the "upload" button, the photo is sent with a request ...

Troubleshooting AngularJS Directives' Cross-Origin Problems within Eclipse

Hello, I am facing an issue while using Angular JS in Eclipse. Specifically, when attempting to use Directives, I encounter a problem with the Cross-Origin Resource Sharing (CORS) policy when loading the Directives template in the index.html file. XMLHttp ...