How add interface to variables in Vue.js/Typescript?-CodePudding

I have interface:

export interface TaskInterface{ name: string description1: string time: string }

and component

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

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

but it will not Error if name : 123,

How add interface to variables?

CodePudding user response：

You can easily achieve this by creating a task variable and explicitly stating it's type. This way you are letting typescript know that all objects that contain the TaskInterface properties are allowed in the tasks array.

<script lang="ts">
import { defineComponent } from "vue";
import { TaskInterface } from '@/types/task.interface'

export default defineComponent({
  name: "Home",
  data() {
    const tasks: TaskInterface[] = [
      {
        name: "Create app",
        // name: 123, // Type 'number' is not assignable to type 'string'.
        description1: "Use smth ",
        time: "02.12.2021",
      },
      {
        name: "Fix bugs",
        description1: "Fix all bugs",
        time: "02.12.2021",
      },
    ];

    return {
      tasks,
    };
  },
});