2

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?

BeHappy
  • 3,705
  • 5
  • 18
  • 59
  • maybe you are looking for an interface? – MrJami Aug 16 '21 at 18:42
  • I don't understand why a type would be of two specific strings and also of generic `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. – Ruan Mendes Aug 16 '21 at 18:45
  • @MrJami Why an interface? Please be sure to add reasoning to your comments. – Ruan Mendes Aug 16 '21 at 18:45
  • I think you are looking for this: https://stackoverflow.com/questions/68064202/how-to-type-a-color-prop – gaitat Aug 16 '21 at 18:46
  • @JuanMendes I want to have some default values and also can pass others sting as values. 'textPrimary' and 'textSecondary' are predefined color, so I can use editor intelligence. – BeHappy Aug 16 '21 at 18:52
  • I see, you would like the editor to suggest those two values but accept any string... This seems to kind of works already... Try hitting ctrl+space when your cursor is within the quotes. – Ruan Mendes Aug 16 '21 at 18:57
  • I knew how to use editor suggestion :) but it does not suggest those values :) – BeHappy Aug 16 '21 at 18:59
  • @BeHappy Yes, I was using the TS playground and it did seem to suggest those values. However, it also suggested all words that had been typed on the page... :( – Ruan Mendes Aug 16 '21 at 19:04
  • @JuanMendes :((( – BeHappy Aug 16 '21 at 19:07
  • 1
    Please see [the answer](https://stackoverflow.com/a/61048124/2887218) to the question this duplicates. – jcalz Aug 16 '21 at 19:15

2 Answers2

2

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'
Japsz
  • 785
  • 6
  • 14
  • Great thinking outside the box! – Ruan Mendes Aug 16 '21 at 19:02
  • I want to use as React component props. I am not sure if creating instance of class is good or not. – BeHappy Aug 16 '21 at 19:05
  • 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](https://stackoverflow.com/questions/41746028/proptypes-in-a-typescript-react-application). – Japsz Aug 16 '21 at 19:16
1

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.

Ben Wainwright
  • 4,224
  • 1
  • 18
  • 36
  • 1
    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 – TOPKAT Apr 11 '23 at 08:20