Tips for creating class variables with default values that are more complex than simple flat values

Question

Tips for creating class variables with default values that are more complex than simple flat values

Creating a simple flat class like this functions smoothly:

class Test {
 company_name: string = "";
 company_id: number = 0;
 company_website: string = "";
}

When I instantiate it with let product = new Test(), everything works as anticipated, and product is initialized with the default values.

Is there a way to achieve the same outcome for non-flat class variables? Ideally, it should function similar to this example (which currently fails):

class Test {
  companyData: {
    company_name: string = "";
    company_id: number = 0;
    company_website: string = "";
  }
  productData: {
    category_id: number = 0;
    product_name: string = "";
    price: {
      price_in: number = 0;
      price_out: number = 0;
    }
  }
}

The error message in VSCode reads

A type literal property cannot have an initializer

. For my specific scenario, it's crucial that all variables are initialized and can be assigned default values.

typescript

Answer 1

Answer №1

You have to define the Types, without setting the values of the properties. The syntax is incorrect in any case.

Here's a suggested revision:

class Test {
  public companyData = {
    company_name: '',
    company_id: 0,
    company_website: ''
  };
  public productData = {
    category_id: 0,
    product_name: '',
    price: {
      price_in: 0,
      price_out: 0
    }
  };
}

If you want them to be Typed (which is recommended), use interfaces:

interface CompanyData {
  company_name: string;
  company_id: number;
  company_website: string;
}

interface ProductData {
  category_id: number;
  product_name: string;
  price: Price;
}

interface Price {
  price_in: number;
  price_out: number;
}

class Test {
  public companyData: CompanyData = {
    company_name: '',
    company_id: 0,
    company_website: ''
  };
  public productData: ProductData = {
    category_id: 0,
    product_name: '',
    price: {
      price_in: 0,
      price_out: 0
    }
  };
}

Answer 2

You have to define the Types, without setting the values of the properties. The syntax is incorrect in any case.

Here's a suggested revision:

class Test {
  public companyData = {
    company_name: '',
    company_id: 0,
    company_website: ''
  };
  public productData = {
    category_id: 0,
    product_name: '',
    price: {
      price_in: 0,
      price_out: 0
    }
  };
}

If you want them to be Typed (which is recommended), use interfaces:

interface CompanyData {
  company_name: string;
  company_id: number;
  company_website: string;
}

interface ProductData {
  category_id: number;
  product_name: string;
  price: Price;
}

interface Price {
  price_in: number;
  price_out: number;
}

class Test {
  public companyData: CompanyData = {
    company_name: '',
    company_id: 0,
    company_website: ''
  };
  public productData: ProductData = {
    category_id: 0,
    product_name: '',
    price: {
      price_in: 0,
      price_out: 0
    }
  };
}

Tips for creating class variables with default values that are more complex than simple flat values

Answer №1

Similar questions

How can I remove a row from a mat table using Angular?

How to extract a value from [object object] in Angular4

How to leverage async/await within loops in Node.js for optimized performance and efficiency

Encountered an error in TypeScript and Webpack 4: Module Build failed due to an Unexpected token, expecting a ","

You must add the module-alias/register to each file in order to use path aliases in

Tips for integrating and utilizing the MSAL (Microsoft Authentication Library for JavaScript) effectively in a TypeScript-based React single page application

Why does the playwright's onEnd() results not include the duration as specified in the documentation? What am I overlooking?

What is the best way to retrieve the Base64 string from a FileReader in NextJs using typescript?

Ways to determine the current active tab in React are:

Is there a way to automatically scroll 50 pixels down the page after pressing a button?

SystemJS could not locate the root directory for RxJS

Serious issue: a dependency request is an expression (Warning from Angular CLI)

Error message: In my router module, Angular's 'Subject' is not subscribed to

The type 'string' does not share any properties with the type 'CSSProperties'

`The Art of Curved Arrows in sigjma.js, typescript, and npm`

Angular Date format

Determining the appropriate version of the types package for your needs

What could be the reason behind the material table not populating with data from the source, despite the service returning an array?

Implementing the "$store" property within Vue components

Guide on exporting Excel data using Angular and TypeScript