In TypeScript, declare a custom type as a class property

class Icons{
    static homeIcon = "<svg...";
    static backIcon = "ico/back.png";
}

class Menu{
    addItem(icon: ????){....}
}

If you want to force the icon parameter in Menu.addItem to be a member of the Icons class, what type declaration should you use?

Currently, this is what I have:

addItem(icon:[keyof typeof Icons]);
menu.addItem("homeIcon", someFunction);

This code approximates and validates using the property names as strings. However, is there a way to declare a type that would allow me to directly reference the properties of the Icons class like this:

menu.addItem(Icons.homeIcon, someFunction);

I have a feeling that I might be overlooking something fundamental here.

Answer №1

Opt for a string enumeration:

enum Symbols {
    house = "<svg...",
    return = "ico/return.png"
}

function insertItem(symbol: Symbols) {
    console.log(symbol);
}

insertItem(Symbols.house);

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

Tips for importing a .geojson document in TypeScript using webpack?

I am trying to extract data from a .geojson file but faced some challenges while attempting two different methods: const geojson = require('../../assets/mygeojson.geojson'); The first method resulted in an error message stating: Module parse f ...

Error: Attempting to access properties of an undefined value (specifically 'and') while utilizing an observable

My profilecomponent is designed to receive user data from a service in the form of an Object public profiles$: Observable<IPerson>; constructor(private router: Router, private userService: UserService) {} ngOnInit(): void { this.profiles$ ...

How to exit a dialog in an Angular TypeScript component with precision

Hey there, I'm attempting to close a dialog from the component by specifying the path in .angular-cli.json and calling the function. However, it seems that despite my efforts, the dialog isn't closing and the redirection isn't happening. He ...

Managing multiple HTTP requests in Ionic

I am having an issue with my http requests where I only receive the data from the first request and not all of them. Can anyone help me with this problem? Thank you in advance for your assistance. Here is my function: async asyncCall() { return awai ...

ts-node: The colon symbol was not expected in this context

As I work on developing a backend server for my application, I made the decision to switch from using babel-node as the executor to utilizing ts-node. The command defined in my package.json file is: "server": "cd server && ts-node --project tsconf ...

Tips for transforming a string into a variable within an Angular framework

I'm working with a JSON object retrieved from an API let arr = [{"name": 'abc',"age": '23'},{"name": 'qwe',"age": '37'},{"name": 'wqewqe',"age&quo ...

Mastering the Implementation of Timetable.js in Angular with TypeScript

I am currently working on integrating an amazing JavaScript plugin called Timetable.js into my Angular6 project. You can find the plugin here and its repository on Github here. While searching for a way to implement this plugin, I stumbled upon a helpful ...

Axios simulation: Total calls received: 0

Having trouble with my mock for the getAll method. The error I'm seeing is: Expected number of calls: 1 Received number of calls: 0 Here are the mock configurations I've set up: jest.mock("axios", () => { return { create: jes ...

Is there a way to position the Image component from next/image using absolute positioning?

Is it possible to use an element Image from 'next/image' with the CSS style { position: absolute; left: 50% }? It appears that it is not being applied. For example: import React from 'react' import Image from 'next/image' imp ...

How to retrieve the value of a static property within an anonymous class in TypeScript

When a class is defined like the following in a file named MyClass.ts: export default class { static someProperty = 1; someMethod() { var a = ????.someProperty } } How can we access someProperty? The code this.someProperty will not w ...

Using the React Material UI icon via props and incorporating it into JSX with Typescript

I am utilizing an icon from the material UI library in a React environment. The icon is passed as a property to a child React element with the intention of rendering it within that child component. Typically, you would do something like this: import Delet ...

Connecting to a Postgres database with Typescript using Docker

Incorporating typeorm into my node project has presented some challenges. Initially, I set up the database using a docker container. However, upon stopping and restarting the container, the IP address kept changing. This led me to consider using the contai ...

Utilizing Angular 2's ngModel feature for dynamic objects and properties

Within my TypeScript file, I am dynamically generating properties on the object named selectedValsObj in the following manner: private selectValsObj: any = {}; setSelectedValsObj(sectionsArr) { sectionsArr.forEach(section => { section.questions. ...

Tips for creating a console.log wrapper specifically designed for Angular2 using Typescript

Is there a way to create a custom global logging function in Angular 2 TypeScript project that can be used instead of console.log for services and components? I envision the function looking like this: mylogger.ts function mylogger(msg){ console.log ...

Typescript's array of functions

In my code, I currently have an engage(ability: number, opponent: Creature) function that is responsible for executing one of three different attacks based on the ability chosen. strike(opponent: Creature){} claw(opponent: Creature){} fireball(opponent: C ...

Encountering a TypeScript error when attempting to utilize indexOf on a Typed Array, leading to restriction

I have been working with an Interface, where I created an array of type Interface. I am currently facing some IDE error complaints when trying to use the .indexOf method on the Array. These errors seem confusing to me, and I'm hoping someone here migh ...

Instead of displaying the name, HTML reveals the ID

I have defined a status enum with different values such as Draft, Publish, OnHold, and Completed. export enum status { Draft = 1, Publish = 2, OnHold = 3, Completed = 4 } In my TypeScript file, I set the courseStatus variable to have a de ...

The custom error page in NextJS is failing to display

In my custom pages/404.ts file, I have coded the following: export default function NotFound() { return <h1>404 - Page Not Found</h1> } Additionally, there is another page that displays a 404 error when the organization is null: import Error ...

What is the best way to modify a data parameter in Angular 2?

I am facing an issue while trying to change a data parameter in my component file: this.commandList.ListesCommandesATransmettre.forEach(data => { this.catalogs.forEach(catalog => { if (catalog.Libelle === data.Catalogue) { if ...

Expanding Mongoose Schema with Typescript: A Comprehensive Guide

Currently, I am in the process of creating 3 schemas (article, comment, user) and models that share some common fields. For your information, my current setup involves using mongoose and typescript. Mongoose v6.1.4 Node.js v16.13.1 TypeScript v4.4.3 Eac ...