## vue项目引进TS ts是JavaScript的超集，强类型数据，组件化友好 下载typescript和loader：`npm install typescript ts-loader --save-dev` 安装vue-property-decorator：`npm install vue-property-decorator --save-dev ` 配置vue.config.js ```js configureWebpack: { resolve: { extensions: [".ts", ".tsx", ".js", ".json"] }, module: { rules: [{ test: /\.tsx?$/, loader: 'ts-loader', exclude: /node_modules/, options: { appendTsSuffixTo: [/\.vue$/], } } ] } } ``` 新建tsconfig.json放在项目根目录 ```json { "compilerOptions": { "target": "es5", "module": "commonjs", "strict": true, "strictNullChecks": true, "esModuleInterop": true, "experimentalDecorators": true } } ``` 在src根目录下新建vue-shim.d.ts 这个文件可以让vue识别ts文件 ```js declare module "*.vue" { import Vue from "vue"; export default Vue;} ``` .vue 文件改造 ```js // 加上 lang=ts 让webpack识别此段代码为 typescript <script lang="ts"> import Vue from 'vue' export default Vue.extend({ // ... }) </script> ``` ## 插件 vue-class-component：强化 Vue 组件，使用 TypeScript装饰器 增强 Vue 组件，使得组件更加扁平化 ```js import Vue from 'vue' import Component from 'vue-class-component' // 表明此组件接受propMessage参数 @Component({ props: { propMessage: String } }) export default class App extends Vue { // 等价于 data() { return { msg: 'hello' } } msg = 'hello'; // 等价于是 computed: { computedMsg() {} } get computedMsg() { return 'computed ' + this.msg } // 等价于 methods: { great() {} } great() { console.log(this.computedMsg()) } } ``` vue-property-decorator在vue-class-component的基础上增加了更多与Vue相关的装饰器 https://juejin.cn/post/6844904046352941064#heading-4 @Component 类装饰器、@Emit、@Provice @Inject、@Prop、@Watch、@Minxins 、@Model(在一个组件上自定义v-model） ```js import { Vue, Component, Prop, Watch, Emit } from 'vue-property-decorator' @Component export default class App extends Vue { @Prop(Number) readonly propA: Number | undefined @Prop({ type: String, default: ''}) readonly propB: String // 等价于 watch: { propA(val, oldval) { ... } } @Watch('propA') onPropAChanged(val: String, oldVal: String) { ... } // 等价于 resetCount() { ... this.$emit('reset') } @Emit('reset') resetCount() { this.count = 0 } // 等价于 returnValue() { this.$emit('return-value', 10, e) } @Emit() returnValue(e) { return 10 } // 等价于 promise() { ... promise.then(value => this.$emit('promise', value)) } @Emit() promise() { return new Promise(resolve => { resolve(20) }) } } ```