Vue 3.0如何配置TypeScript支持(推荐)

// tsconfig.json
{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    // 这样就可以对 `this` 上的数据属性进行更严格的推断`
    "strict": true,
    "jsx": "preserve",
    "moduleResolution": "node"
  }
}

# 1. Install Vue CLI, 如果尚未安装
npm install --global @vue/cli@next
# 2. 创建一个新项目, 选择 "Manually select features" 选项
vue create my-project-name
# 3. 如果已经有一个不存在TypeScript的 Vue CLI项目，请添加适当的 Vue CLI插件：
vue add typescript

<script lang="ts">
  ...
</script>

import { defineComponent } from 'vue'
const Component = defineComponent({
  // 已启用类型推断
})

const Component = defineComponent({
  data() {
    return {
      count: 0
    }
  },
  mounted() {
    const result = this.count.split('') // => Property 'split' does not exist on type 'number'
  }
})

interface Book {
  title: string
  author: string
  year: number
}
const Component = defineComponent({
  data() {
    return {
      book: {
        title: 'Vue 3 Guide',
        author: 'Vue Team',
        year: 2020
      } as Book
    }
  }
})

import { defineComponent } from 'vue'
const Component = defineComponent({
  data() {
    return {
      message: 'Hello!'
    }
  },
  computed: {
    // 需要注释
    greeting(): string {
      return this.message + '!'
    }
    // 在使用setter进行计算时，需要对getter进行注释
    greetingUppercased: {
      get(): string {
        return this.greeting.toUpperCase();
      },
      set(newValue: string) {
        this.message = newValue.toUpperCase();
      },
    },
  }
})

import { defineComponent, PropType } from 'vue'
interface ComplexMessage {
  title: string
  okMessage: string
  cancelMessage: string
}
const Component = defineComponent({
  props: {
    name: String,
    success: { type: String },
    callback: {
      type: Function as PropType<() => void>
    },
    message: {
      type: Object as PropType<ComplexMessage>,
      required: true,
      validator(message: ComplexMessage) {
        return !!message.title
      }
    }
  }
})

import { defineComponent } from 'vue'
const Component = defineComponent({
  props: {
    message: {
      type: String,
      required: true
    }
  },
  setup(props) {
    const result = props.message.split('') // 正确, 'message' 被声明为字符串
    const filtered = props.message.filter(p => p.value) // 将引发错误: Property 'filter' does not exist on type 'string'
  }
})

import { defineComponent, ref } from 'vue'
const Component = defineComponent({
  setup() {
    const year = ref(2020)
    const result = year.value.split('') // => Property 'split' does not exist on type 'number'
  }
})

const year = ref<string | number>('2020') // year's type: Ref<string | number>
year.value = 2020 // ok!

import { defineComponent, reactive } from 'vue'
interface Book {
  title: string
  year?: number
}
export default defineComponent({
  name: 'HelloWorld',
  setup() {
    const book = reactive<Book>({ title: 'Vue 3 Guide' })
    // or
    const book: Book = reactive({ title: 'Vue 3 Guide' })
    // or
    const book = reactive({ title: 'Vue 3 Guide' }) as Book
  }
})

import { defineComponent, ref, computed } from 'vue'
export default defineComponent({
  name: 'CounterButton',
  setup() {
    let count = ref(0)
    // 只读
    const doubleCount = computed(() => count.value * 2)
    const result = doubleCount.value.split('') // => Property 'split' does not exist on type 'number'
  }
})