序列文章从项目中由浅入深的学习vue,微信小程序和快应用 (1)从项目中由浅入深的学习react (2)前言为什么会有TS? 大家有没想过这个问题,原因是JS是弱类型编程语言,也就是申明变量类型可以任意变换。所以这个时候TS出现了。TS 是 JS 的超集,也相当于预处理器,本文通过一个template项目来让你快速上手TS。1.效果图vue-ts-template , 欢迎star2.技术栈1.vue2.vue-cli33.vue-router4.vuex5.typescript6.iconfont3.核心插件技能点对应的apivue-class-component是vue官方提供的,暴露了vue和component实例vue-property-decorator是社区提供深度依赖vue-class-component拓展出了很多操作符@Component @Prop @Emit @Watch @Inject 可以说是 vue class component 的一个超集,正常开发的时候 你只需要使用 vue property decorator 中提供的操作符即可@Component注册组件get类似vue的computed@Prop,@Emit组件传值@Watch监听值变化@Privde,@Inject对应privde和inject高阶组件用法,作用是多级父组件传值给子@Model类似vue的model4.TS语法 数据类型any(任意类型);number;string,boolean;数组:number[]或new Array(项的数据类型相同);void返回值类型;null;undefined;never(从不出现值);元祖(比数组强大,项的类型可以不同);接口:interface关键字;对象:类似JS的object;函数:function声明;类:class关键字,包括字段,构造函数和方法变量声明let [变量名] : [类型] = 值, 必须指定类型声明array,let arr: any[] = [1, 2]运算符,条件语句,循环同JS函数声明同JS,形参必须指定类型,因为形参也是变量联合类型通过竖线声明一组值为多种类型命名空间namespace关键字模块import和export访问控制符public,private(只能被其定义所在的类访问)和protected(可以被其自身以及其子类和父类访问)默认public,是不是有点Java的味道5.问题来了1.怎么在项目手动配置ts?vue+ts项目配置2.接口和类的区别?接口只声明成员方法,不做实现 ,class通过implements 来实现接口ts中接口和类的区别3.接口和对象的区别?接口是公共属性或方法的集合,可以通过类去实现;对象只是键值对的实例4.类class和函数的区别?类是关键字class,函数是function类可以实现接口5.接口实现继承方法?interface Person { age:number } interface Musician extends Person { instrument:string } var drummer = <Musician>{}; drummer.age = 27 drummer.instrument = “Drums” console.log(“年龄: “+drummer.age)console.log(“喜欢的乐器: “+drummer.instrument)