Suggestion

🔍 Search Terms

rootDirs autocomplete type imports

Possibly related: #30148

✅ 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

If I have rootDirs set, make autocomplete suggestions of types in another root be relative to the current folder:

/// file: src/file.js
// don't suggest this when rootDirs contains './some/other/root' (or also suggest it, but not as first suggestion):
import type { Something } from './some/other/root/src/$types';
// instead suggest the import as a relative path:
import type { Something } from './$types';

Somet| // cursor

📃 Motivating Example

With SvelteKit we are using rootDirs to provide a better development experience around typing. We generate typings from the user's code and allow those types to be imported by the user to safe them some unnecessary work. Thanks to rootDirs TypeScript virtually puts them side-by-side so you can do an import like this inside a route file:

/// file: src/routes/[parameter]/+page.ts
// rootDirs resolves to `.` and `.svelte-kit/types`
import type { Load } from './$types'; // comes from `.svelte-kit/types/src/routes/[parameter]/$types`

export const load: Load = ({ params }) => {
  // params is auto-typed because we infered from the file path that it should be `{ parameter: string }`
}

It would be great if this path needn't be typed by hand and instead would be the first result of the import suggestions. Right now, it suggests the path relative to the base, so it suggests .svelte-kit/types/src/routes/[parameter]/$types instead of ./$types .

You can play around with it yourself by doing npm create svelte@latest, choosing the demo app with TypeScript, running npm run dev (to create the types) and looking for ./$types imports.

💻 Use Cases

Use case: SvelteKit DX around type imports

Workaround: Svelte's TypeScript plugin tries to enhance the imports to provide the desired relative import, but that does only work if people have that plugin enabled, and it's not 100% reliable.