Show both narrowed type and declared type

Suggestion

🔍 Search Terms

List of keywords you searched for before creating this issue. Write them down here so that others can find this suggestion more easily and help provide feedback.

✅ Viability Checklist

My suggestion meets these guidelines:

• 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 feature would agree with the rest of TypeScript's Design Goals.

⭐ Suggestion

📃 Motivating Example

https://twitter.com/Rich_Harris/status/1437490023763415043

is roughly a confusion on narrowed vs storage type of a given field/binding

// _: any
let _;

// _: any
_ = new Date();

// _: any, but completions from Date
// type doesn't match usability, only assignability
_.getFullYear();

💻 Use Cases

Current UI / typing only shows what can be assigned to a value storage location given a source text location.
Need UI to show what can be used from a value storage location given a source text location.

Much of the time these should be the same but showing something about the narrowing would apparently remove some confusions, for example (bikeshed):

let _;
_ = new Date();

// _: any
_;

// becomes...

// _: any as Date
_;

Start with the motivating examples and the description of current UI and typing behavior. Determine how the requested display of both the declared storage type and narrowed type should work, and use the examples to define when the feature is complete.