Can't get suggestion intelliSense from some Types like: JustifyContentProperty, AlignItemsProperty etc.

[yokiijay]

Here is the code

const justifyContent: CSS.JustifyContentProperty = 'cent...' // expected 'center' shows up, but none.

The type is: export type JustifyContentProperty = Globals | ContentDistribution | ContentPosition | "left" | "normal" | "right" | string;

Question

1. How can I get suggestion intelliSense even the type assigned '| string'
2. If can't, why the definition made this way, any better reason?

Tks~

[karol-majewski]

Solution

This can be fixed (or rather, worked around) by intersecting string with another type.

export type JustifyContentProperty = Globals | ContentDistribution | ContentPosition | "left" | "normal" | "right" | (string & {});

Demo

Source

Originally suggested in https://github.com/microsoft/TypeScript/issues/29729#issuecomment-460346421.

Considerations

• The same treatment would have to be applied to every property defined as a union of string literals and string.
• It's not a breaking change, the only difference is that IntelliSense will work.

[yokiijay]

Tks alot. Still wonder:

1. I can change it only by entering in and copy the whole inside types?
2. Is there any way to modify it based on type JustifyContentProperty?
3. (Opinion) In my opinion, it would be better to only use the well-known values and get rid of string. The CSS standard changes infrequently, and if one really does need a different value, they can always cast it.

[karol-majewski]

1. Types defined with the type keyword are not augmentable. There is no non-invasive way to alter them. They need to be changed upstream.
2. If changing the types upstream is not an option, you can mutate your local version of csstype. patch-package allows you to do just that.
3. I agree — but this is something for the maintainers to consider.

[yokiijay]

Again, thank yo so much.