1，TypeScript是由微軟開發的，不過新出的Angular2框架就是谷歌公司由TypeScript語言編寫的，所以現在TypeScript是有微軟和谷歌一起支持的；

2，TypeScript在javascript基礎上擴充，任何javascript程序都可以不加修改的拿到typescript環境下運行；

3，ES是客戶端腳本語言的規范，ES5和 ES6是這個規范的不同版本，javascript和typescript是客戶端腳本語言，javascript實現了ES5規范，typescript實現了ES6規范；ES5的語法即代表javascript的語法，ES6即代表typescript的語法；

3，TypeScript的優勢：

1）支持ES6的規范（指出了未來客戶端腳本語言的發展方向）；

2）強大的IDE支持（體現在三個特性上）：

　　1）類型檢查；

　　2）語法提示；

　　3）重構；體現在修改一個變量，其他引用此變量的代碼會自動修改；

3）是Angular2的開發語言，可以更好的理解Angular2;

4，搭建TypeScript環境：

就是搭建compiler(編譯器): 作用是將TypeScript編譯成javascript語言；

為什么用compiler？ 因為ES6規范是2015年發布的的，到2016年，一些主流瀏覽器還未完全支持ES6，所以需要轉換成javascript才能在瀏覽器中跑；

1）使用在線compiler：

百度搜索Typescript，到官網上找到學習樂園，點進去即看到在線compiler界面；

或者是 ?http://www.typescriptlang.org/play/index.html ?

2）本地compiler：（需要先下載node.js）

實際開放中，多數利用本地compiler，使用npm（node package manager ?包管理器）下載compiler到本地；所以要想使用本地compiler就先下載nodejs到本地，自然就有npm了，可以使用npm -version 檢測npm的版本；

在命令行里使用npm install -g typescript ?下載typescript，得到tsc 即compiler；

5，TypeScript字符串新特性：

1）多行字符串：

傳統的javascript中，若是將字符串換行表示，需要在中間利用加號來銜接，可讀性不好；所以typescript引入了多行字符串的概念；

利用雙撇號來聲明字符串就不會出現換行的問題了，雙撇號就是數字鍵盤1做左邊的符號；被翻譯成javascript的時候，就會自動加上換行符 \；

2）字符串模板：在多行字符串里通過表達式來聲明變量或插入方法；表達式的格式就是 ${ 表達式名稱 }?

在編譯器中編譯后得到的javascript代碼會很清晰明了；

例：在compiler中寫入如下代碼，注意雙撇號的使用：

?

?注意 ${} 這種寫法必須用在撇號的內部才會被解析，若是在雙引號內部，只會被原樣顯示為字符串的形式；

例：使用；撇號來聲明常用的標簽：

3)第三個特性就是自動拆分字符串：

使用字符串模板去調用一個方法的時候，字符串模板里的表達式的值會自動賦給被調用方法中的參數。

整個模板會被切成一個數組放到被調用的方法的第一個參數里，使用的兩個表達式的最終評估處理的值放到被調用方法的后兩個參數中；

注意：調用方法的時候，傳統的是 ''方法名()'' ?,但此處不用小括號，直接寫 ?方法名`hello ${myname}, i'm${getAge}`

例：

?

?

5，參數新特性：

1）第一個參數新特性：在參數名稱后面使用冒號來指定參數類型；

5種基本類型：string，any，number，boolean，自定義類型（class和接口聲明），方法的返回值類型：void，此時的方法不需要返回值，

方法的參數類型的聲明也是如此，調用方法時注意參數類型是否匹配；

變量類型的聲明：

var myname : string = "LEE";

這樣如果在后面給myname賦值時，如果類型不匹配，就會報錯，這就是傳說中的TypeScript的類型檢查；

但是這種報錯只會在typescript的編輯器里出現，javascript不會報錯；

typescript還有一個機制---類型推斷機制（當第一次為變量聲明值后（即使未聲明類型），會自動推斷該變量的類型，以后如果再給該變量賦值，不是同種類型的話會報錯）

例：

