Here is the code:

type JustifyContentProperty = 'center' | 'flex-start' | string

const justifyContent:JustifyContentProperty = 'cen..' // I expected 'center' suggests, but none.

Question:

1. How can I get property suggestion with this type? expected showing 'center' 'flex-start', but because of "| string" definition it shows nothing.

2. I met this problem because csstype library has a type -- CSS.JustifyContentProperty which can't trigger expected suggestions because of '| string', I wander if any other solution?

Here is the code:

type JustifyContentProperty = 'center' | 'flex-start' | string

const justifyContent:JustifyContentProperty = 'cen..' // I expected 'center' suggests, but none.

Question:

1. How can I get property suggestion with this type? expected showing 'center' 'flex-start', but because of "| string" definition it shows nothing.

2. I met this problem because csstype library has a type -- CSS.JustifyContentProperty which can't trigger expected suggestions because of '| string', I wander if any other solution?

• javascript
• reactjs
• typescript
• frontend

• Why not just define type JustifyContentProperty = 'center' | 'flex-start'? – Baboo Commented Jul 9, 2020 at 19:18
• Because the type is es from a library -- csstype – Yokiijay Commented Jul 10, 2020 at 2:00

2 Answers 2

This requires a trick:

type JustifyContentProperty = 'center' | 'flex-start' | string & {}

With this change, any string is still assignable to JustifyContentProperty, but you will get IntelliSense for 'center' | 'flex-start'.

I have 2 solutions, IDE will give you type suggestions

// solution 1
type JustifyContentProperty = 'center' | 'flex-start' 

// solution2 use const enum
const enum position {
  'center',
  'flex-start'
}
const justifyContent = position.center