typescript學習筆記（一）__typescript

一.認識typescript typescript是由微軟開發的一套程式設計語言，將其稱作是javascript的超集，看過一些ts代碼的人可能很明顯的能意識到它與js的區別，比如ts添加了靜態類型檢查，interface介面類型定義和物件導向的一些特性，先看個demo吧。 當然提前需要配置運行環境

npm install -g typescript

通過npm全域安裝 建立一個檔案尾碼為ts的檔案

//demo.tsfunction howOld(year: number) {    return "I am " + year;}let peopleYear: number = 23;console.log(howOld(peopleYear));//I am 23

輸入命令

tsc demo.ts

可以發現在當前檔案的同級目錄下產生了一個名為demo.js的檔案，開啟檔案看看

function howOld(year) {    return "I am " + year;}var peopleYear = 23;console.log(howOld(peopleYear));

這段代碼我們就很熟悉了，其實最終編譯完成後我們引用的也是尾碼為js的檔案，而不是ts檔案。那麼對於ts和js有什麼優缺點呢。對於ts來說它使用靜態類型檢測或者是通過interface設定類型介面，能協助我們避免了一些由於類型不明確而造成的錯誤，尤其是在開發較大項目時，開發人員多的同時，對於資料類型造成的錯誤數量也會大大增加。但是效能上並沒有相對js提升太多，而大家更依賴js往往是因為它的靈活性。 二.資料類型 對於typescript來說保留了javascript中我們所能用到的基礎資料型別 (Elementary Data Type)，同樣是將javascript和typescript進行比較。 Boolean

//typescript寫法let data: boolean = true;//javascript寫法let data = true;

Number typescript同javascript一樣所有的數字都是浮點數，同樣支援二進位，八進位，十進位及十六進位。

//typescript寫法let data1: number = 0b1010; let data2: number = 0o12;    let data3: number = 10;    let data4: number = 0xa;    //javascript寫法var data1 = 10;var data2 = 10;var data3 = 10;var data4 = 0xa;

String javascript規定字串用” “或者’ ‘引入，當然typescript也保留了這一點，在這基礎上ts也支援使用（`）引入文字。

//typescript寫法let str1: string = 'typescript';let str2: string = `Hello ${ str1 }.`;//javascript寫法var str1 = 'typescript';var str2 = "Hello " + str1 + ".";

數組

//typescript寫法let arr1: number[] = [1,2,3];let arr2: Array<number> = [1,2,3];//javascript寫法var arr1 = [1, 2, 3];var arr2 = [1, 2, 3];

其中<>中寫的是數組元素的類型。 元組 元群組類型用來表示已知元素數量和類型的數組，元素的資料及類型需要一一對應，否則會報錯。

//typescript寫法 let data: [string,number]; data = ['lilu',23]; //javascript寫法 var data; data = ['lilu', 23];

枚舉

//typescript寫法enum Color {Red, Green, Blue}let c: Color = Color.Green;//javascript寫法var Color;(function (Color) {    Color[Color["Red"] = 0] = "Red";    Color[Color["Green"] = 1] = "Green";    Color[Color["Blue"] = 2] = "Blue";})(Color || (Color = {}));var c = Color.Green;

枚舉的預設開始序號是0，當然也可以手動賦值。 任意類型 any，當不清楚變數的類型時使用

//typescript寫法let data: any = 1;data = 'haha';data = true;//javascript寫法var data = 1;data = 'haha';data = true;

any使變數類型變得靈活起來，就和js中的變數聲明一樣，因為any在編譯的過程中繞過了類型檢查。當然ts也允許當不確定數組元素類型的時候這樣用：

//typescript寫法let arr: any[] = [1,true,'haha'];//javascript寫法var arr = [1, true, 'haha'];

空類型 void，表示空類型，一般用來作為函數的傳回型別，比如：

//typescript寫法function sayHello(name: string):void{    console.log(`hello!${ name }`);}sayHello('lilu');//javascript寫法function sayHello(name) {    console.log("hello!" + name);}sayHello('lilu');

當然也可以用void來給變數賦值，但是變數必須是null或者undefined。

//typescript寫法let data: void = null;data = undefined;//javascript寫法var data = null;data = undefined;

never never表示永遠不存在值的變數。

//typescript寫法let a: never;let b: string;let c: never;a = 'hello';b = a;a = c;

說明never類型可以賦值給任意類型的變數，但是never類型的變數只能被never類型賦值。 以上是一些基礎資料型別 (Elementary Data Type)的文法說明，但是在開發中我們往往遇到的資料類型是嵌套的，比如這樣：

let data = [    {        name: 'Tom',        age: 10    },{        name: 'Mike',        age: 15    }];

在這種情況下如果只用基本類型是不夠的，所以需要引用interface來處理。 介面 先建立一個對象的資料類型

interface obj{    name: string,    age: number}

接著建立一個數群組類型。

interface Obj{    name: string,    age: number}let arr: Array<Obj> = [    {        name: 'Tom',        age: 10    },    {        name: 'Mike',        age: 15    }];

當然介面類型也允許繼承，比如我在後續工作中需要添加一些資料類型，如下：

interface Obj1{    name: string,    age: number}interface Obj2 extends Obj1{    hobby: string}let arr: Array<Obj2> = [    {        name: 'Tom',        age: 10,        hobby: 'reading'    },    {        name: 'Mike',        age: 15,        hobby: 'coding'    }]