Deciding when to utilize an interface, when to avoid it, and when to opt for a constructor in Typescript for the creation of JavaScript arrays

Question

Deciding when to utilize an interface, when to avoid it, and when to opt for a constructor in Typescript for the creation of JavaScript arrays

Exploring the concept of JavaScript object arrays in TypeScript

In my current project, I am retrieving a JSON array from an observable. It seems that I can define and initialize the array without necessarily specifying an interface or type.

let cityList[]; // Is the value of cityList null at this point?
cityList[] = response;

Although using an interface is not mandatory, it is advisable for better compiler assistance similar to Java, right?

interface Blah{
city: string;
}

let cityList: Blah[];
cityList[] = response;

Alternatively, creating a constructor might be necessary if dynamically adding JavaScript objects to the array, is that correct?

javascript arrays json typescript

Answer 1

Answer №1

After realizing my mistake, I now understand the correct approach to this.

Constructors are only necessary when adding or creating a new object that will be used within the code or transmitted over the network.

Instead of interfaces, I prefer using models.

For example, if I wanted to create a JavaScript object representing a city that only includes the city's name, it would look like this:

This code is written in TypeScript.

export class City{
  public name: string;

  constructor(name:string){
    this.name = name;
  }
}

In order to store these objects in an array, the array must have the correct type:

cityList:City[];

If the array is uninitialized, you can initialize it by assigning a value to the array or by setting it as an empty array like this.

cityList: City[] = [];

Answer 2

After realizing my mistake, I now understand the correct approach to this.

Constructors are only necessary when adding or creating a new object that will be used within the code or transmitted over the network.

Instead of interfaces, I prefer using models.

For example, if I wanted to create a JavaScript object representing a city that only includes the city's name, it would look like this:

This code is written in TypeScript.

export class City{
  public name: string;

  constructor(name:string){
    this.name = name;
  }
}

In order to store these objects in an array, the array must have the correct type:

cityList:City[];

If the array is uninitialized, you can initialize it by assigning a value to the array or by setting it as an empty array like this.

cityList: City[] = [];

Deciding when to utilize an interface, when to avoid it, and when to opt for a constructor in Typescript for the creation of JavaScript arrays

Answer №1

Similar questions

All-in-one Angular script and data housed within a single document

Enrich the returned result set by including additional data in Mongoose

Using TypeScript or JavaScript, set object keys as fields of a class

The Angular component seems to be failing to refresh the user interface despite changes in value

I need a way to call a function in my Typescript code that will update the total value

Randomly undefined custom jQuery function

Adjusting the position of the parent div by manipulating the bottom property

Using requests.patch() will result in a 200 OK response, however, no updates

Send a substantial item for display using Express Layout

Having trouble with ReactJS updating the state in the correct format using moment?

Filtering out specific properties in an array using Angular

Encountering a 'Cannot use string as a HASH ref' error message while attempting to decode JSON in Perl using the JSON

Autocomplete's `getOptionLabel` function unexpectedly returned an object ([object Object]) instead of the expected string

Is it possible to encounter the issue of "Context Lost" and "Importing multiple instances" in Three.js?

The type of the element is implicitly set to 'any' because the expression 'keyof IMyObj' cannot be used to index the type

Should code in Vuejs be spread out among multiple components or consolidated into a single component?

The process of retrieving input field values from a table within an Angular reactive form

JavaScript - Merging the two JSON requests into a unified object

Is TypeScript necessary, or can I simply stick with ES6?

I am seeking a way to conceal text in an HTML document using JavaScript when the browser window width is less than a specified amount, and reveal it when the window width exceeds that value