從項目中由淺入深的學習typescript (3)

序列文章

從項目中由淺入深的學習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)