21 ~ 22. 集成并使用 Typescript

集成 Typescript

集成 Typescript 后定义组件的方式

集成 ts 后请确保组件的 script 部分已将语言设置为 TypeScript

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

要让 TypeScript 正确推断 Vue 组件选项中的类型，需要使用 defineComponent 全局方法定义组件

import { defineComponent } from 'vue'

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

示例：

1. 定义一个基于 ts 的 Home 组件

<template>
<div>
  home组件
  <br>
  {{ book.title }}
  <br>
  {{ book.author }}
  <br>
  {{ book.year }}
  <br>
</div>
</template>

<script lang="ts">
import {
  defineComponent
} from 'vue'

export default defineComponent({
  name: 'App',
  data() {
    return {
      book: {
        title: 'Vue 3 Guide',
        author: 'Vue Team',
        year: 2020
      }
    }
  }
})
</script>

2. 定义一个接口约束 Home 组件中 data 的数据类型

import {
  defineComponent
} from 'vue'

interface Book {
    title: string
    author: string
    year: number
}

let book: Book = {
    title: 'Vue 3 Guide',
    author: 'Vue Team',
    year: 2020
}

export default defineComponent({
  name: 'App',
  data() {
    return {
      book
    }
  }
})

3. 在方法、计算属性中约束数据类型

<template>
<div>
  home组件
  <br /> <br />
  {{ book.title }}
  <br /> <br />
  {{ book.author }}
  <br /> <br />
  {{ book.year }}
  <br /> <br />
  <button @click="setTitle()">设置数据</button>
  <br /> <br />
  {{ greeting }}
</div>
</template>

<script lang="ts">
import {
  defineComponent
} from 'vue'

interface Book {
  title: string
  author: string
  year: number
}
var book: Book = {
  title: 'Vue 3 Guide',
  author: 'Vue Team',
  year: 2020
}

export default defineComponent({
  name: 'App',
  data() {
    return {
      book
    }
  },
  methods: {
    setTitle(): void {
      this.book.title = '你好vue3.0'
    }
  },
  computed: {
    greeting(): string {
      return this.book.title + '!'
    }
  }
})
</script>

集成 Typescript 与组合式 API 一起使用

<template>
<div>
  home组件
</div>
</template>

<script lang="ts">
import {
  defineComponent,
  ref,
  reactive
} from 'vue'

interface Book {
  title: string
  year ? : number
}
export default defineComponent({
  name: 'App',
  setup() {
    const year1 = ref < string | number > ('2020');
    const book1 = reactive < Book > ({
      title: 'Vue 3 Guide'
    })
    // or
    const book2: Book = reactive({
      title: 'Vue 3 Guide'
    })
    // or
    const book3 = reactive({
      title: 'Vue 3 Guide'
    }) as Book
    return {
      year1,
      book1,
      book2,
      book3
    }
  }
})
</script>