vue2+js中兼容ts

要在Vue.js 2中使用TypeScript，需要进行以下几个步骤：

1. 安装必要的依赖

npm install --save-dev typescript ts-loader @types/vue

2. 配置webpack

在webpack.config.js中添加以下代码：

module.exports = {
  // ...
  module: {
    rules: [{
      test: /\.tsx?$/,
      loader: 'ts-loader',
      options: { appendTsSuffixTo: [/\.vue$/] }
    }]
  },
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.vue']
  }
  // ...
}

3. 添加tsconfig.json

在项目根目录下创建一个tsconfig.json文件，内容如下：

{
  "compilerOptions": {
    "target": "es5",
    "module": "es2015",
    "strict": true,
    "jsx": "preserve",
    "moduleResolution": "node",
    "esModuleInterop": true,
    "experimentalDecorators": true,
    "sourceMap": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"],
  "exclude": ["node_modules"]
}

4. 创建Vue组件

在Vue组件中使用TypeScript：

<script lang="ts">
import Vue from 'vue';

export default Vue.extend({
  name: 'MyComponent',
  data() {
    return {
      message: 'Hello, TypeScript!'
    };
  }
});
</script>

5. 在main.js中引入组件

import Vue from 'vue';
import MyComponent from './components/MyComponent.vue';

new Vue({
  el: '#app',
  components: {
    MyComponent
  }
});

以上是在Vue.js 2中使用TypeScript的基本步骤。注意，使用TypeScript时，需要在Vue组件中显式地指定props和data的类型，以便编译器可以进行类型检查。另外，建议在Vue组件中使用装饰器来指定组件选项，以提高代码的可读性和可维护性。