Vue项目中Ts的使用

组件

在TypeScript中，@标记的称为装饰器。

@Component装饰器，可以将我们创建的TypeScript类标记为Vue组件

在使用TypeScript开发时，组件的内部变量不再需要使用方法去声明，只需要直接声明类变量即可:

<template>
  <div>
    {
    
    {
    
     info }}
  </div>
</template>

<script lang="ts">
    import {
    
     Component, Vue } from 'vue-property-decorator';
    @Component
    export default class HelloWorld extends Vue {
    
    
        info = 'hello ts';
    }
</script>

<style scoped lang="scss">
</style>

方法

在TypeScript中声明方法也比较简单，就是基本的TypeScript方法就可以了:

<template>
  <div>
    <fin-button @click="change">Click</fin-button>
  </div>
</template>

<script lang="ts">
    import {
    
     Component, Vue } from 'vue-property-decorator';
    @Component
    export default class HelloWorld extends Vue {
    
    
        change() {
    
    
            console.log(111);
        }
    }
</script>

<style scoped lang="scss">
</style>