组件

在使用 单文件组件 (SFC) 时， script 标签须指定成 ts 语言。

<script lang="ts">
  // 这里编写 TypeScript 代码
</script>

模板

<template>
  <div>
    Name: {{ fullName }}
    Message: {{ message }}
  </div>
</template>

Script

For Vue 2.7 (default since Nuxt 2.16.0) use:

import { defineComponent, PropType } from 'vue'

interface User {
  firstName: string
  lastName: string
}

export default defineComponent({
  name: 'YourComponent',

  props: {
    user: {
      type: Object as PropType<User>,
      required: true
    }
  },

  data () {
    return {
      message: 'This is a message'
    }
  },

  computed: {
    fullName (): string {
      return `${this.user.firstName} ${this.user.lastName}`
    }
  }
})

For Vue 2.6 use:

import Vue, { PropOptions } from 'vue'

interface User {
  firstName: string
  lastName: string
}

export default Vue.extend({
  name: 'YourComponent',

  props: {
    user: {
      type: Object,
      required: true
    } as PropOptions<User>
  },

  data () {
    return {
      message: 'This is a message'
    }
  },

  computed: {
    fullName (): string {
      return `${this.user.firstName} ${this.user.lastName}`
    }
  }
})