Repository: TypeScript
Issue: IDE Suggestion: Provide hover tooltips for keywords and syntax
Labels: Suggestion,In Discussion,Domain: Quick Info,Experience Enhancement

# Suggestion

<!--
  Please fill in each section completely. Thank you!
-->

## 🔍 Search Terms

<!--
  💡 Did you know? TypeScript has over 2,000 open suggestions!
  🔎 Please search thoroughly before logging new feature requests as most common ideas already have a proposal in progress.
  The "Common Feature Requests" section of the FAQ lists many popular requests: https://github.com/Microsoft/TypeScript/wiki/FAQ#common-feature-requests

  Replace the text below:
-->

IDE, hover, intellisense, keywords, syntax

## ✅ Viability Checklist

<!--
   Suggestions that don't meet all these criteria are very, very unlikely to be accepted.
   We always recommend reviewing the TypeScript design goals before investing time writing
   a proposal for ideas outside the scope of the project.
-->
My suggestion meets these guidelines:

* [x] This wouldn't be a breaking change in existing TypeScript/JavaScript code
* [x] This wouldn't change the runtime behavior of existing JavaScript code
* [x] This could be implemented without emitting different JS based on the types of the expressions
* [x] This isn't a runtime feature (e.g. library functionality, non-ECMAScript syntax with JavaScript output, new syntax sugar for JS, etc.)
* [x] This feature would agree with the rest of [TypeScript's Design Goals](https://github.com/Microsoft/TypeScript/wiki/TypeScript-Design-Goals).


## ⭐ Suggestion

<!-- A summary of what you'd like to see added or changed -->

I'd love to see TS implement some intellisense/hover docs around keywords and syntax in the language to help teach people what things mean. Nothing overly fancy - just a sentence or two to describe what a keyword means or what a piece of syntax does.

The idea comes from Hack language. Internally at Meta the Hack language team recently added this for some of their keywords:

![image](https://user-images.githubusercontent.com/7462525/165814772-7b150243-d9ce-449f-83d7-19a5c821a396.png)

![image](https://user-images.githubusercontent.com/7462525/165814860-583ddc4c-ddc1-4db4-ad0b-54b4cebf71e9.png)

![image](https://user-images.githubusercontent.com/7462525/165815293-25d8d98b-2519-40ab-82ac-c9d30da61717.png)

Personally I think this is a great idea to help people learn the language without having to manually google for keywords. Googling is particularly difficult in the case of syntax because you can't actually google for it most of the time.

Some illustrating examples:

```ts
   abstract class Foo {
// ^^^^^^^^ An `abstract` class is a class that cannot be directly instantiated. The role of `abstract` classes is to serve as a base class for subclasses which do implement all the `abstract` members.

     abstract foo(): string;
//   ^^^^^^^^ An `abstract` members define a signature that must be implemented in subclasses.

     protected bar = 1;
//   ^^^^^^^^^ `protected` members are only visible to subclasses of the class they’re declared in.

     static baz = '';
//   ^^^^^^ `static` members exist on the class declaration and cannot be accessed through a class instance

    static {
//  ^^^^^^ `static` blocks allow statements to be evaluated during evaluation of the class declaration.
      // ...
    }
   }

   let x = false;
   x ||= true;
//   ^^^ Logical OR assignment. Assigns if x is falsy.

   const y = 2 | 1;
//             ^ Bitwise OR. Returns a 1 in each bit position for which the corresponding bits of either or both operands are 1s.

   foo?.bar;
//    ^^ Optional chaining. Like the `.` chaining operator, except that instead of causing an error if a reference is `null` or `undefined`, the expression short-circuits with a return value of `undefined`. When used with function calls, it returns `undefined` if the given function does not exist.

   const arr = [...bar];
//              ^^^ Iterable spread. Allows an iterable to be expanded into the array.

   function rest(...args) {}
//               ^^^ Rest operator. Collects all remaining arguments into an array.

   type T = string | number;
//                 ^ Union type. Some text explaining that unions can be any of the types in the union
```

Could also link out to the mdn documentation (in the case of core JS features) or to the TS handbook (in the case of TS features) to help people get more information.