vue ts 设置tslint提示_vue+typescript+antd-design-vue+tsx 终极组件设计模式。

网上大多数vue+ts的项目都是用的ts+template

但是template对ts的支持有多差，应该都有感受，毕竟用上了ts还用template是没有灵魂的。

那tsx到底哪里比template好呢？

1、template的不能感知到组件内部的属性而tsx是可以

2、tsx更灵活（这个不多说）

3、组件props的提示，很多时候因为手贱写错变量名而找一天的bug。但是tsx能从根源上帮 我们杜绝这些问题。

vue cli3虽然已经对ts做了很大程度的支持，但完全不够用，所以就得自己动起手来搞点事。

我先来介绍一下ts为了jsx而出的几个属性：

这个属性代表所有组件上都有的属性。比如style id 等，这些属性都不会写在props 但是ts回去检查，如果没有就会告诉你 missing xxx。所以我们把这些都有的属性写到这个类型下面。

这个属性呢，就是你要告诉ts 你要对组件里的哪个属性进行检查。经过我的测试，vue里会对class 里的所有属性和实例后的所有属性进行检查... 这个就比较蛋疼了。

我的做法是这样：指定ElementAttributesProperty 属性对组件的$props属性进行检查

但是我们没办法对$props进行类型声明啊。

我起初的做法是这样的：

也是行的通的。但是每个组件里面都得写一遍，这不符合我处女座的性格啊。

so：我们能不能像react那样传递一个泛型P进去赋予$props类型呢。

此时我们可以这样

之前我们的props的类型不仅需要interface 去声明一遍 在组件里每声明一个props 都得把类型再写一遍，本来写接口类型就已经很蛋疼了，写两遍不是要了亲命啊！

但是此时我们使用

perfect！！！！

介绍完类组件，接下来就是函数式组件了。

可能在vue里使用函数式组件的人不多，但是函数式组件真的很好用呢。(最大的好处就是不用再组件里注册props，毕竟懒！)

react里默认第一个参数是props ts也会对第一个对象里的所有属性进行检查。

但是vue就又蛋疼了！

vue函数式组件的第一个参数里包含了这么多属性，而props属性是属性的内部属性，

更蛋疼的是ts好像没有像class组件那样 可以指定属性去检查。这怎么办呢......

我将ctx里的类型全部转化为可选 然后传递给props的泛型P和ctx合并，此时的我们需要被ts检查的属性全都存在于ctx对象上了，perfect。。。

写一个对antd-vue组件二次封装的函数式组件

antd 的table组件是么有tooptip的，而且algin对其方式应该是可以统一设置的 但是api没有提供， 所以我用函数式组件 拦截了组件的props 经过改动 再传给原组件 。

有时候我们有很多的props需要传递 ，不想在组件里一一定义，但是组件又有内部状态，还需要生命周期怎么办呢？ look↓

所有的props都从上层的函数式组件获取，省去了定义props的麻烦。

而且组件有自己的生命周期状态，prefect。。。。

总结：使用 TS 来实现对 vue 组件进行正确的类型检查其实是相当难的，但是谁让我聪明呢，嘻嘻。