Vue.js+TypeScript项目中如何给变量绑定interface实现类型约束

你使用as TaskInterface[]的写法属于类型断言，TypeScript 处理类型断言时会默认开发者已经自行完成了类型合法性校验，会跳过对该变量的自动严格类型校验，因此你给name属性赋值为数字时不会触发类型报错。

你需要通过显式类型标注的方式约束变量类型，而不是用类型断言，根据你使用的Vue版本对应调整写法：

Vue2 选项式API写法 #

需要用Vue.extend包裹组件定义，同时给data函数指定返回值类型：

import Vue from 'vue'
import { TaskInterface } from '@/types/task.interface'

export default Vue.extend({
  // 给data函数的返回值显式标注类型
  data(): { tasks: TaskInterface[] } {
    return {
      tasks: [
        {
          name: 'Create app', 
          description1: 'Use smth ',
          time: '02.12.2021' 
        },
        { 
          name: 'Fix bugs',
          description1: 'Fix all bugs',
          time: '02.12.2021' 
        }
      ]
    }
  }
})

Vue3 写法 #

选项式API #

import { defineComponent } from 'vue'
import { TaskInterface } from '@/types/task.interface'

export default defineComponent({
  data(): { tasks: TaskInterface[] } {
    return {
      tasks: [
        {
          name: 'Create app', 
          description1: 'Use smth ',
          time: '02.12.2021' 
        },
        { 
          name: 'Fix bugs',
          description1: 'Fix all bugs',
          time: '02.12.2021' 
        }
      ]
    }
  }
})

Composition API（setup写法） #

import { defineComponent, ref } from 'vue'
import { TaskInterface } from '@/types/task.interface'

export default defineComponent({
  setup() {
    // 给ref传入泛型参数标注类型
    const tasks = ref<TaskInterface[]>([
      {
        name: 'Create app', 
        description1: 'Use smth ',
        time: '02.12.2021' 
      },
      { 
        name: 'Fix bugs',
        description1: 'Fix all bugs',
        time: '02.12.2021' 
      }
    ])
    return { tasks }
  }
})

• 不要滥用as类型断言，仅在你明确值的类型一定符合预期、且TypeScript无法自动推导类型时再使用，日常类型约束优先使用显式类型标注
• Vue组件必须用Vue.extend（Vue2）或defineComponent（Vue3）包裹，才能让TypeScript正确推导组件内上下文的类型，完成自动校验

内容的提问来源于stack exchange，提问作者Victor Zhvanetskiy