Как правильно использовать интерфейс в Vuejs?

Question

[Максим]

Как отобразить данные name,description , time?
у меня есть интерфейс task.interface.ts

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

в компоненте

<template lang="pug">
.task()
        .name
          | {{task.name}}
        .description
          | {{task.description}}
        .time
          | {{task.time}}
</template>
import { TaskInterface } from '@/types/task.interface'
data () {
    return {
      task: {}
},
 methods: {
    setTask (task: TaskInterface) {
      task.name = '123'
      task.description1 = '123'
      task.time = '123'
      this.task = task
    }

Comments

[Aetae]

Ну и, проблема то в чём?
Если надо чтоб в setTask прилетал объект по-умолчанию даже при пустом вызове - указывай собственно значения по умолчанию. Интерфейсы и прочие типы - это исключительно описание, не более.

[Максим]

Aetae,
получается ,что ничего не выводит, то есть я не правильно его использую?

[Максим]

Aetae, извини,я наверное не правильно понял тему интерфейса, я так понял что я просто указываю какие типы должны быть и все, а сaми данные передаю в task{}

[Aetae]

Максим, ещё раз. Интерфейс - это только описание, чтоб что-то выводить - ты должен что-то выводить.
Если при вызове setTask ты передаёшь ему this.task, то ничего работать не будет, потому что с точки зрения vue никаких изменений нет: this.task остался всё тем же, а установка НОВЫХ(которых не было изначально при инициализации в data) ключей объекта должно производиться через this.$set, иначе реактивность Vue их не отловит.

[Максим]

Aetae, хорошо, а почему тогда интерфейс не работает, то есть

tasks: [{
        name: 'Create app',
        description1: 'Use smth to do this Use smth to do this Use smth to do this Use smth to do this Use smth to do this Use smth to do this Use smth to do this Use smth to do this',
        time: '02.12.2021'
      },
      {
        name: 'Fix bugs',
        description1: 'Fix all bugs',
        time: '02.12.2021'
      },
      ] as TaskInterface[]

тут я могу писать и не стринговые значения, ошибки не вылетают
при этом я удалил метод setTask()

[Aetae]

Максим, потому что as это кастование в тип. Ты говришь TS: "этот массив такого типа, пошёл нафиг". Чтоб он проверял что там, типы надо указывать заранее, условно:

const data: {
  tasks: TaskInterface[];
} = {
  tasks: [{
        name: 'Create app',
        description1: 'Use smth to do this Use smth to do this Use smth to do this Use smth to do this Use smth to do this Use smth to do this Use smth to do this Use smth to do this',
        time: '02.12.2021'
      },
      {
        name: 'Fix bugs',
        description1: 'Fix all bugs',
        time: '02.12.2021'
      },
      ]
}