There is pretty large gap in Usability of the information of types being displayed by Webstorm/IntelliJ vs VS Code when it comes to displaying TypeScript type information be it parameter info completion, type info, error display, in most situations when VS Code gives useful info, Webstorm/IntelliJ just provide total mess of raw Typescript types where nothing is resolved to resulting type.
Is there some solution be it options, or plugin or anything else to make info these IDEs provide useful?
Code below with comments demonstrates issue, where most of the info gets strongly in favor of VS Code:
type InOut<In, Out> = {
type: "in-out"
in: In,
out: Out
}
type Extract<Input, Type, Prop extends string> = Input extends Type ? Input[Prop] : Input
type Param = Extract<InOut<string, number>, InOut<any, any>, "in">
export const test = (data: Param) => {}
// Webstorm [parameter autocompletion]: data: Param
// Webstorm [type info] function test(data: Param): void
// Webstorm [error info] Argument type 1 is not assignable to parameter type Param
// VSCode [parameter autocompletion]: test(data: string): void
// VSCode [type info] const test: (data: Param) => void
// VSCode [error info] Argument of type 'number' is not assignable to parameter of type 'string'
test(1)
test("test")
export const InOut = <In, Out>() => {
return {
type: "in-out",
} as InOut<In, Out>
}
type FirstArg<In> = In extends {
type: 'in-out'
} ? In['in'] : In
type LastArg<InOut, Out> = InOut extends {
type: 'in-out'
} ? InOut['out'] : Out
type ReturnType<Data, LastReturn> = Data extends {type: 'in-out'} ? (data: Data['in']) => Data['out'] : LastReturn
interface TestInterface {
<A extends InOut<any, any> | any, B, C extends LastArg<A, C>>(value: A, fn1: (input: FirstArg<A>) => B, fn2: (input: B) => C): ReturnType<A, C>;
}
const interfaceFn: TestInterface = (value: any, ...fns: Function[]): unknown => {
return fns.reduce((acc, fn) => fn(acc), value);
};
// Webstorm [parameter autocompletion]: value: any, fn1: (input: FirstArg<any>) => unknown,
// fn2: (input: unknown) => LastArg<any, C>
// Webstorm [parameter autocompletion, after first]: value: string, fn1: (input: FirstArg<string>) => unknown, fn2: (input: unknown) => LastArg<string, C>
// => unknown, fn2: (input: unknown) => unknown): unknown
// Webstorm [type info: function test]:
// TestInterface.<InOut<string, string>,"first value","second value">(
// value: InOut<string, string>,
// fn1: (input: FirstArg<InOut<string, string>>) => "first value",
// fn2: (input: "first value") => "second value"): ReturnType<InOut<string, string>, "second value">
// Webstorm [error info] Argument type (second: any) => 1 is not assignable to parameter type
// (input: "first value") => LastArg<InOut<string, string>, 1>
// VSCode [parameter autocompletion]:
// interfaceFn(value: unknown, fn1: (input: unknown) => unknown, fn2:
// (input: unknown) => unknown): unknown
// VSCode [parameter autocompletion, after first]:
// interfaceFn(value: string, fn1: (input: string) => unknown, fn2:
// (input: unknown) => unknown): unknown
// VSCode [type info]
// const interfaceFn: TestInterface
// <InOut<string, string>, string, string>(value: InOut<string, string>, fn1:
// (input: string) => string, fn2: (input: string) => string) => (data: string) =>
// string
// VSCode [error info] Type 'number' is not assignable to type 'string'
// The expected type comes from the return type of this signature.
interfaceFn(
InOut<string, string>(),
first => "first value",
second => "second value",
)
interfaceFn(
InOut<string, string>(),
first => "first value",
second => 1,
)