亥雪的雜記

今天來談談Type Script跟ES6

因為使用Angular2會使用TypeScript來開發

所以需要了解一下他的技術跟語法

---

正文開始 :

練習的環境介紹

因為chrome支援ES6語法，可以使用F12開發者模式直接在console模式登打程式

或者前往typescript官網點選playground可以輸入typescript程式碼，它可以幫你及時轉譯成javascript

網址如下 : https://www.typescriptlang.org/index.html

宣告變數方法

var :

與原本的javascript一致，需特別注意hoisting的問題

舉例 : 

(function (){
    function test() { return 2;}
    var test = function () { return 1;}
    return test();
})();

此段會回傳結果『1』，相信大家都沒有問題

那如果換成下面的Code會回傳什麼呢?

(function (){
    return test();
    function test() { return 2;}
    var test = function () { return 1;}
})();

會是undefined嗎?還是2呢?或是1呢?

因為Hoistiog的關係所有的宣告會被提到最前面

所以實際上跑的樣子如下

(function (){
    function test() { return 2;}
    var test;
    return test();
    test = function () { return 1;}
})();

相信這樣寫大家就知道答案是『2』了

let :

作用範圍為一個block scope內，且同一範圍內不可以宣告重複的變數

var 宣告過得不可以再用let宣告，let變數宣告後才能使用

舉例

(function (){
    let a = 1;
    let a = 2;
})();

執行此段程式碼會出現以下錯誤

Uncaught SyntaxError: Identifier 'a' has already been declared

如果宣告放在後面的話會怎樣呢

(function (){
    a = 1;
    let a = 2;
})();

出現以下錯誤

Uncaught ReferenceError: a is not defined(…)

所以用let宣告時，請務必把它拉到最上面，當作是C#的變數宣告即可。

const :

宣告成唯讀的變數，變數宣告後再也無法指向其他物件，同時宣告時必須立刻初始化變數

其作用範圍等同於let

(function (){
   const a = 1;
    a = 2;
})();

此段程式碼會出現下面錯誤

Uncaught TypeError: Assignment to constant variable.(…)

TypeScript 型別分類

var a : any  <=等同於使用var 宣告的變數可為任意的型別

var a : number <=等同於JavaScript的Number型別

var a : string <=等同於JavaScript的String型別

var a : boolean <=等同於JavaScript的Boolean型別

var a : void <=等同於JavaScript的undefined或null型別

enum 列舉值，用法類似C#用法

string 特別用法介紹，可以使用帶參數的方法去結合兩個字串

typescript語法

var a = 'John';
var b = `My name is ${a}. 
How are you?`;
console.log(b);

轉換成JS後變成

var a = 'John';
var b = "My name is " + a + ". \nHow are you?";
console.log(b);

輸出結果為 :

My name is John. 
How are you?

TypeScript 型別轉換

方法一 :

let a: any = 'this is a book.';
let strLength = (<string>a).length;

方法二 :

let a: any = 'this is a book.';
let strLength = (a as string).length;