Обновление из будущего: Vue 2.5 внес большие изменения в поддержку Typescript. Есть действительно замечательные вещи, но эта статья уже не соответствует действительности.

А пока три совета:

  1. Рекомендуемая конфигурация приведена в статье поддержки машинописного текста в документации по vue. Пользуюсь, но пришлось добавить noImplicitThis: false. Я расскажу почему в статье.
  2. В документе упоминается использование 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.

  1. Я начал с шаблона webpack-simple от vue-cli. Проверьте репозиторий шаблонов для получения инструкций по установке.
  2. Установите ts-loader для поддержки машинописного текста и ссылки на машинописный текст, если он у вас установлен глобально. Поручения есть и по репо. Не забывайте npm link typescript!
  3. Измените свой webpack.config.js. Я отметил необходимые изменения заглавной TK. Обратите внимание, что я решил использовать SCSS, поэтому vue-cli вставил правила scss, которые вы видите в строках с 33 по 39:

4. Это ключ. Секретный соус, чтобы все это работало. Добавьте небольшой файл в src /, чтобы машинописный текст знал, что ваши файлы .vue являются модулями, и позволял вам их импортировать.

5. tsconfig.json. Я точно знаю, что он должен существовать, чтобы это работало, но я не совсем знаю, какие из его частей необходимы. Я знаю, что это работает, и не нашел времени, чтобы понять, почему.

6. Любой тег скрипта, который вы хотите интерпретировать как машинописный текст, должен быть <script lang="ts">.

В конце концов, весь код, который мне был нужен, находился в глубине библиотеки vue class component decorator, но на официальной странице поддержки машинописного текста не упоминается использование отдельных файловых компонентов, и я не смог найти обновленную запись. в Интернете, так что поехали.

Ура!