An error has occurred in ...component.ts (..,..): A computed property name in a type literal must directly refer to a built-in symbol. Error message: Cannot find name 'any'.
I am seeking an object that contains strings that have another string, like this:
{ abc: 'xyz' }
This is what I attempted:
foo: { [string]: string };
A specific name is necessary for the computed value:
foo: { [bar: string]: string };
Encountered a similar issue post-building. The challenges were related to utilizing numbers and enum values as keys in objects. Here's some guidance for those facing this in the future.
export enum MyEnum {
one = 'stringOne',
two = 'stringTwo',
}
export const someMap = {
[ MyEnum.one ]: 'valueOne',
[ MyEnum.two ]: 'valueTwo',
};
Upon compilation, someMap will be transformed into a type resembling...
export declare const someMap: {
[ MyEnum.one ]: string;
[ MyEnum.two ]: string;
};
Note that the keys remain as enum values and not strings, which typescript/angular might not approve of because it anticipates something like...
export declare const someMap: {
[ x: string ]: string;
};
To resolve this, consider...
someMapexport interface ForceStringType {
[product: string]: string;
}
export const someMap: ForceStringType = {
[ MyEnum.one ]: 'valueOne',
[ MyEnum.two ]: 'valueTwo',
};
string Type for Keys in someMapexport const someMap: ForceStringType = {
[ MyEnum.one as string ]: 'valueOne',
[ MyEnum.two as string ]: 'valueTwo',
};
const CONSTANT_ONE = 123;
const CONSTANT_TWO = 321;
export const someMap = {
[ CONSTANT_ONE ]: 'valueOne',
[ CONSTANT_TWO ]: 'valueTwo',
};
Post-transformation, someMap will manifest as...
export declare const someMap: {
[ CONSTANT_ONE ]: string;
[ CONSTANT_TWO ]: string;
};
The keys persist as constants/numbers instead of strings, prompting typescript/angular to expect...
export declare const someMap: {
[ x: string ]: string;
};
A potential solution is...
someMapexport declare const someMap: {
[ `${CONSTANT_ONE}` ]: string;
[ `${CONSTANT_TWO}` ]: string;
};
Note: Accessing values from
someMapusing constants/numbers as keys should function correctly as typescript automatically converts them to strings. However, maintaining consistency by explicitly converting to strings is advisable.const valueOne: string = someMap[ CONSTANT_ONE ]; // vs const valueOne: string = someMap[ `${CONSTANT_ONE}` ];
The existing solution may encounter difficulties when the key type is derived from a generic source. In such cases, the in operator becomes essential:
type WithKey<K extends string | number | symbol> = {
[k in K]: boolean
}
When working with a Vue component, I encountered an issue related to incorrectly binding class names:
Check out the Vue documentation for more information.
<script lang="ts">
import { defineComponent } from '@vue/composition-api'
export default defineComponent({
props: {
className: String,
},
setup() {
const isModified = computed<boolean>(() => true)
return {
isModified,
}
<template>
<!-- Incorrect way -->
<div
class="static-class"
:class="{ [className]: true, 'static-class--modified': isModified }]">
</div>
<!-- Correct way -->
<div
class="static-class"
:class="[className, { 'static-class--modified': isModified }]">
</div>
</template>
Recently, as I was developing a Node.js app using express, I decided to enhance it with express-validator. Despite being new to express-validator, the warnings it generated perplexed me due to its lack of detailed documentation. To illustrate my point, he ...
Just starting out with react. I've encountered an issue where a prop used in a function outside the render is coming up as undefined, and trying to use it to set a state value isn't working either. I've researched this problem and found va ...
Upon entering a screen, 5 promises are automatically loaded using promise.all. The issue is that they are executed in a random order, and within each function, I use a push to store the information. The problem arises when I need to change the push to a s ...
How can I effectively utilize two interfaces for the same object? For instance: interface interfaceOne { id: string color: string } interface interfaceTwo { id: string numb: number } I have an Item component that is designed to receive an item ob ...
I am seeking a solution to pass an array of prefix strings to my custom validator in order to validate that the value begins with one of the specified prefixes. Below is the code snippet for my current validator: @ValidatorConstraint({ name: 'prefixVa ...
Hi there, I'm fairly new to Angular and trying to work with the Wikipedia API. However, I seem to be having trouble getting 4 titles from the API. Here's an example URL for one of the titles: https://en.wikipedia.org/w/api.php?action=query&pr ...
I am working on creating two lists for a roster. The first list will display the current members of this year, while the second list will show if individuals have been excused for this year. After analyzing my code, I realized that I am using two identic ...
Below is the code snippet: interface MyInterface { a: { b: { c: "c"; }; }; } type ParentProps = keyof MyInterface type ChildProps<ParentProp extends ParentProps> = keyof MyInterface[ParentProp] type GrandChildType< ...
I am working on a project that is specifically tailored for use with TypeScript projects, and I want the code inspection to lead to the actual lines of TypeScript code instead of a definition file. However, I am struggling to set up an npm project to achi ...
I'm facing an issue with a program that is supposed to piece together all the letters, but it's not functioning correctly. I've tried using the debugger, but it doesn't display any errors. Here's the code snippet: var phrase = [ &a ...
When using MUI v5, I am encountering an issue where the first button in the code provided is only half working. The button is initially colored red (both the border and text), however, upon hovering over it, the color of the border changes to blue. This is ...
In order to verify if a function called haveBeenCalledWith() includes the necessary parameters, I am seeking to validate the correctness of my call without actually executing the real methods. I have experimented with multiple solutions sourced from vario ...
Calling all Typescript enthusiasts! I need help with this code snippet: import * as appSettings from 'application-settings'; try { // shim the 'localStorage' API with application settings module global.localStorage = { ...
Presented here is a scenario I am facing: const customer = new Customer(); let customerViewModel = new CustomerLayoutViewModel(); customerViewModel = customer; Despite both Customer and CustomerLayoutViewModel being identical at the moment, there is no ...
I've encountered a strange issue. When I use console.log(self) to log the variable, it shows that the output key is set and contains all the values. However, if I try to log console.log(self.output), it returns undefined. Does anyone know why this is ...
I want to implement a unit test for a basic custom decorator that I created, but I'm facing some challenges. This decorator was developed based on the solution provided here. I have Keycloak authentication set up and using this solution in my controll ...
Currently, I'm in the process of developing an application using Ionic 2 that requires push notifications to be received. In certain scenarios, such as when the app is force-stopped on Android or when the device is turned off, push notifications are ...
My editor is flagging the usage of of as deprecated. How can I resolve this issue and get it working with of? public save(): Observable<ISaveResult> | Observable<boolean> { if (this.item) { return this.databaseService.save(this.user ...
For the source code, please visit https://github.com/zevrant/screeps I am encountering an issue with my implementation of interfaces in TypeScript. When trying to call the implemented interface, I am getting the following error: "TypeError: spawn.memory.t ...
While developing my fullstack application (a Facebook clone), I encountered an error in my server that I am struggling to resolve. The technologies I am using include node.js, express, MongoDB, Mongoose, and TypeScript. The error occurred during the devel ...