序列文章
从项目中由浅入深的进修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)
