Having the following original code, it is a function which based on the value of toCheck is building a css class:
const computeSomething = (toCheck: string) => {
return clsx('flex', {
'flex-start': toCheck === 'FIRST',
'flex-end': toCheck === 'LAST'
});
}
The requirement is to use enum for toCheck, tried something but probably it's wrong:
export enum toCheck {
FIRST = 'FIRST',
LAST = 'LAST'
}
const computeSomething = (toCheck: string) => {
return clsx('flex', {
'flex-start': toCheck.FIRST,
'flex-end': toCheck.LAST
});
}
The error says:
Property 'FIRST' does not exist on type 'string'.
Any ideas?
You are shadowing the enum by using the same name for your parameter. Use a different name for the enum and the parameter to avoid it. The idiomatic case for enums is PascalCase.
After that, just use a generic that extends the enum type and you should have no problems:
declare function clsx (...args: unknown[]): void;
enum ToCheck {
FIRST = 'FIRST',
LAST = 'LAST',
}
const computeSomething = <T extends typeof ToCheck>(toCheck: T) => {
return clsx('flex', {
'flex-start': toCheck.FIRST,
'flex-end': toCheck.LAST
});
}
computeSomething(ToCheck); // ok
The problem is that your toCheck is not referring to the (intended) enum due to your parameter being named the same (toCheck: string). Changing the name of either should solve the problem:
export enum ToCheckEnum {
FIRST = 'FIRST',
LAST = 'LAST'
}
const computeSomething = (toCheck: string) => {
return clsx('flex', {
'flex-start': ToCheckEnum.FIRST,
'flex-end': ToCheckEnum.LAST
});
}
The convention is that enum/type should have Pascal case so I think this way is better.
Why do you pass in toCheck as an argument? Just do this:
export enum ToCheckEnum {
FIRST = 'FIRST',
LAST = 'LAST'
}
const computeSomething = (toCheck: ToCheckEnum) => {
return clsx('flex', {
'flex-start': toCheck === ToCheckEnum.FIRST,
'flex-end': toCheck === ToCheckEnum.LAST
});
}