TypeScript实战04--TS+vue开发todo应用

简介：

        简单的列表修改demo（使用 ts + vuex-class + vue + vue-property-decorator ）

1.使用vue ui 命令创建vue项目

        使用 vue  ui 命令启动图形化界面开始配置（ vue版本 >3.0）

        这是我们新建之后的项目目录结构（这里明哥不得不说还真是方便）

---

补充说明：

        由于 TypeScript 默认并不支持 *.vue 后缀的文件。上图中shinms-vue.d.ts声明文件的意思是告诉 TypeScript 所有以vue为后缀的文件都可以交给 vue 模块来处理。（这里使用了全局类型声明写法，实际上是将模块名称 *.vue 引入了全局空间，即告诉 TypeScript 编译器，存在 *.vue 这样的模块，想使用的话就 import ）

        而在代码中导入 *.vue 文件的时候，需要写上 .vue 后缀。原因还是因为TypeScript 默认只识别 *.ts 文件，不识别 *.vue 文件：

---

        运行npm run serve成功启动！

2. 在store.js中mock数据

3. todo.vue代码（列表页）

        列表页代码中引入了vue-property-decorator，vuex-class库（需安装）这两个库。主要作用是使用装饰器简化代码书写

        比如说下图中的类装饰器@Component，是给todoPage这个实例注入name,component等属性。（其实就是简化代码书写的作用）

4. todo-item.tsx代码（列表页的子组件）

        这篇引入了一个输入框组件：ant-design-vue，并使用了@Prop，@Emit，@Watch等装饰器。

        @Prop （就是子组件用来接收父组件传值的Props属性）  感叹号是非空断言的作用

        @Prop(Object)public item!: Item;  

        等价于

        @Prop(Object)public item: Item |undefined;

        @Emit('on-save') 子组件向父组件传值 （下图二者等价）

        @Watch监听editingId，如果发生变化则触发被装饰的方法

        整片代码如下