序列文章
從項目中由淺入深的學習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 中提供的操作符即可 |
| @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)