What type does the function in typescript return?

Could someone help me with this code snippet?

 export const getColor = (color: string): string => colors[color] || colors.white;

I'm encountering a warning line under colors[color] || colors.white stating that it is an "Unsafe return of an any typed value". I have verified that this method accepts a string and returns a string, but I am unsure of the exact issue since the use of any is prohibited in this case.

export const colors = {
  'dark-grey': '#606060',
  'light-grey': '#909090',
  'slate-grey': '#7889a0',
  'olive-green': '#8fd683',
  'light-blue': '#0371ff',
  'dark-gray': '#4b6c89',
  'blue-700-new': 'var(--color-brand-primary-default-new)',
  azure: '#1676ff',
  blue: '#1676ff',
  white: '#fff',
  black: '#000',
  brandPrimaryDefault: 'var(--color-brand-primary-default-new)',
  brandPrimaryLight: 'var(--color-brand-primary-light-new)',
  naturalGrayDarker2: 'var(--color-natural-gray-darker-2)',
};
typescript

Answer №1

Make sure to specify the data type of each item in the colors object:

export const colors: { [key: string]: string; } = {
  'dark-grey': '#606060',
  'light-grey': '#909090',
  'slate-grey': '#7889a0',
  'olive-green': '#8fd683',
  'light-blue': '#0371ff',
  'dark-gray': '#4b6c89',
  'blue-700-new': 'var(--color-brand-primary-default-new)',
  azure: '#1676ff',
  blue: '#1676ff',
  white: '#fff',
  black: '#000',
  brandPrimaryDefault: 'var(--color-brand-primary-default-new)',
  brandPrimaryLight: 'var(--color-brand-primary-light-new)',
  naturalGrayDarker2: 'var(--color-natural-gray-darker-2)',
};

Link to playground.

Answer №2

Your color choices are defined with specific keys to use as identifiers, rather than just any random string. It is recommended to utilize a combination of the available colors instead of relying on a generic string. Here's an example:

export const colorChoices = {
  'dark-grey': '#606060',
  'light-grey': '#909090',
  'slate-grey': '#7889a0',
  'olive-green': '#8fd683',
  'light-blue': '#0371ff',
  'dark-gray': '#4b6c89',
  'blue-700-new': 'var(--color-brand-primary-default-new)',
  azure: '#1676ff',
  blue: '#1676ff',
  white: '#fff',
  black: '#000',
  brandPrimaryDefault: 'var(--color-brand-primary-default-new)',
  brandPrimaryLight: 'var(--color-brand-primary-light-new)',
  naturalGrayDarker2: 'var(--color-natural-gray-darker-2)',
};

export type ColorChoice = keyof typeof colorChoices // 'dark-grey' | 'light-grey' | ...
export const getColorChoice = (choice: ColorChoice): string => colorChoices[choice] || colorChoices.white;

TypeScript Playground

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

Enhancing the session object with new properties

I am attempting to include extra properties in the session object req.session.confirmationCode = confirmationCode; However, I encounter an error stating that the property confirmationCode does not exist Property 'confirmationCode' does not exist ...

typescriptexpressexpress-session

Ways to display all current users on a single page within an application

I have come across a project requirement where I need to display the number of active users on each page. I am considering various approaches but unsure of the best practice in these scenarios. Here are a few options I am considering: 1. Using SignalR 2. ...

javascriptangulartypescriptasp.net-web-apisignalr

How to conceal the side navigation bar on specific pages or components within an Angular application

Currently immersed in developing a web application with Jhipster and Angular. I've managed to set up a side navbar along with a top navbar on every page. However, I'm struggling to hide the side navbar on specific pages and could use some guidanc ...

angulartypescripthidenavbarjhipster

Assign a variable to set the property of a class

