TypeScript基本用法和在vue中的使用

本文介绍了TypeScript的基本用法，如声明和接口，并详细阐述了如何在Vue项目中应用TypeScript，包括在组件中使用修饰符进行类型检查，以及如何编写计算属性等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

TypeScript基本用法

1.声明

let isDone: boolean = false;

:后面跟数据类型 string，number,boolean,object等等 = 后面跟对应值

在函数定义中使用

function add(x: number, y: number): number {
    return x + y;
}

2.接口

interface LabelledValue {
  readonly label: string;
}                                   //这里可以理解为定义一个接口,前面可以加一些修饰符

function printLabel(labelledObj: LabelledValue) {
  console.log(labelledObj.label);
}

其他使用细节请参考官方文档哈

在vue中使用

1）你可以引入修饰符然后在@Component 下操作，里面的用法和vue保持一样（包括生命周期，函数调用，计算属性等等）

<script lang="ts">
import { Component,Provide, Vue } from 'vue-property-decorator';
import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src

@Component({
  components: {
    HelloWorld,
  },
  created() {

  }
})
export default class Test extends Vue {
}
</script>

当然你也可以这样写，添加修饰符后写到里面去

@Component
export default class Test extends Vue { 
  data() {
    return {
      msg:'test'
    }
  }
  created() {

  }
}
</script>

不过还是提倡这种写法，更符合ts的风格，不用再引入修饰符@Component了，要使用计算属性的话函数前加get

export default class Test extends Vue {
   private msg!: string //未初始化变量一定要加！
   test:string = '1234'      //定义变量
   testClick(x: number): number {     //定义函数
      return x 
    }
    get testnew() {           //计算属性
      return this.test + 5
    }
    created() {                //生命周期
      
    }
}