序列文章
从项目中由浅入深的学习vue,微信小程序和快应用 (1)
从项目中由浅入深的学习react (2)
前言
为什么会有TS? 大家有没想过这个问题,原因是JS是弱类型编程语言,也就是申明变量类型可以任意变换。所以这个时候TS出现了。
TS 是 JS 的超集，也相当于预处理器,本文通过一个template项目来让你快速上手TS。
1.效果图
vue-ts-template , 欢迎star
2.技术栈
1.vue
2.vue-cli3
3.vue-router
4.vuex
5.typescript
6.iconfont
3.核心插件
| 技能点 | 对应的api |
|---|---|
| vue-class-component | 是vue官方提供的，暴露了vue和component实例 |
| vue-property-decorator | 是社区提供 深度依赖vue-class-component拓展出了很多操作符@Component @Prop @Emit @Watch @Inject 可以说是 vue class component 的一个超集，正常开发的时候 你只需要使用 vue property decorator 中提供的操作符即可 |
vue-property-decorator暴露的API
| API | 作用 |
|---|---|
| @Component | 注册组件 |
| get | 类似vue的computed |
| @Prop,@Emit | 组件传值 |
| @Watch | 监听值变化 |
| @Privde,@Inject | 对应privde和inject 高阶组件用法,作用是多级父组件传值给子 |
| @Model | 类似vue的model |
4.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)