Could something similar to this scenario be achievable? const dynamicPropName = "x"; class A { static propName = 1 // equivalent to static x = 1 } A[dynamicPropName] // will result in 1 or would it need to be accessed as (typeof A)[dynamicPropN ...

javascripttypescriptclassecmascript-6

Leveraging import and export functionality in TypeScript while utilizing RequireJS as a dependency

I am in the process of transitioning a complex JavaScript application from Backbone/Marionette to TypeScript. While making this shift, I want to explore the benefits of exporting and importing classes using files as modules. Is it necessary to incorporat ...

typescriptrequirejs

Can TypeScript be used to generate a union type that includes all the literal values from an input string array?

Is it feasible to create a function in TypeScript that takes an array of strings and returns a string union? Consider the following example function: function myfn(strs: string[]) { return strs[0]; } If I use this function like: myfn(['a', &a ...

typescriptgenerics

What is the process for finding GitHub users with a specific string in their name by utilizing the GitHub API

I'm looking to retrieve a list of users whose usernames contain the specific string I provide in my query. The only method I currently know to access user information is through another endpoint provided by the GitHub API, which unfortunately limits t ...

javascripttypescriptgithubgithub-api

TSLint warning: Duplicate identifier detected - 'err'

Currently facing an issue with tslint displaying the following error Shadowed name: 'err' Providing the code snippet for reference fs.readdir(fileUrl, (err, files) => { fs.readFile(path.join(fileUrl, files[0]), function (err, data) ...

node.jsangulartypescriptlinttslint

Components in Angular 4 that are loaded dynamically using attribute directives are enclosed within a <div> element

My goal is to dynamically generate components based on the configuration options, specifically creating a toolbar with different "toolbar items". Following the Angular guide at: https://angular.io/docs/ts/latest/cookbook/dynamic-component-loader.html, I h ...

angulartypescript

Call a function within another function of the same class in Angular2, and utilize the properties of the first function in the

I am working on a class that contains two functions, both of which retrieve data from API calls. Let's start with the First function getQuotes(){ this.quoteService.getQuotes() .subscribe( quotes => { this.quotCode = this.quo ...

angulartypescript

Converting a string to a number is not functioning as expected

I am facing a problem with an input shown below. The issue arises when trying to convert the budget numeric property into thousands separators (for example, 1,000). <ion-input [ngModel]="project.budget | thousandsSeparatorPipe" (ngModelChange)="projec ...

javascriptangulartypescriptionic3

Show the Array List in a left-to-right format

Is there a way to display an array list from left to right with a div scroll, instead of top to bottom? I am having trouble achieving this. Here is my demo code for reference. HTML <div> <h2 class="ylet-primary-500 alignleft">Sessions</h ...

cssangulartypescript

What are some effective ways to utilize the data gathered from a subscribe() method in a different

handleKeyUp(event: any): void { this.technologiesService.retrieveData(event.target.value) .subscribe(data => { this.myResults = data; }); } The result of data is: https://i.sstatic.net/WjiD4.png I want to assign data as a property fo ...

angulartypescriptrxjs

Guide on protecting the test.ts file within an Angular application

Within our Angular project, we have a ./src/test.ts file that is responsible for loading all spec files to run under test with Karma and Jasmine: // This file is necessary for karma.conf.js and recursively loads all .spec and framework files import &ap ...

javascriptangulartypescriptjasminekarma-jasmine

Error - The function of spread syntax necessitates an iterable item with a Symbol iterator to be a function

I encountered an error while trying to use the update component in my app, and I am unsure of why this error is occurring. Error: TypeError: Spread syntax requires ...iterable[Symbol.iterator] to be a function at HttpHeaders.applyUpdate (http.mjs:244: ...

javascriptangularjstypescriptlaravel-9

Searching in Vue based on the selected option is only possible by the selected criteria and not by id, regardless of the

#1 Even if chosen, cannot search by id. The 'name' condition in the loop works well but I am unable to correctly search by id (returns nothing). #2 When selecting an option from the dropdown menu, it only displays until I start typing. I would l ...

javascripttypescriptvue.js

The NgZone reference error caused the prerendering to fail

I am facing challenges with the implementation of NgZones. Despite defining NgZone, I keep encountering this error: "NodeInvocationException: Prerendering failed because of error: ReferenceError: NgZone is not defined" Below is my app.error-handle.ts file ...

typescriptvisual-studio-codeangular2-servicesasp.net-core-2.0angular2-zone

Is there a way to integrate the AuthState TypeScript Interface into the react-oidc-context Node package for testing in Next.js?

We are currently working on a Next.js application that utilizes the react-oidc-context Node module for authentication with ADFS. During our testing phase using Vitest, we encountered the following error: TypeError: Cannot read properties of undefined (rea ...

reactjstypescriptnext.jsmockingvitest

Exporting the default value from a TypeScript declaration file module

Imagine having a declaration file called foo.d.ts: declare namespace foo { interface Bar { (): void; } } declare var foo: foo.Bar; export default foo; Upon compilation: import Foo from './foo'; Foo(); The result is: "use strict"; va ...

typescript

How can I display an agm-polyline within a map in Angular 7?

I need assistance with adjusting the polylines on my map and dynamically setting the zoom level based on their size and position. Here is the code I am currently using: <agm-map style="height: 500px" [latitude]='selectedLatitude' [longitude ...

angulartypescriptangular7angular-google-maps