<script lang="ts">
import Vue, { PropType } from 'vue';
import { Meta } from './models';

export default Vue.extend({
  name: 'ObjectComponent',
  props: {
    title: {
      type: String,
      required: true
    },
    meta: {
      type: (Object as unknown) as PropType<Meta>,
      required: true
    },
  },
  data(): { clickCount: number } {
    return {
      clickCount: 0
    };
  },
  methods: {
    increment(): void {
      this.clickCount++;
    },
  },
});
</script>

<script>
import Vue from 'vue'
import Component from 'vue-class-component'

@Component({
  props: {
    propMessage: String
  }
})
export default class App extends Vue {
  private title: string = 'Vue + TS é tipo isso...';

  protected mounted (): void {
    this.welcome();
  }

  private get computedMsg (): string {
    return `Olá ${this.personName}, você está vendo, ${this.title}`;
  }

  public welcome: void () {
    alert(this.computedMsg);
  }
};
</script>

<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator';
import { Todo } from './models';

@Component
export default class CompositionComponent extends Vue {
  @Prop({ type: String, required: true }) readonly title!: string;
  @Prop(Boolean) readonly active!: boolean;

  private toDos: Todo[] = [];

  public addNewTodo(task) {
    this.toDos.push({
      task,
      date: new Date().toLocaleDateString(),
    })
  }

  protected get todoCount() {
    return this.todos.length;
  }

  protected prettyTodo(todo: Todo) {
    return `${todo.date} - ${todo.task}`;
  }
}
</script>

<script lang="ts">
import { createComponent, PropType, computed, ref } from '@vue/composition-api';
import { Meta } from './models';

function clickFeatures(): { clickCount: number; increment: () => number; } {
  const clickCount: number = ref(0);
  function increment(): number => clickCount.value += 1;

  return { clickCount, increment };
}

export default createComponent({
  name: 'CompositionComponent',
  props: {
    title: {
      type: String,
      required: true
    },
    meta: {
      type: (Object as unknown) as PropType<Meta>,
      required: true
    },
  },
  setup({ todos }) => { ...clickFeatures() };
});
</script>

$ vue add typescript

$ quasar ext add @quasar/typescript