前言

由于公司所有项目使用的都是vue2.0， ts基本没有使用；因此改造项目在vue2.0中使用typescript和 Composition API，也就是ts，js混合开发的一个过度版本，新旧代码分离，渐进性修改；

在vue中如何应用TS

1、安装TS和s-loader

npm install --save-dev typescript 
npm install --save-dev ts-loader

2、配置webpack，

/* vue.config.js */
module.exports = {
  configureWebpack: {
    resolve: {
    	extensions: [`.js`, `.vue`, `.json`, `.ts`]
    },
    module: {
      rules: [
        {
          test: /\.tsx?$/,
          loader: 'ts-loader',
          exclude: /node_modules/,
          options: {
           appendTsSuffixTo: [/\.vue$/] 
          }
        },
      ]
    }
  }
};

3、在根目录建tsconfig.json文件 配置以下内容，

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowJs": true,                      // 允许js
    "allowSyntheticDefaultImports": true,
    "noImplicitAny": false,               // 不进行any语法检查
    "sourceMap": true,
    "baseUrl": ".",
    "types": [
      "webpack-env"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.js",  // 导入js
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx",
    "public/config.js"  // 导入js
  ],
  "exclude": [
    "node_modules"
  ]
}

注意：

1、除了将文件后缀由.js改为.ts外，在.vue组件中需要设置

2、必须包含strict: true（或至少noImplicitThis: true是strict标志的一部分）以利用this组件方法中的类型检查，否则它始终被视为any类型

经过以上配置就可以在我们原本的项目中使用ts文件了

<script lang="ts">
  // ...
</script>

在项目中引入@vue/composition-api

Vue 3 新出的 Composition API 可以优雅的聚集零散业务代码，在vue 2.0的项目中我们也是可以使用的；

1、安装

npm install @vue/composition-api

2、在vue中注册该插件 在使用composition-api前，必须先在vue中注册该插件

import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)

3、使用

在.vue文件中，组件导出时，需要使用defineComponent函数对setup函数进行封装，返回options的对象

import { defineComponent,ref,onMounted  } from '@vue/composition-api';

export default defineComponent({
name:"",
components:{
// ...
} as any,
props:{},
setup(props){
    console.log("props",props)
    const list = ref([])
    const getDataList= ()=>{
       list.value.push(...dataList)
    }
    onMounted(getDataList)
    return {list,getDataList}
}
}),
mounted(){
console.log(this.list)
}