TypeScript 基礎

1.什麼是 TypeScript：

（1）TypeScript 是一種由微軟開發的開源的編程語言，它是 JavaScript 的一個超集，拓展了 JavaScript 的語法；

（2）現有的 JavaScript 代碼可與 typescript 一起工作無需任何修改；

（3）typescript 可處理已有的 JavaScript 代碼，並只對其中的 typescript 代碼進行編譯；

（4）typescript 通過類型註解提供編譯時的靜態類型檢查；

（5）typescript 是語法糖，瀏覽器不認識，只能編譯成 js；

2.TypeScript 的安裝使用；

（1）使用 npm 下載 typescript；

npm install typescript -g               //建議安裝在全局

（2）在自己的項目文件夾中創建一個 .ts 的文件；

（3）通過命令將這個 ts 文件編譯爲 js 文件，會出現一個同名的 js 文件；

tsc "文件名"                 //將ts文件轉爲js文件

（4）寫自己的 html 文件，將編譯好的 js 導入；

3.Typescript 的基本數據類型：

（1）布爾類型（Boolean）：

var flag : Boolean;                        //布爾類型
console.log(flag = true);                  //true

4.類型批註：

（1）typescript 通過類型批註提供靜態類型以在編譯時啓動類型檢查；

（2）基本類型的批註是：number，bool，string；

（3）弱或動態類型的結構是 any 類型；

function area(uname : string,width : number,height : number){             //類型批註
    var num = width * height;
    return 'my name is ' + uname  + ';' + 'my age is ' + num
}

document.body.innerHTML = area('jack',11,2)               //輸出my name is jack;my age is 22
 //如果有類型不匹配的參數，在編譯成js時就會報錯

4.接口（interface）：

（1）接口可以作爲類型批註；

（2）接口中的屬性加上問號，輸出但沒有賦予值時，最後得到 undefined；如果不加，不輸出或者沒有賦予值時，就會報錯；

interface Shape{
    name : string,
    width : number,
    height : number,
    color? : string,             //加上問號以後，可以不用輸出，也可以不用賦值（輸出但沒有賦值會得到undefined）
}

function fun(shape : Shape){
    var num = shape.width * shape.height;
    return 'I am ' + shape.name  + ';' + 'my age is ' + num + ';' + 'color is ' + shape.color;          //輸出
}

console.log( fun( {name : 'jack',width : 11,height : 2} ) )            //沒有給color賦值
//輸出 I am jack;my age is 22;color is undefined

5.箭頭函數表達式：

（1）相當於 js 中的函數，它的好處就是可以自動將函數中的 this 附加到上下文中；

（2）實例比較：

//原生 js
var exam = {
    name : 'jack',
    pop : function(){
        console.log('你好' + this.name)                  //輸出this.name爲'jack'

        setTimeout(function(){
            console.log('三秒鐘會出現:' + this.name)          //輸出this.name爲一個空值
        },3000)
    }
}
exam.pop();

將原生 js 中的 function 換成箭頭函數；

//typescript 中箭頭函數
var exam = {
    name : 'jack',
    pop : function(){
        console.log('你好' + this.name)                  //輸出this.name爲'jack'

        setTimeout(() => {                             //注意是更換這個function
            console.log('三秒鐘會出現:' + this.name)          //輸出this.name爲'jack'
        },3000)
    }
}
exam.pop();

6.類（class）：

（1）typescript 支持 ES6 中的類 class 對象；

（2）class 類中，有個構造器（coustructor），構造器中參數的作用域是局部作用域；