起步参考

1. Webpack构建TS项目
2. TypeScript——使用webpack搭建开发环境
3. vue-property-decorator
4. tsconfig配置参考

踩坑

1.需要对Vue 进行声明文件文件编写，否则ts无法识别vue moudle
2.Cannot find module ‘webpack-cli/bin/config-yargs’ webpack-dev-server与webpack版本对不上号
3. [VueLoaderPlugin Error] No matching rule for .vue files found. 添加VueLoaderPlugin后还需要添加vue-loader
4.关于webpack alias设置 设置后Vetur依旧无法识别并报错https://github.com/vuejs/vetur/issues/890 具体解决方法在tsconfig.json设置baseUrl 与path进行识别
5.关于组件引入问题，除了引入node-sass与sass-loader、css-loader、style-loader外还要注意内部引用的ttf字体文件，需要额外加入url-loader进行识别
6.关于TS装饰器引入报错问题error Parsing error: Using the export keyword between a decorator and a class is not allowed. Please use export @dec class instead.
需要加入装饰器babel plugin 参考https://babeljs.io/docs/en/babel-plugin-proposal-decorators 其次需要对eslint配置识别https://blog.csdn.net/qq_34301371/article/details/100152565
7.https://github.com/kaorun343/vue-property-decorator/issues/324 vue-property-decorator对于vue-class-compoent 的依赖not found 原因为perDevdependencies与devDevdependencies引入方式不同，具体参考https://www.cnblogs.com/wonyun/p/9692476.html
8.关于webpack alias设置https://www.cnblogs.com/Jimc/p/10282969.html 设置后Vetur依旧无法识别并报错https://github.com/vuejs/vetur/issues/890 具体解决方法在tsconfig.json设置baseUrl 与path进行识别
9.关于loadash isString() 判断阻值中断https://github.com/lodash/lodash/blob/master/isString.js，同时注意在ts中对参数的定义 形如

  1. // 可以直接进行类型推断，避免类型守护
  2. export function isString(value?:any): value is string {
  3.   const type = typeof value
  4.   return type === 'string' || (type === 'object' && value != null && !Array.isArray(value) && getTag(value) === '[object String]')
  5. }

10.Property ‘…’ has no initializer and is not definitely assigned in the constructor 解决需要配置TS “strictPropertyInitialization”: false, 若不开启则需要手动定义undefind
11.关于TS 联合类型推断 需要使用类型保护，或者在定义中使用is
12.webpack dev server需要开启historyFallback支持history
13.ts关于object取值，需要索引签名https://jkchao.github.io/typescript-book-chinese/typings/indexSignatures.html#typescript-%E7%B4%A2%E5%BC%95%E7%AD%BE%E5%90%8D
14.需要显式使用@compoent标识组件后才会执行生命周期

思考

1.关于表格内数据，考虑是前端可控还是依赖后端，前端可控情况更改数据时需要反复操作，依赖后端可基于配置无需多次改动页面UI逻辑。同时对于UI界面数据结构需要看重，减少重复冗余的UI界面逻辑
2.对于组件颗粒度把控上，需要基于需求，同时考虑TS class写法上与传统vue中extend写法的区别,TS更为符合编码直觉，更加灵活性
3.关于在Vue中TS代码组织问题，区别于JS的Function Api写法,可以针对部分模块的逻辑进行组织
4.关于TS类型推导，针对部分可复用的数据结构类型需要进一步抽象独立

项目模板链接

ts-webpack-template