Static typescript constant

Question

Static typescript constant

I'm working on implementing static readonly in my code, but I've never done anything like this before. Here's what I currently have:

export class Names {
    static readonly michael = { firstName: 'michael', secondName: 'jackson'};
    static readonly john = { firstName: 'John', secondName: 'Doo'};
    static readonly donald = { firstName: 'Donald', secondName: 'Trump'};
}

And I also have

name = 'michael';

What I want to achieve is to search within the Names class for a person named Michael and return their first and last name, similar to this:

found = { firstName: 'michael', secondName: 'jackson'};

For the sake of simplicity in explaining my question, let's assume all static readonly values are unique. I know how to search inside an array, but how do I search within a class?

angular typescript find

Answer 1

Answer №1

If you need to access all the values stored in the Names object, you can utilize the Object.values method. From there, you can employ the find function to locate the specific value you are looking for:

Object.values(Names).find(person => person.name === 'michael')

Answer 2

If you need to access all the values stored in the Names object, you can utilize the Object.values method. From there, you can employ the find function to locate the specific value you are looking for:

Object.values(Names).find(person => person.name === 'michael')

Answer 3

Answer №2

Check out this example of Angular code:

import { Component, OnInit } from '@angular/core';
import { Names } from './models/Names';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent implements OnInit {

  title = 'angular-material';
  name = 'michael';

  constructor() { }

  ngOnInit(): void {
    if (Names[this.name]) {
      console.log(Names[this.name]);
    } else {
      console.log('Not found');
    }
  }
}

Answer 4

Check out this example of Angular code:

import { Component, OnInit } from '@angular/core';
import { Names } from './models/Names';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent implements OnInit {

  title = 'angular-material';
  name = 'michael';

  constructor() { }

  ngOnInit(): void {
    if (Names[this.name]) {
      console.log(Names[this.name]);
    } else {
      console.log('Not found');
    }
  }
}

Answer 5

Answer №3

If you want to access a value by its label without converting to an array of objects and performing a linear search, there is a more efficient way:

export class Names {
    static readonly michael = { firstName: 'michael', secondName: 'jackson'};
    static readonly john = { firstName: 'John', secondName: 'Doo'};
    static readonly donald = { firstName: 'Donald', secondName: 'Trump'};
}

let name = 'michael';
let found = Names[name];
console.log(found);

However, TypeScript may flag this as inappropriate indexing by string for the Names type, which could be problematic with certain minifying compilers.

A better approach would be to use a different data structure, such as:

const names = {
  'michael': { firstName: 'michael', secondName: 'jackson' },
  'john': { firstName: 'John', secondName: 'Doo' },
  'donald': { firstName: 'Donald', secondName: 'Trump' },
};

This allows you to access values correctly using names[firstName]. It's also recommended to consider using a strictly-typed Map or representing your data with an actual class to prevent accidental modifications (e.g.,

names['donald'].secondName = 'duck'

).

Answer 6

If you want to access a value by its label without converting to an array of objects and performing a linear search, there is a more efficient way:

export class Names {
    static readonly michael = { firstName: 'michael', secondName: 'jackson'};
    static readonly john = { firstName: 'John', secondName: 'Doo'};
    static readonly donald = { firstName: 'Donald', secondName: 'Trump'};
}

let name = 'michael';
let found = Names[name];
console.log(found);

However, TypeScript may flag this as inappropriate indexing by string for the Names type, which could be problematic with certain minifying compilers.

A better approach would be to use a different data structure, such as:

const names = {
  'michael': { firstName: 'michael', secondName: 'jackson' },
  'john': { firstName: 'John', secondName: 'Doo' },
  'donald': { firstName: 'Donald', secondName: 'Trump' },
};

This allows you to access values correctly using names[firstName]. It's also recommended to consider using a strictly-typed Map or representing your data with an actual class to prevent accidental modifications (e.g.,

names['donald'].secondName = 'duck'

).

Answer 7

Answer №4

To optimize your code, consider using a single static read-only variable that is an array holding all the objects you need. This essentially creates an array of objects. Here's how you can implement this in Angular:

import { Component, OnInit } from '@angular/core';
import { Names } from './models/Names';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class Names implements OnInit {

  static readonly arrayOfObjects = [
    { firstName: 'michael', secondName: 'jackson'},
    { firstName: 'John', secondName: 'Doo'},
    { firstName: 'Donald', secondName: 'Trump'}
  ];

  constructor() {
    const filter = Names.arrayOfObjects.filter(object => object.firstName === 'michael');
  
    console.log(filter);
  }

}

Answer 8

To optimize your code, consider using a single static read-only variable that is an array holding all the objects you need. This essentially creates an array of objects. Here's how you can implement this in Angular:

import { Component, OnInit } from '@angular/core';
import { Names } from './models/Names';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class Names implements OnInit {

  static readonly arrayOfObjects = [
    { firstName: 'michael', secondName: 'jackson'},
    { firstName: 'John', secondName: 'Doo'},
    { firstName: 'Donald', secondName: 'Trump'}
  ];

  constructor() {
    const filter = Names.arrayOfObjects.filter(object => object.firstName === 'michael');
  
    console.log(filter);
  }

}

Static typescript constant

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

The compatibility issue between Bootstrap and Angular 2 is causing some challenges

Angular2 - Issue with Pagination functionality

Error Encountered when Compiling Angular 4 Project with NPM Hosted Package: Understanding the 'makeDecorator' Issue

Angular 4 RXJS Observable .interval() Fails to Execute in the Background

What are the steps for launching an Angular application?

The element 'imgAreaSelect' does not appear to be valid in this context

Nested RxJS subscribe with error handling actions

Having trouble uploading a PNG image (logo) with Cypress

Pattern for defining objects with indexes in Typescript

Issues have arisen with Angular 7.2.15 and three.js 0.105.2 following the upgrade of three.js

Issue with updating the div to show the user's submission form in Angular is causing difficulties

Elevating Material-UI Drawer using makeStyles to a whole new level with styled-components

calculating the dynamic height of a document from top to bottom using Angular

Decorators do not allow function calls, yet the call to 'CountdownTimerModule' was executed

Issue with SvelteKit: PageData not being refreshed in API response after initial render

Troubleshooting TS2769 Issue with Protect Middleware in Express.js

What strategies work well when it comes to developing translation files in Angular?

Exploring the options variables within CLI commander Js action

Error: Unable to initialize mock worker: "The module './pdf.worker.js' could not be located using 'pdfjs-dist' in a Next.js and TypeScript environment."

Create an array with individual key-type pairs for each generic element, then iterate through the array