TypeScript由淺入深學習

01.Typescript介紹、安裝及開發工具

1、Typescript介紹

1. Typescript是由微軟開發的一款開源的編程語言。
2. typeScript是javascript的超級，遵循最新的ES六、ES5規範。Typescript擴展了javascript的語法。
3. Typescript更像後端Java、C#這樣的面嚮對象語言可讓js開發大型企業項目。
4. 谷歌在大力支持Typescript的推廣，谷歌的angular2.x就是基於Typescript語法。
5. 最新的Vue、React也能夠集成TypeScript.

2、Typescript安裝 編譯

npm install -g typescript
tsc helloworld.ts

3、Typescript 開發工具 Vscode自動編譯 .ts文件

1. 建立 tsconfig.json 文件 (tsc --init命令來生成配置文件)
2. 修改 tsconfig.json 文件中的 outDir 路徑



3. 點擊終端 運行任務 點擊tsc:監視-tsconfig.json 而後就能夠自動生產代碼了。



4、Typescript 開發工具 HBuilder 自動編譯.ts文件

1. 在最上方菜單欄，點擊工具-插件安裝；
2. 點擊下方瀏覽Eclipse插件市場，搜索typescript插件進行安裝
3. 安裝完成後重啓編譯器，點擊菜單欄工具-選項 選擇編譯ts文件
4. 在你的項目上右鍵點擊-配置-Enable TypeScript Builder , 以後你再保存.ts文件時會自動再當前目錄編譯出對應的.js文件







在Compile all TypeScript files on build 進行勾選，而後肯定；

02.Typescript 數據類型

typescript中爲了使編寫的代碼更規範，更有利於維護，增長了類型校驗，在typescript中主要給咱們提供瞭如下數據類型:

• 布爾類型（boolean）
• 數字類型（number）
• 字符串類型(string)
• 數組類型（array）
• 元組類型（tuple）
• 枚舉類型（enum）
• 任意類型（any）
• null 和 undefined
• void類型
• never類型

如下列舉說明：

1、布爾類型（boolean）



2、數字類型（number



3、字符串類型(string)



4、數組類型（array）



5、元組類型（tuple）



6、枚舉類型（enum）

隨着計算機的不斷普及，程序不只只用於數值計算，還更普遍地用於處理非數值的數據。 例如：性別、月份、星期幾、顏色、單位名、學歷、職業等，都不是數值數據。 在其它程序設計語言中，通常用一個數值來表明某一狀態，這種處理方法不直觀，易讀性差。 若是能在程序中用天然語言中有相應含義的單詞來表明某一狀態，則程序就很容易閱讀和理解。 也就是說，事先考慮到某一變量可能取的值，儘可能用天然語言中含義清楚的單詞來表示它的每個值， 這種方法稱爲枚舉方法，用這種方法定義的類型稱枚舉類型。

enum 枚舉名{
            標識符[=整型常數],
            標識符[=整型常數],
            ...
            標識符[=整型常數],
        } ;
複製代碼





7、任意類型（any）

8、null 和 undefined

9、void類型

typescript中的void表示沒有任何類型，通常用於定義方法的時候方法沒有返回值。

10、never類型

是其餘類型 （包括 null 和 undefined）的子類型，表明從不會出現的值。這意味着聲明never的變量只能被never類型所賦值。

03 Typescript中的函數

• 函數的定義
• 可選參數
• 默認參數
• 剩餘參數
• 函數重載
• 箭頭函數 es6
例子以下：

1、函數的定義



2、可選參數

先看下兩種函數的傳參方式：



沒有返回值的方法：



es5裏面方法的實參和形參能夠不同，可是ts中必須同樣，若是不同就須要配置可選參數：



注意：可選參數必須配置到最後面的參數!

3、默認參數



4、剩餘參數



三點運算符，接受新傳過來的值：



5、函數重載

java中方法的重載：重載指的是兩個或者兩個以上的同名函數，但他們的參數不同，這時會出現函數重載的狀況 typescript中的重載：經過爲同一個函數提供多個函數類型定義來試下多種功能的目的。





6、箭頭函數 es6

this 指向的問題 箭頭函數裏裏面的this指向上下文



04 Typescript中的類

1、普及一下ES5中的類：

1. 最簡單的類



2. 構造函數和原型鏈裏面增長方法
//構造函數增長方法：



//原型鏈裏面增長方法：(原型鏈上的函數會被多個函數共享，構造函數不會)



3. 靜態方法：



4. Es5裏面的繼承（對象冒充實現繼承）



5. Es5裏面的繼承（原型鏈實現繼承）



6. 原型鏈繼承的 問題？？