TypeScript Editor Preferences

TypeScript Preferences

In addition to the well-known tsconfig.json, TypeScript also integrates with your editor. In VSCode, you can set typescript.preferences in your settings.json file.

Here are a few that I think are worth setting on top of the defaults.

Import module specifier

This preference will change the default auto-import to a non-relative import if possible.

{ "typescript.preferences.importModuleSpecifier": "non-relative" }

For example, if you auto-import foo from the foo.js module, by default you’ll get a relative path:

import { foo } from "../../foo";

If you have an alias set up, TypeScript will use the non-relative import instead.

import { foo } from "@/foo";

I like this setting because it makes it easier to copy and paste imports between modules.

Prefer type only auto imports

This preference will default to prefixing imports with type wherever possible.

{ "typescript.preferences.preferTypeOnlyAutoImports": true }

For example, classes can be used as the actual class, or as a type.

// my-class.ts
export class MyClass {
	// ...
}

// class
const foo = new MyClass();

// type
type Bar = { myClass: MyClass };

If for example you are creating a function that takes the class as an argument, TypeScript will auto-import the class. In this case, you only need to use the class as a type, not in the actual code, so you can prefix the import with type to ensure the import doesn’t appear in your final .js module.

import type { MyClass } from "@/my-class";

const fn = (arg: MyClass) => {
	// ...
};

Go to source definition

preferGoToSourceDefinition instructs TypeScript to prefer going to the source definition when you cmd/ctrl click on something instead of going to type definition. This is nice to see the source code instead of viewing the d.ts definition file.

{ "typescript.preferGoToSourceDefinition": true }