vue2.x项目中ts写法

在Vue 2.x项目中使用TypeScript，你需要做以下几步：

1. 确保项目中安装了TypeScript和vue-class-component。
2. 修改tsconfig.json文件，确保Vue项目中的TypeScript编译设置正确。
3. 在Vue组件中使用TypeScript语法。

以下是一个简单的Vue 2.x项目中使用TypeScript的例子：

首先，确保安装了必要的依赖：

npm install --save typescript vue-class-component

然后，在tsconfig.json中添加对.vue文件的支持：

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "experimentalDecorators": true,
    "module": "esNext",
    "target": "es5",
    "moduleResolution": "node",
    "isolatedModules": false,
    "lib": [
      "dom",
      "es5",
      "es2015.promise"
    ],
    "sourceMap": true
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.vue",
    "src/**/*.js"
  ],
  "exclude": [
    "node_modules"
  ]
}

接下来，创建一个Vue组件：

<template>
  <div>{{ message }}</div>
</template>
 
<script lang="ts">
import Vue from 'vue';
import Component from 'vue-class-component';
 
@Component
export default class MyComponent extends Vue {
  // 定义数据属性
  message: string = 'Hello, Vue with TypeScript!';
 
  // 定义方法
  greet(): void {
    alert(this.message);
  }
}
</script>

在这个例子中，我们使用<script lang="ts">来指示Vue应当用TypeScript来处理这个<script>标签内的代码。vue-class-component装饰器允许你使用ES6类的语法来定义Vue组件。在TypeScript中，你可以声明数据属性和方法，并且可以使用装饰器来标记这些属性和方法。