ERROR in...component.ts (..,..): A computed property name in a type literal must directly refer to a built- in symbol. ...: Cannot find name 'any'.
I'm looking forward an object which contains strings which have other string, ie:
{ abc: 'xyz' }
What I did:
foo: { [string]: string };
计算值上的识别名称是必需的:
foo: { [bar: string]: string };
I had a similar issue after building. The two issues I faced were with using numbers and or enum values as keys in objects. Just to help those that see this in the future.
export enum MyEnum {
one = 'stringOne',
two = 'stringTwo',
}
export const someMap = {
[ MyEnum.one ]: 'valueOne',
[ MyEnum.two ]: 'valueTwo',
};
This will transpile someMap
to a type that look something like...
export declare const someMap: {
[ MyEnum.one ]: string;
[ MyEnum.two ]: string;
};
Note the keys are still the enum value and not strings, typescript/angular does not like that because it is expecting something like...
export declare const someMap: {
[ x: string ]: string;
};
So two possible fixes are...
someMap
export interface ForceStringType {
[product: string]: string;
}
export const someMap: ForceStringType = {
[ MyEnum.one ]: 'valueOne',
[ MyEnum.two ]: 'valueTwo',
};
string
type to keys of someMap
export 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',
};
This will transpile someMap
to a type that look something like...
export declare const someMap: {
[ CONSTANT_ONE ]: string;
[ CONSTANT_TWO ]: string;
};
Note the keys are still the constant/number value and not strings, typescript/angular is again expecting something like...
export declare const someMap: {
[ x: string ]: string;
};
So one possible fix is...
someMap
export declare const someMap: {
[ `${CONSTANT_ONE}` ]: string;
[ `${CONSTANT_TWO}` ]: string;
};
Note: Accessing a value from
someMap
with the constant/number as a key should not matter as typescript will coerce it to a string anyway, but probably best for overall consistency.const valueOne: string = someMap[ CONSTANT_ONE ]; // vs const valueOne: string = someMap[ `${CONSTANT_ONE}` ];
The currently accepted answer will not work if the key type comes from a generic. For that to work, you need to use the in
operator:
type WithKey<K extends string | number | symbol> = {
[k in K]: boolean
}
I was having this issue in a Vue component, my problem was that I was incorrectly binding class names:
<script lang="ts">
import { defineComponent } from '@vue/composition-api'
export default defineComponent({
props: {
className: String,
},
setup() {
const isModified = computed<boolean>(() => true)
return {
isModified,
}
<template>
<!-- BAD -->
<div
class="static-class"
:class="{ [className]: true, 'static-class--modified': isModified }]">
</div>
<!-- GOOD -->
<div
class="static-class"
:class="[className, { 'static-class--modified': isModified }]">
</div>
</template>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.