Typescript hover hints show wrong types

[mjbvz]

From @burabure on April 26, 2018 22:28

Issue Type: Bug

I managed to confuse the ts language type hints, when you hover over the variables it shows a generic type, but forcing a type error on the same variable shows the correct type on the error.
This caused a couple hours of me looking over complex types trying to figure out why it showed me a variable as a generic one.

Here's the code that reproduces the error:

import React from 'react'

interface IFooProps<S> {
  children: (state: S) => JSX.Element
  initialState: S,
}

class Foo<S extends {}> extends React.Component<IFooProps<S>,S> {
  state = this.props.initialState

  public render() {
    return <>{this.props.children(this.state)}</>
  }
}

interface IBarProps {
  test: 'hello',
} 

const Bar = (props: IBarProps) => (
  <Foo initialState={props} >
    {(state) => <>{state.test}</>}
  </Foo>
)

using these deps for example:

{
  "typescript": "^2.8.1",
  "react": "^16.3.1",
  "@types/react": "^16.3.12",
}

VS Code version: Code 1.22.2 (3aeede733d9a3098f7b4bdc1f66b63b0f48c1ef9, 2018-04-12T16:34:44.222Z)
OS version: Linux x64 4.13.0-37-generic

System Info

Item	Value
CPUs	Intel(R) Core(TM) i7-5600U CPU @ 2.60GHz (4 x 2593)
Load (avg)	4, 4, 4
Memory (System)	19.31GB (0.66GB free)
Process Argv	/usr/share/code/code .
Screen Reader	no
VM	0%

Extensions (9)

Extension	Author (truncated)	Version
Bookmarks	ale	0.19.0
npm-intellisense	chr	1.3.0
githistory	don	0.4.0
tslint	eg2	1.0.28
prettier-vscode	esb	1.3.1
atom-keybindings	ms-	3.0.4
debugger-for-chrome	msj	4.3.0
snippet-creator	nik	0.0.4
code-spell-checker	str	1.6.9

(2 theme extensions excluded)

Copied from original issue: microsoft/vscode#48785

[mhegazy]

The behavior should be different in TS 2.9. you should be getting {} as a contextual type here since the type is generic, and inference will fail. you can however specify a type argument for your generic compoent: e.g.:

const Bar = (props: IBarProps) => (
    <Foo<IBarProps> initialState={props} >
        {(state) => <>{state.test}</>}
    </Foo>
)

See #22415 for more info