microsoft / microsoft/TypeScript-Sublime-Plugin

Feature request: Could the plugin recommend "import"s for inferred types?

Open
#737 1 comment 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
JavaScript
Stars
1.7k
Forks
236
Avg merge
21d 13h
Merged PRs (30d)
1

Description

Try opening this minimal demo project https://github.com/mcclure/ts-hello-bug/tree/editor-demo in Sublime Text, and opening the file 'src/index.tsx'. index.tsx imports a function demoFunction() from 'dependencyOne.ts' and calls it. If I move the cursor over the let x in 'index.tsx', it says:

let x : DemoClass, Line 3, Column 5

Here is a problem: what is DemoClass? I didn't import any such class. If I try to say let x : DemoClass = demoFunction(), I will get error TS2304: Cannot find name 'DemoClass'., because I didn't import it. (Since I wrote the demo project myself, I know the answer: 'dependencyOne.ts' imported it from 'dependencyTwo.ts'. But let's say I don't know that.)

If I cmd-P and look at the features of the TypeScript plugin, I see it exposes a useful function: "GoTo Type Definition". If I select this option, it takes me to class DemoClass in 'dependencyTwo.ts'. Awesome, problem solved! I need to import { DemoClass } from "./dependencyTwo"`.

But consider a slightly more complicated example: What if DemoClass had been imported from a library? In this case the existing tools are less helpful. Try out this other demo project https://github.com/mcclure/ts-hello/tree/stable which is also minimal, but this one has Preact in package.json. Try npm installing, then opening 'src/index.tsx' and adding the line:

let test = <div>Test</div>

If I mouse over test it says "let test : h.JSX.Element". This is a little odder. If I "GoTo Type Definition" this, I get:

interface Element extends preact.VNode<any> {}

inside namespace JSXInternal, in jsx.d.ts. That's not actionable the way finding 'dependencyTwo.ts' was. What I want to do here, probably, is import { JSX } from "preact"; and then use the type JSX.Element. But I wouldn't figure this out by using the Sublime plugin.

I'm not sure these are the best examples. But this is a situation I did find myself in twice this weekend: There is a symbol or value I have access to by writing code. The Sublime plugin can successfully infer its type. I want to assign the value to a variable, and I want to write a type signature for that variable. But the type is not in scope, I have no idea what to import to get it in scope, and the plugin can't help me because the type is something deep inside a spaghetti of import exports in 'node_modules'.

Expected behavior/suggestion: In both the cases above, I think the plugin could have figured out the correct import line and suggested it to me. In the first case, it could have followed the import from './dependencyTwo' and detected I can import './dependencyTwo' also. In the second case, it could have noticed the JSXInternal namespace that h import exports is also import exported by the "preact" node_module (which I am already importing other symbols from) and suggested that.

(The second example might be a harder case because it would require the plugin to speculate about different ways JSXInternal could get into scope; but possibly if there are several sensible "import" routes, the plugin could show a list. Also I think the plugin has this speculation logic already, because if I type let test : JSX.Element without importing JSX, then use the mysterious "TypeScript: Request Code Fixes" feature of the plugin, it magically adds , JSX to my "import JSX" line up top (!))

I am using v3.7.3 to test.

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Reproduce the two demos in src/index.tsx, including the local dependencyOne.ts/dependencyTwo.ts case and the Preact case described in jsx.d.ts. Compare GoTo Type Definition with TypeScript: Request Code Fixes, then define done as suggesting usable imports for both local types and types exposed through a package.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, typescript
Domain
developer-experience, tooling
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
32/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.