Как использовать typescript в шаблоне Vue 2?

Question

[dicem]

Собственно имею следующий код:


В IDE соответственно вижу ошибоньки, хочу поправить, делаю следующее:


Получаю ошибку, по понятным причинам:


Собственно, вопрос, есть ли какой нибудь способ, использовать TS в шаблонах Vue 2 SFC?

Comments

[Вадим]

писать шаблоны на tsx

[dicem]

Вадим, Этого я боялся, а не подскажешь, как в проект на Vue cli 5 добавить поддержку TSC шаблонов?

[Вадим]

dicem, не подскажу, но, полагаю, где-то тут есть ответ:
https://bestofvue.com/repo/tsx-jsx-for-typescript-...
https://doc.vueframework.com/guide/typescript-supp...

Answer 1

[Aetae]

Vue 2 не даёт использовать произвольный код в шаблонах, там код компилируется вместе с самим шаблоном отдельно от всей твоей системы сборки.

В теории можно подсунуть свои обработчики в компилятор, но на практике когда до этого дошло и я начал рыть в эту сторону - появился vue 3 и я забил. Можешь порыть и забить и ты.:)

В любом случае тайпкасты в шаблоне - моветон, пофикси изначальные типы и всё будет нормально. Ну или по-хардокору можно отрубить тайпчек в шаблонах в IDE.:)

Использование методов\функций в шаблоне - тоже весьма плохо, и так делать крайне на рекомендуется: подготовь все данные в compunted и отдавай в шаблон только чистые и удобные для него(шаблона) данные.
Если это сделать кажется сложно, то с большой вероятностью вы неправильно используете vue: в vue надо разбивать всё на минимальные компоненты(пусть даже в пяток строк), вот и тут разбейте на подкомпоненты и всё снова станет просто и приятно.

А на богомерзкий jsx не переходи, а то те, кто после тебя проект продолжит, могут тебе и глаз подбить.:)