やり方は2通りある。

Vueっぽく書きたい場合はVue.extend。
クラスベースで書きたい場合はvue-property-decorator。

公式のガイドはこちら。

Vue.extendの場合

パッケージのインストール

普通にVue.jsとTypeScriptを入れるだけ。
モジュールバンドラはParcelを使う。

yarn add vue
yarn add -D typescript parcel-bundler vue-hot-reload-api vue-template-compiler @vue/component-compiler-utils

以下の3つのパッケージが入っていない場合は、
parcelがバンドル時に自動でインストールを行うみたい。

• vue-hot-reload-api
• vue-template-compiler
• @vue/component-compiler-utils

tsconfigの設定

thisの補完が効くように設定。

{
  "compilerOptions": {
    "noImplicitThis": true
  }
}

shims.vue.d.tsの作成

TypeScriptで.vue形式のファイルをインポートできるようにする。
/src直下に作成すればよい。

declare module '*.vue' {
  import Vue from 'vue'
  export default Vue
}

importするときは拡張子(.vue)まで書くこと。

import Component from './components/Component.vue'

VSCodeを使っていて、import文でエラーになるときは、
vue.d.tsを別タブで開くと直るかも?

コンポーネントの作成

import Vue from 'vue'

export default Vue.extend({
  props: {
    name: {
      type: String,
      required: false,
      default: '名無し'
    }
  },
  methods: {
    foo() {
      // thisの補完が効く!
      return this.name + 'さん'
    }
  }
})

どうやらtypeとdefaultの値で型を判定している様子。
オブジェクトや配列だと型の判別ができない。
これはPropTypeを使えば解決できる。

import Vue, { PropType } from 'vue'

interface User {
  name: string
  age: number
}

export default Vue.extend({
  props: {
    user: Object as PropType<User>
  }
})

vue-property-decoratorの場合

パッケージのインストール

追加で以下のパッケージも入れる。

yarn add vue-property-decorator

tsconfigの設定

デコレータを使えるようにしておこう。

{
  "compilerOptions": {
    "experimentalDecorators": true
  }
}

コンポーネントの作成

Componentデコレータを付加したクラスを作る。

import { Vue, Component, Prop } from 'vue-property-decorator'

@Component
export default class Greeting extends Vue {
  @Prop({
    type: String,
    required: false,
    default: '名無し'
  }) readonly name: string
}

コンポーネント内で別のコンポーネントを使いたいときは以下のように記述する。

import { Vue, Component } from 'vue-property-decorator'
import Child from './Child.vue'

@Component({
  components: {
    Child
  }
})
export default class Parent extends Vue {
  /* ... */
}

テンプレート内での補完

Twitterで漁ってたら見つけた。

大きな更新としては Template Interpolation Service があります。これにより、テンプレート内に書かれている式の型チェック、ホバーによる変数情報の表示、補完、定義ジャンプ、参照の表示ができるようになりました。
この機能はまだ実験的なものなので、設定から vetur.experimental.templateInterpolationService を有効にすることで使えるようになります。

引用元：Vue テンプレート内の式の型チェックと解析ができるまで