martinjohns / vscode-inline-types Goto Github PK

It won't work if /tsconfig.json doesn't exist. I think this is an issue because if you are using a mono-repo (lerna, yarn workspaces, yamat, rush, etc) then you probably don't have a tsconfig.json at the root, but in a child folder. I think this should search for a tsconfig.sjon in the closest folder to the current file. Also I think typescript compiler API has a function for this (given a .ts file find the tsconfig.json file that apply to it. ) My two cents

This is my config:
node -v
v10.4.0
npm -v
6.1.0
tsc -v
Version 2.9.2
vscode : 1.24.1
OS: linux (arch)

Thanks

"Make type renders their own characters instead of having them be attached to the previous character."

As it is now if a type is defined as const foo: string = 'Hi'; then moving cursor from here const fo|o: string = 'Hi'; one step to the right will move the cursor all the way over there const foo: string |= 'Hi';. I purpose that it instead moved the cursor to here const foo|: string = 'Hi'; and then if you moved once more to the right we would end up over there const foo: string |= 'Hi';

I'm using a light theme and the inline types are difficult to read:

Could the extension provide a way to customise this colour?

why will I need this feature?

because we often write such code:

const arr: any[] = [];

if (arr) {
  // this block always run
}

The decorator can remind us, what type of the condition expression.

because condition should be a boolean, not an array or object.

Array and Object always equal true, even it's empty. It makes us confused.

and it's useful to check some mistake

for example:

Wrong: Missing await

Correct

For anyone else that stumbles across this extension/repository: this extension is no longer needed because the feature has been implemented natively in VS Code.

Simply add the following settings to your settings file

"javascript.inlayHints.enumMemberValues.enabled": true,
"javascript.inlayHints.functionLikeReturnTypes.enabled": true,
"javascript.inlayHints.parameterNames.enabled": "all",
"javascript.inlayHints.parameterTypes.enabled": true,
"javascript.inlayHints.propertyDeclarationTypes.enabled": true,
"javascript.inlayHints.variableTypes.enabled": true,
"typescript.inlayHints.enumMemberValues.enabled": true,
"typescript.inlayHints.functionLikeReturnTypes.enabled": true,
"typescript.inlayHints.parameterNames.enabled": "all",
"typescript.inlayHints.parameterTypes.enabled": true,
"typescript.inlayHints.propertyDeclarationTypes.enabled": true,
"typescript.inlayHints.variableTypes.enabled": true

or search for "inlay" in the settings UI and toggle the settings from there.

Toggling the hints will look as follows:

Parameter type inlay hints

Variable type inlay hints

Property type inlay hints

Return type inlay hints

See the official documentation on this feature here -> https://code.visualstudio.com/docs/languages/typescript#_inlay-hints
See this video showing the feature -> https://www.youtube.com/watch?v=tY4mrgW3jcM

This will substantially improve this extension.
You will get better performance, will always use the same ts version that the user uses and don't have to care about tsconfigs any more.

See here for a demo.

Description:
The extension should not slow down VS Code, therefor the extension should be profiled and potential performance problems should be removed.

Description:
Allow configuration of the extension using the VS Code settings to disable / enable distinct features of this extension.

Example:
In the User Settings settings.json:

{
    "inlineTypes.feature.functionReturnType": false,
    "inlineTypes.feature.variableType": false
}

It would be great to have a contextual menu option or a light bulb option that would write automatically the inferred definition. For example:

Right now the extension is inferring the string return type. So if I choose some option like "Write definitions explicitly" it would turn my method into this:

So the inferred type is not displayed anymore because it's actually written in the code.

Example code:

import * as ts from 'typescript';
function getSourceFile(): ts.SourceFile { return {} as ts.SourceFile; }

const sourceFile = getSourceFile;

Actual decoration:

const sourceFile: SourceFile = getSourceFile();

Expected decoration:

const sourceFile: ts.SourceFile = getSourceFile();

This extension is awesome and useful.

Can you consider to add a feature for CallExpression AST node?

before:

function getUserInfo(name: string): void {
  //
}

getUserInfo("username");

after:

function getUserInfo(name: string): void {
  //
}

// "name: " is a decorator, create by extension
getUserInfo(name: "username");

See here:

The highlighted types are coming from the extension not written in the file. I don't why they keep showing with white color. I can override color and opacity from config but it still won't affect these 2 as shown in the picture.

It's very weird because in the picture we can see only one of the types shown for a const is affected by this issue. The others are fine.

Description:
Currently the extension updates the decorations on every key stroke. This introduces a lot of flickering and updates when writing a function, as the inferred type can change a lot while typing. A configurable (depends on #3) delay should be added, which delays the update of the decorations for a specified duration after the last keystroke.

Example code:

class TestClass {
    public testMethod(arg: string) {
        return arg;
    }
}

Actual decoration:

public testMethod(arg: string) {

Expected decoration:

public testMethod(arg: string): string {

This is my tsconfig:

{
  "compilerOptions": {
    "target": "es6",   
    "module": "commonjs", 
    "moduleResolution": "node",
    "lib": ["es2018", "dom"],
    "outDir": "./dist", 
    "rootDir": ".",
    "strict": true, 
    "strictNullChecks": false,
    "noImplicitAny": true,
  }, 
  "include": [
    "src"
  ]
}

It would be great if this plugin also worked on files with a tsx extension.

With or without that though this is one of my fave plugins right now! Amazing work!

I installed the latest version, and enabled it for my workspace. Our project is relatively large (maybe?), and I was getting no output from the plugin (I tested it a couple weeks ago, and it worked on a plain TS file, then).
It also appeared to hang / interfere with normal type checking.

I tested in pure .ts files, and in .tsx, and I got no output. I didn't see any errors anywhere, but I don't know where to look.

I'm happy to test more things, just let me know what information I could provide or where I could look for debug output.

VSCode @ Version 1.24.1 (1.24.1)

This:

const foo: (par: any): any = (par: any): any => {}

would turn into this:

const foo = (par: any): any => {}

Description:
The type any is often undesired in code bases due to its lack of type-safety. If the type is inferred to any the light grey text should be replaced with a bright red warning color.

Description:
Currently nothing in the code is automatically tested. This of course is not very nice. Tests for old features should be added.

Description:
Currently only debug logs exist, which are not helpful to the user of the extension. Instead of, or additionally to, those debug logs proper log calls should be added, which are available using an Output window in VS Code. This shows more transparency showing what the extension is doing when.

Example code:

interface Result<TData1 = undefined, TData2 = undefined> {
    readonly data1: TData1;
    readonly data2: TData2;
}

function testResult0(): Result { return { data1: undefined, data2: undefined }; }
function testResult1(data1: string): Result<string> { return { data1, data2: undefined }; }
function testResult2(data1: string, data2: number): Result<string, number> { return { data1, data2 }; }

const test0 = testResult0();
const test1 = testResult1('test');
const test2 = testResult2('test', 0);

Expected decoration:

function testResult0(): Result<undefined, undefined> { .... }
function testResult0(): Result<string, undefined> { .... }

const test0: Result<undefined, undefined> = testResult0();
const test1: Result<string, undefined> = testResult1('test');