Show deprecated strikethrough for JSX properties when union type

[codepb]

🔍 Search Terms

"strikethrough deprecated prop jsx", "strikethrough deprecated prop react", "strikethrough deprecated property jsx", "strikethrough deprecated property react", "deprecated property react", "deprecated property jsx"

✅ Viability Checklist

• This wouldn't be a breaking change in existing TypeScript/JavaScript code
• This wouldn't change the runtime behavior of existing JavaScript code
• This could be implemented without emitting different JS based on the types of the expressions
• This isn't a runtime feature (e.g. library functionality, non-ECMAScript syntax with JavaScript output, new syntax sugar for JS, etc.)
• This isn't a request to add a new utility type: https://github.com/microsoft/TypeScript/wiki/No-New-Utility-Types
• This feature would agree with the rest of our Design Goals: https://github.com/Microsoft/TypeScript/wiki/TypeScript-Design-Goals

⭐ Suggestion

I came across #50079 and the fix #50084 which works nicely when the whole property is deprecated. However it's also possible to create a type like the following:

{
  myProp: 'a' | 'b' | 'c'
} | { 
  /** @deprecated use 'a' | 'b' | 'c' */
  myProp: 1 | 2 | 3
}

This still correctly shows the deprecated message when hovered over the property in JSX when the value of the property is 1, 2, or 3, and not when the value is 'a', 'b' or 'c'. However the property is never shown with a strikethrough. It would be fantastic if the strikethrough on the property could match the deprecated message behaviour in the hover pop over.

📃 Motivating Example

TypeScript has now extended deprecation checking in JSX to visually add a strikethrough to a property when the property is still valid, but a deprecated value for the property is used (see example in the suggestion above).

💻 Use Cases

1. What do you want to use this for?
   When transitioning a React component's property to a new set of values it would be useful to maintain the old values for backwards compatibility but deprecate them to visually indicate to a user that they should no longer be using them. My specific use case is when the original values were less explicit:

size: 'classname-small' | 'classname-medium' | 'classname-large'

and I'm transitioning the new type to be:

size: 's' | 'm' | 'l'

and would like to support both types in the interim, but notify uses explicitly to use the new values.
2. What shortcomings exist with current approaches?
There is no visual indication that the value is deprecated without hovering over the property
3. What workarounds are you using in the meantime?
It's not possible to workaround. Just have to deal with it only being in the pop up

[fatcerberus]

In this case the strikethrough should probably go on the value, since putting it on the property name implies the property itself is deprecated (which suggests the current behavior might have been intentional)