[Feature request] Implement Inlay Hints

[jellydn]

Feature Request: Implement Inlay Hints

What

I propose the implementation of inlay hints for TypeScript in the typescript.nvim plugin.

Why

Inlay hints are a valuable addition to the LSP specification and have been implemented in the upstream Neovim project (see Neovim/neovim#18086).

Inlay hints provide inline type information and other useful context directly in the code editor. This feature can significantly aid in understanding and navigating code, particularly in TypeScript where types are critical.

Several plugins have successfully implemented inlay hints for Neovim, such as:

• lsp-inlayhints.nvim
• typescript-tools.nvim
• rust-tools.nvim

Bringing this feature to typescript.nvim would greatly enhance its functionality and provide more information directly within the editor.

How

The exact implementation details are yet to be determined. However, there are a number of resources and reference implementations that could be used as a starting point.

[gegoune]

Typescript LSP provides that functionality already, you just need to enable it.

        typescript = {
          inlayHints = {
            includeInlayParameterNameHints = 'all',
            includeInlayParameterNameHintsWhenArgumentMatchesName = false,
            includeInlayFunctionParameterTypeHints = true,
            includeInlayVariableTypeHints = true,
            includeInlayVariableTypeHintsWhenTypeMatchesName = false,
            includeInlayPropertyDeclarationTypeHints = true,
            includeInlayFunctionLikeReturnTypeHints = true,
            includeInlayEnumMemberValueHints = true,
          },
        },
        javascript = {
          inlayHints = {
            includeInlayParameterNameHints = 'all',
            includeInlayParameterNameHintsWhenArgumentMatchesName = false,
            includeInlayFunctionParameterTypeHints = true,
            includeInlayVariableTypeHints = true,
            includeInlayVariableTypeHintsWhenTypeMatchesName = false,
            includeInlayPropertyDeclarationTypeHints = true,
            includeInlayFunctionLikeReturnTypeHints = true,
            includeInlayEnumMemberValueHints = true,
          },
        },

[jellydn]

Thank you. I'm a little bit confused because what's mentioned in the readme is unclear.

[jacksonludwig]

Thank you. I'm a little bit confused because what's mentioned in the readme is unclear.

Its because the Readme was not yet updated since this support was merged only a day or so ago :)

[ryoppippi]

require("typescript").setup({
   server = {
javascript = {
      inlayHints = {
        includeInlayEnumMemberValueHints = true,
        includeInlayFunctionLikeReturnTypeHints = true,
        includeInlayFunctionParameterTypeHints = true,
        includeInlayParameterNameHints = "all", -- 'none' | 'literals' | 'all';
        includeInlayParameterNameHintsWhenArgumentMatchesName = true,
        includeInlayPropertyDeclarationTypeHints = true,
        includeInlayVariableTypeHints = true,
      },
    },
    typescript = {
      inlayHints = {
        includeInlayEnumMemberValueHints = true,
        includeInlayFunctionLikeReturnTypeHints = true,
        includeInlayFunctionParameterTypeHints = true,
        includeInlayParameterNameHints = "all", -- 'none' | 'literals' | 'all';
        includeInlayParameterNameHintsWhenArgumentMatchesName = true,
        includeInlayPropertyDeclarationTypeHints = true,
        includeInlayVariableTypeHints = true,
      },
    },
})

Is this the correct way? I don't know why but it does not work

[ryoppippi]

OK I fixed ! it works

require("typescript").setup({
  server = {
    settings={
      javascript = {
        inlayHints = {
          includeInlayEnumMemberValueHints = true,
          includeInlayFunctionLikeReturnTypeHints = true,
          includeInlayFunctionParameterTypeHints = true,
          includeInlayParameterNameHints = "all", -- 'none' | 'literals' | 'all';
          includeInlayParameterNameHintsWhenArgumentMatchesName = true,
          includeInlayPropertyDeclarationTypeHints = true,
          includeInlayVariableTypeHints = true,
        },
      },
      typescript = {
        inlayHints = {
          includeInlayEnumMemberValueHints = true,
          includeInlayFunctionLikeReturnTypeHints = true,
          includeInlayFunctionParameterTypeHints = true,
          includeInlayParameterNameHints = "all", -- 'none' | 'literals' | 'all';
          includeInlayParameterNameHintsWhenArgumentMatchesName = true,
          includeInlayPropertyDeclarationTypeHints = true,
          includeInlayVariableTypeHints = true,
        },
      },
    },
  },
})

[jellydn]

@jacksonludwig

Its because the Readme was not yet updated since this support was merged only a day or so ago :)

Thanks for the clarification. It'd be fantastic if the Readme could be updated with usage details. I believe it would be beneficial for everyone.

[jacksonludwig]

Thanks for the clarification. It'd be fantastic if the Readme could be updated with usage details. I believe it would be beneficial for everyone.

I'd make a PR to update the readme but I'm not sure if @jose-elias-alvarez would like to leave it up to the user to configure or have this plugin handle the options in some way.