var ali="hhhhh";

ali=13; ?//此時會報錯

如果想讓一個變量既可以聲明為字符串，又可以聲明為數字甚至其他類型，則可以將其聲明為any類型；

var ?ali： any ="hhhhh"; //聲明為any后，就可以再將其聲明為其他類型的如數字了；

除了以上的5類型之外，typescript還有通過class和接口自定義的類型；

例：

class Person{

　　name :string;

　　age : number;

}

var zhangsan：Person =new Person(); //此時 可以 聲明一個Person類型的變量zhangsan

再輸入zhangsan 時 ，就會有語法提示，zhangsan.name , zhangsan.age 有助于提高效率；

接口定義的類型，見TypeScript 學習之面向對象新特性 文章；

2）第二個參數新特性：

在參數聲明后面用等號來指定參數的默認值；這個就是普通的var a : string = "hhhh"; //此處的等號用來指定默認值，后面的即為默認值；

另一個就是給方法的變量指定默認值；注意，指定默認值的參數要聲明在最后面；

正常的聲明一個帶參數的方法后，調用該方法時傳入參數的個數必須和方法聲明時的參數個數相同，否則會報錯，此時如果將其中某個參數指定默認值，則調用時參數的個數和原方法參數個數不同，也不會報錯；

例：

?

將第三個參數 指定了默認值18，在調用方法時，不傳第三個參數，也不會報錯了：

?

但是要注意：指定默認值的參數一定要聲明在最后面；

?否則，如果第一個參數指定了默認值，但是調用方法傳參的時候，只傳了兩個參數，那是傳了前兩個參數，最后的參數沒穿，會報錯的；

6，函數新特性：

為函數定義類型時，先給參數加類型，然后再給函數本身加類型；typescript能根據返回語句自動推斷返回值類型，因此通常忽略它；

匿名函數類型：使用箭頭，在函數和返回值類型之前使用=>，

完整的函數類型包括參數類型和函數類型：只要參數類型匹配，就是有效的函數，不用在乎參數名是否正確；

function add( num1:number , num2:number ) :number{

　　return num1+num2;

}?

1）第一個新特性是Rest and Spread 操作符：用來聲明任意數量的方法參數：通過使用三個點 ( . . . );

?

?

Rest and Spread 還可以反過來用；如下

?如上所見，在typescript（有些版本暫不支持），但是javascript中仍然能運行，運行后的結果就是：

?

方法一中沒有傳第三個參數，所以是未定義，方法二中將前三個參數傳遞了，因為方法定義中只有三個形參；

2）函數的第二個新特性：generator函數，控制函數的執行過程，手工暫停和恢復代碼執行；

generator函數就是在function的后面加上星號，function* ?, 并且與yield關鍵字，next（）方法結合使用；并且在調用該方法時，需要將該方法聲明為一個變量再調用；

執行過程：每調用一次next（）方法，就執行到yield關鍵字處停止，再次調用next（）方法時，再從yield關鍵字處開始繼續執行，直到下一個yield關鍵字為止；yield關鍵字相當于打斷點

這個特性有的版本的typescript不支持，所以去搜索babel這是個編輯器(也是兩側顯示代碼的)，使用它來寫下:

?3）函數的第三個新特性：destructuring析構表達式：通過表達式 將對象或數組拆分成任意數量的變量；

一：使用表達式將對象進行拆分：使用大括號聲明析構表達式

正常的ES5規范也就是javascript語法中，聲明變量需要如下圖中7，8,9行聲明，但是ES6規范也就是typescript中使用析構表達式則只需要第11行一行代碼即可表示；對應右邊的第10行，分別將各變量解析出來了；

?注意1）如果想要在打印時，將變量以別名的形式打出來：在使用表達式的時候使用冒號即可添加本地變量的別名：如下圖中第11行代碼所示；

?

?注意2）：如何取一個嵌套的屬性；就是在析構表達式里再嵌套析構表達式；

例：如果price對象下有兩個嵌套的屬性price1和price2 ，注意逗號分隔，則可以使用冒號和嵌套析構表達式 來獲得 嵌套屬性中的某個單獨的屬性；

