I want to create custom type in typescript like this:
color?: 'textPrimary' | 'textSecondary' | string;
so we have some default value and also other strings.
but typescript convert it to string | undefined
How can I achieve this?
2 Answers
As Ben commented, there's no need to define a type for those extra values you want to fall back, as they are also of type string.
In any case, you may be interested in using enums so you can store those 'default values' you are trying to save. This is helpful for the future of your code, so if there's a need to change those values to another default string, you can only change the enum and not go to each hardcoded string and changing them one by one.
Do something like this:
enum defaultClasses {
primary = 'textPrimary',
secondary = 'textSecondary'
}
class baseProp {
color?: defaultClasses | string
}
const prop = new baseProp()
prop.color = defaultClasses.primary
console.log(prop.color) # 'textPrimary'
3 Comments
Ruan Mendes
Great thinking outside the box!
BeHappy
I want to use as React component props. I am not sure if creating instance of class is good or not.
Japsz
The
class was only an example, you should be fine using them when creating new types anywhere. Note though that there are 2 different ways you cant type-check your React props, one is using Typescript which will only validate them at Compilation, and the other is using prop-types which validates at runtime, this question may help.That doesn't make sense. A 'type' is simply a description of all the possible values that a variable, argument or object property can take.
The type 'textPrimary' | 'textSecondary' means 'this variable can only take the value 'textPrimary' or 'textSecondary'.
The type string represents 'all the legal values of a string in JavaScript' - which includes 'textPrimary' and 'textSecondary', so these more specific types are redundant. Hence why TypeScript did the right thing and eliminated them.
1 Comment
TOPKAT
What you say makes sense for the logical (compiler) point of view, but for the IDE autocompletion POV, it would be useful that type
'textPrimary' | 'textSecondary'is suggested while not erroring if any other value is inputted
string. The compiler will always allow any string in it. How do you intend to use it? It's being converted to a string because string contains those two specific string types. It's also undefined likely because you are not compiling in strict mode where nulls/undefined must be checked.