What is the method for utilizing an array of strings as keys for an interface?

Imagine I have an array of strings like this:

const items = ['item1','item2','item3','item4', ...]

Is it possible to create a custom interface using the values from items in this manner:

interface Items {
  item1: boolean
  item2: boolean
  item3: boolean
  item4: boolean
  ...
}

I am working with Typescript version 3.7.x

I attempted to customize based on this response: 

interface CustomItems{
 [key in items[number]]?: boolean
}

However, I encountered these issues:

A computed property name in an interface must refer to an expression whose type is a literal type or a 'unique symbol' type.ts(1169)
A computed property name must be of type 'string', 'number', 'symbol', or 'any'.ts(2464)
The right-hand side of an 'in' expression must be of type 'any', an object type, or a type parameter.ts(2361)
'number' only refers to a type, but is being used as a value here.ts(2693)
typescripttypescript3.8

Answer №1

After some experimentation, I discovered that your code can be improved by implementing these 3 adjustments:

  • Add as const after the array literal to ensure that claims is recognized as a (read-only) tuple
  • Utilize the typeof operator with claims[number]
  • Instead of an interface, opt for a type alias paired with an object type literal; it turns out that an object type literal is more effective than an interface.

Here is the updated code snippet:

const claims = ['val1','val2','val3','val4'] as const;

type Claims = {
  [key in typeof claims[number]]?: boolean
}

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

Can you explain the distinction between interfaces containing function properties written as "f()" and "f: () =>"?

Let's take a look at two interfaces, A and B: interface A {f(): number} interface B {f: () => number} I have experimented with the following: var a: A = {f: function() {return 1}} var a: A = {f: () => 1} var b: B = {f: function() {return 1}} ...

typescript

Unexpected behavior observed when attempting to set default value for Angular BehaviourSubject

If I have a behavior subject with boolean type and I want it to be true initially, how can I achieve this? private _someBool: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(true); get someBool$() { return this._someBool.asObservabl ...

angulartypescriptobservable

Using TypeScript in React, how can I implement automation to increment a number column in a datatable?

My goal is to achieve a simple task: displaying the row numbers on a column of a Primereact DataTable component. The issue is that the only apparent way to do this involves adding a data field with indexes, which can get disorganized when sorting is appli ...

reactjstypescriptreact-typescriptreact-data-table-component

Is there a way to create an interpolated string using a negative lookahead condition?

When analyzing my code for imports, I will specifically be searching for imports that do not end with -v3. Here are some examples: @ui/components <- this will match @ui/components/forms/field <- this will match @ui/components-v3 ...

javascripttypescript

Unable to retrieve the third attribute of a Class using Angular2's toString method

Here is the code snippet I am working with: import { Component } from '@angular/core'; @Component({ selector: 'my-app', template: ` <h1>Hello {{name}}</h1> <p><strong>Email:</strong> {{email}}< ...

javascriptangulartypescript

Tips for minimizing disagreements while implementing optional generic kind in TypeScript?

An issue arises in StateFunction due to its optional second generic type that defaults to a value. Even when omitting this second generic, undefined still needs to be passed as an argument, which contradicts the idea of it being optional. While making arg ...

typescript

Error: Uncaught TypeError - The function boss.SetBelongToClan is not defined

Currently, I am faced with an issue while working on a typescript and sequelize project within an express application. The problem arises when trying to create a type-safe interface for utilizing the associate function. Within my Instance interface, there ...

node.jstypescriptexpresssequelize-typescript

Tips for writing unit tests for an object with a type union in TypeScript, Karma, and Sinon

Currently, I am conducting unit-testing for a project that utilizes TypeScript with the Angular framework. I am using Karma with Mocha and Chai frameworks for this purpose. The project includes an interface for the object, defined as follows: interface IS ...

angularjsunit-testingtypescriptmocha.jssinon-chai

Using Typescript, instances of a class can access its members from within methods without needing

Having recently dipped my toes into the world of Node and TypeScript, I was taken aback to discover that you need to explicitly specify this in order to access class members when working with classes. Take for example this code snippet: class MyClass { p ...

node.jstypescriptoop

Angular 2 - Constructing dates in constructor - Error: Type 'Date' cannot be assigned to type 'string'

In my attempt to generate a fresh date object for an ngx-chart by referencing this specific example, I came across the following code snippet: constructor() { this.data = this.multi.map(group => { group.series = group.series.map(dataItem =& ...

angulardatetypescript

Trouble encountered with Angular Google Maps integration when using router-outlet

Currently, I am in the process of developing an application that features a map as its header (providing a global view) and another map positioned in the center of the page to showcase detailed views. To demonstrate this setup, I have shared a working exam ...

angulartypescriptagm-core

Managing asset paths post ng build: A guide

I've been attempting to use assets to display svg icons on my ESRI map. I'm working with Angular9 and the esri js api, trying to add a symbol from a URL. Locally, the svg appears on the map, but once I build and deploy the project to IIS, it sta ...

angulartypescriptangular-cliarcgis-js-api

What is the best way to create a mapping function in JavaScript/TypeScript that accepts multiple dynamic variables as parameters?

Explaining my current situation might be a bit challenging. Essentially, I'm utilizing AWS Dynamodb to execute queries and aiming to present them in a chart using NGX-Charts in Angular4. The data that needs to appear in the chart should follow this fo ...

javascriptarraystypescriptpromisemap-function

Loop through the coefficients of a polynomial created from a string using JavaScript

Summary: Seeking a method to generate a polynomial from specified coordinates, enabling coefficient iteration and optional point evaluation I am currently developing a basic JavaScript/TypeScript algorithm for KZG commitments, which involves multiplying c ...

javascripttypescriptalgorithmpolynomialselliptic-curve

Error: Couldn't locate Next.js - TypeScript module

I encountered an error with the image, but I am unsure of the reason behind it. Additionally, the directory is included in the second image. https://i.sstatic.net/knUzH.png import Link from 'next/link'; import { useState } from 'react' ...

reactjstypescriptreact-nativenext.js

Concern with generic characteristics during type conversion

One of the utilities in my library is a type similar to the following: type Action<Model extends object> = (data: State<Model>) => State<Model>; This utility type allows the declaration of an "action" function that operates against a ...

typescriptgenerics

Creating a function that is accessible to the entire module

Creating a universal function in a file that is not a module: example.ts: function example() {} You can easily call this function from another file, say test.ts, without needing to import the function from example.ts: test.ts: example(); // calling univ ...

typescript

Is Jasmine brushing off TypeScript test files?

I'm diving into my first project with Jasmine, and despite following a tutorial, I'm encountering some hurdles right from the start. After installing jasmine-node, typings, and typescript, I executed: typings install dt~jasmine --save-dev --glo ...

node.jsangulartypescriptjasmine

All-in-one package containing NestJS, Typescript, Webpack, and all necessary node_modules

Is there a way to package a NestJS project with node_modules for offline use in an application? webpack.config.js const path = require('path'); module.exports = { entry: path.join(__dirname, 'dist/main.js'), target: 'node&ap ...

javascriptnode.jstypescriptwebpacknestjs

Having trouble importing an object from another file in Typescript?

I'm facing a peculiar issue where I am unable to import a const declared in one file into another file. When trying to import the const, a TS error pops up stating Module '"../resources/dummy_container"' has no exported member &apo ...

javascriptnode.jstypescriptecmascript-6es6-class