意思就是通過price2變量獲得千套屬性中price2屬性；

?

?注意3）：假如還存在一些其他沒有使用析構表達式的屬性，但并不影響析構表達式的使用；

?二：使用表達式將數組進行拆分：使用方括號對析構表達式聲明；只想輸出部分值的時候使用

1）

?

上圖中打印出來的num1和num2分別是1和3；

var [ ?, ?,num1,nm2 ] = arr ; ?//這樣打印出來的是3和4；?

var [num1,num2, ? , ? ] = arr ; //這樣打印出來的是1和2；

var [num1 , ? , ? , ? ] =arr ; //這樣打印出來的是1 ；

2）數組中的析構表達式和Rest and Spread 操作符（用來聲明任意數量的方法參數）結合使用；

運行結果為：

說明Rest and Spread 操作符此處將剩余的兩個元素放到了others數組里面了，

?3）將析構表達式作為方法的參數使用：

執行結果是和上例中相同的，也是將后兩個參數放到了others數組里面；

7，變量聲明時，使用let 和 var 的區別：

let：使用let 聲明一個變量時，使用的是詞法作用域或塊作用域；不同于使用var聲明的變量那樣可以在包含它們的函數外訪問；塊作用域變量在包含它們的塊或for循環之外是不能訪問的；并且不能在聲明之前被讀寫（typescript會提示）；

8，屏蔽：在一個嵌套的作用域里引入一個新名字的行為稱為屏蔽；

?

function sumMatrix(matrix: number[][]) { let sum = 0; for (let i = 0; i < matrix.length; i++) { var currentRow = matrix[i]; //如果沒有這句屏蔽，則會報錯，因為兩個嵌套的for循環里的i重復了 for (let i = 0; i < currentRow.length; i++) { sum += currentRow[i]; } } return sum; }

?9，基本類型：布爾類型，數字類型，字符串類型，枚舉類型，自定義類型，any類型，空值（undefined ，null）；

布爾類型：就是true或false；

數字類型：typescript里的所有數字都是浮點數，就是number類型，除了支持十進制和十六進制（0x開頭），還支持二進制和八進制（0o或者是0）；

字符串類型：以雙引號或單引號括起；

枚舉類型enum：枚舉類型的便利就是可以通過枚舉值找到名字；

enum Color{Green , Yellow ,Black};

let c：Color = Color.Green;

默認情況從0開始賦值，但也可以手動給某個元素或全部元素的編號賦值；

enum Color {Red=1 , Yellow, Black}; ?//手動給某個元素編號，現在就從編號1開始賦值了

let c: Color = Color.Green;

enum Color {Red = 1, Yellow = 2, Black = 3}

let c: Color = Color.Green; ? //手動給全部元素編號；

例：通過枚舉值找到名字：

enum Color {Red = 1, Yellow ,Black};

let colorName:string =Color[2];

alert(colorName);

10，數組：定義有兩種方式：

let list :number[] = [1,2,3,4];

let list : Array<number> = [1,2,3,4];

11，元組Tuple：

元組允許表示一個已知元素數量和類型的數組，各元素的類型不必相同。

let x : [ string , number];

x = ['hello' ,100 ] ; ?//而不能是x = [100,'hello']?

?console.log( x[0].substr（1）); ?//是正確的；

console.log( x[1].substr（1）); ? ? //是錯誤的，number類型沒有子串

12，類型斷言：好比其他語言里的類型轉換，但不進行特殊的數據檢查可解構；

類型斷言有兩種方式：其一是尖括號語法；

let someValue : any = "this is a string";

let strLength : number = (<string>someValue).length;

其二是as語法：

let someValue : any = "this is a string";

let strLength :number = (someValue as string).length;

13，當在類里使用this的時候，說明使用this引用的就是類成員；

轉載于:https://www.cnblogs.com/RitaLee/p/6171142.html

總結

以上是生活随笔為你收集整理的TypeScript 学习一 参数，函数，析构表达式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。