Syntax highlighting breaks inside typescript files when type casting

[pbondoer]

When using <Foo>bar type casts, syntax highlighting and indentation completely break.

I initially thought this might be an issue with typescript-vim but upon further investigation I can confirm this only happens when both vim-jsx-pretty and typescript-vim are enabled.

Minimal .vimrc to reproduce (with vim-plug)

call plug#begin()
Plug 'leafgarland/typescript-vim'
Plug 'MaxMEllon/vim-jsx-pretty'
call plug#end()

Additional discussion

See https://github.com/leafgarland/typescript-vim/issues/134 for previous discussion which prompted me to create this issue.

---

Please let me know if I'm missing something obvious or if you need any extra info :+1:

[yuezk]

Thanks for your reporting. This is a known issue and it's difficult to fix, but I'll try it later.

[yuezk]

@pbondoer For now, I recommend you to use the as syntax to cast the type. That is:

const foo = bar as string 

https://www.typescriptlang.org/docs/handbook/jsx.html#the-as-operator

[pbondoer]

I looked into vim-jsx-typescript as an alternative but it seems to suffer from the same issue. I've opened an issue on their tracker:

https://github.com/peitalin/vim-jsx-typescript/issues/21

However, I've chosen to use that plugin instead for now, as vim-jsx-pretty with TypeScript support on (using g:vim_jsx_pretty_disable_tsx = 1) breaks even non JSX files, whereas the other plugin is scoped to files with the .tsx extension.

Perhaps it should be considered doing the same, as it seems the extension is required, as per TypeScript docs.

[yuezk]

@pbondoer I came up with a solution for this issue, you can update this plugin and test it.

For the extension problem, I will update it soon.

[pbondoer]

@yuezk It seems to work on my simple test case and on complex files that used to have issues. I'll let you know if anything weird pops up.

However, brackets are not getting any highlight. Though I'm willing to live with that:

Thank you! :heart:

[yuezk]

I noticed that and just committed a change, you can update it again.

[pbondoer]

@yuezk It now highlights string, none on the brackets though. Is it intentional? I would expect them to stand out in the same way as stands out or parametric angle brackets stand out in Promise<FooBar>.

[yuezk]

@pbondoer Added the highlight for brackets. Update it again.

[pbondoer]

Seems to work good on a large test file! I'll close this issue. Feel free to re-open if needed :tada: