Обновление из будущего: Vue 2.5 внес большие изменения в поддержку Typescript. Есть действительно замечательные вещи, но эта статья уже не соответствует действительности.
А пока три совета:
- Рекомендуемая конфигурация приведена в статье поддержки машинописного текста в документации по vue. Пользуюсь, но пришлось добавить
noImplicitThis: false
. Я расскажу почему в статье. - В документе упоминается использование Vue.extend для объектов компонентов. Поскольку отдельные файловые компоненты экспортируют объекты компонентов, делайте то, что он говорит.
... <script> import Vue from 'vue'; export default Vue.extend({ ...your component object }); </script> ...
3. Вам по-прежнему нужен sfc.d.ts
, который нигде не упоминается в документации Vue.
Ниже представлена неотредактированная оригинальная статья.
TypeScript официально поддерживается, но вам нужно добавить несколько вещей в конфигурацию вашего веб-пакета. Чтобы использовать компоненты single.vue
file, вам нужно сделать немного больше. По какой-то причине мне потребовалась целая вечность, чтобы понять. Когда я искал инструкции, я нашел несколько устаревших сообщений в блогах, полных кода, который не работал, кучу шаблонов vue-cli, которые не работали с отдельными файловыми компонентами, а также официальное репозиторий Github и сопутствующую библиотеку, которая содержал весь код, который мне был нужен, но мне пришлось разобраться в проблемах, чтобы понять это. Итак, вот как можно гармонично использовать компоненты одного файла webpack, typescript и vue.
- Я начал с шаблона webpack-simple от vue-cli. Проверьте репозиторий шаблонов для получения инструкций по установке.
- Установите ts-loader для поддержки машинописного текста и ссылки на машинописный текст, если он у вас установлен глобально. Поручения есть и по репо. Не забывайте
npm link typescript
! - Измените свой webpack.config.js. Я отметил необходимые изменения заглавной
TK
. Обратите внимание, что я решил использовать SCSS, поэтому vue-cli вставил правила scss, которые вы видите в строках с 33 по 39:
4. Это ключ. Секретный соус, чтобы все это работало. Добавьте небольшой файл в src /, чтобы машинописный текст знал, что ваши файлы .vue являются модулями, и позволял вам их импортировать.
5. tsconfig.json. Я точно знаю, что он должен существовать, чтобы это работало, но я не совсем знаю, какие из его частей необходимы. Я знаю, что это работает, и не нашел времени, чтобы понять, почему.
6. Любой тег скрипта, который вы хотите интерпретировать как машинописный текст, должен быть <script lang="ts">
.
В конце концов, весь код, который мне был нужен, находился в глубине библиотеки vue class component decorator, но на официальной странице поддержки машинописного текста не упоминается использование отдельных файловых компонентов, и я не смог найти обновленную запись. в Интернете, так что поехали.
Ура!