typescript學習記錄筆記

typescript

僅個人學習記錄使用

安裝

# 安裝
npm install -g typescript
# 版本查看
tsc -v

編譯

tsc test.ts

基礎語法

TypeScript面向對象編程實例

class Site { 
   name():void { 
      console.log("Runoob") 
   } 
} 
var obj = new Site(); 
obj.name();

編譯後生成的JavaScript代碼：

var Site = /** @class */ (function () {
    function Site() {
    }
    Site.prototype.name = function () {
        console.log("Runoob");
    };
    return Site;
}());
var obj = new Site();
obj.name();

TypeScript基礎類型

// 【任意類型 any】；string boolean number 聲明類似
let a:any = 1

// 【數組】 在元素類型後加上[] 或者 使用數組泛型
let arr:number[] = [1, 2, 3]
let arr:Array<number> = [1, 2, 3]

// 【元組】元組類型用來表示已知元素和類型的數組，各元素的類型不必相同對應位置的類型需要相同
let x:[string, number]
x = ['Runoob', 1]; // 正確
x = [1, 'Runoob']; // 報錯
console.log(x[0]); // 輸出 Runoob

// 【枚舉 enum】 枚舉類型用於定義數值集合
enum Color {Red, Green, Blue};
let c: Color = Color.Blue;
console.log(c); // 輸出 2

// 【返回值類型 void】void用於標識方法返回值的類型，標識該方法沒有返回值
function hello():void {
    alert("Hello!");
}

// 【null】 表示對象值缺失
// 【undefined】 用於初始化變量爲一個未定義的值
// 【never】 never 是其它類型（包括 null 和 undefined）的子類型，代表從不會出現的值。

變量聲明

變量是一種使用方便的佔位符，用於引用計算機內存地址。

TypeScript變量的命名規則：

變量名稱可以包含數組和字母
除了下劃線_和美元$符合外，不能包含其它特殊字符，包括空格
變量名不能以數組開頭。

// 可以使用var聲明變量
var [變量名]: [類型] = 值;
var uname:string = 'Runoob';

// 沒有初始值，會設置爲undefined
var [變量名]: [類型];

// 沒有設置類型，該變量可以是任意類型
var [變量名] = 值

變量作用域

變量作用域指定了變量定義的位置。

作用域：

全局作用域—全局變量定義在程序結構的外部，它可以在你代碼的任何位置使用。
類作用域—這個變量也可以稱爲字段。類變量聲明在一個類裏頭，但在類的方法外面。改變量可以通過類的對象來訪問。類變量也可以是靜態的，靜態的變量可以通過類名直接訪問。
局部作用域—局部變量只能在聲明它的一個代碼塊（如：方法）中使用。

var global_num = 12   // 全局變量
class Numbers {
  num_val = 13; // 實例變量
  static sval = 10;  // 靜態變量

  storeNum ():void {
    var local_num = 14; // 局部變量
    console.log("局部變量："+ local_num);
  }
}

console.log("全局變量："+ global_num);
console.log("靜態變量："+ Numbers.sval);
var obj = new Numbers();
console.log("實例變量："+ obj.num_val);
obj.storeNum();

編譯爲JavaScript代碼：

var global_num = 12; // 全局變量
var Numbers = /** @class */ (function () {
    function Numbers() {
        this.num_val = 13; // 實例變量
    }
    Numbers.prototype.storeNum = function () {
        var local_num = 14; // 局部變量
        console.log("局部變量：" + local_num);
    };
    Numbers.sval = 10; // 靜態變量
    return Numbers;
}());
console.log("全局變量：" + global_num);
console.log("靜態變量：" + Numbers.sval);
var obj = new Numbers();
console.log("實例變量：" + obj.num_val);
obj.storeNum();
/* 打印結果
全局變量：12
靜態變量：10
實例變量：13
局部變量：14
*/

運算符

循環

for…in

var j;
var n = "a b c";
for (j in n) {
    console.log(n[j]);
}

for…of

for…of 語句創建一個循環來迭代可迭代的對象。在 ES6 中引入的 for…of 循環，以替代 for…in 和 forEach() ，並支持新的迭代協議。for…of 允許你遍歷 Arrays（數組）, Strings（字符串）, Maps（映射）, Sets（集合）等可迭代的數據結構等。

let someArray = [1, "string", false];
 
for (let entry of someArray) {
    console.log(entry); // 1, "string", false
}

forEach

let list = [4, 5, 6];
list.forEach((val, idx, array) => {
    // val: 當前值
    // idx：當前index
    // array: Array
});

every

let list = [4, 5, 6];
list.every((val, idx, array) => {
    // val: 當前值
    // idx：當前index
    // array: Array
    return true; // Continues
    // Return false will quit the iteration
});

some

while 循環

while(condition)
{
   statement(s);
}

do…while 循環

do
{
   statement(s);
}while( condition );

break語句

當break語句出現在一個循環內時，且循環會立即終止，且程序流將繼續執行緊接着循環的下一條語句。
它可用於終止switch 語句中的一個case。
如果您使用的是嵌套循環（即一個循環內嵌套另一個循環），break 語句會停止執行最內層的循環，然後開始執行該塊之後的下一行代碼。

continue 語句

continue會跳過當前循環中的代碼，強迫開始下一次循環
對於for循環，continue語句執行後自增語句仍會執行；
對於while和do…while循環，continue語句重新執行條件判斷語句

無限循環

無限循環就是一直在運行不會停止的循環。for和while循環都可以創建無限循環。

for(;;){
    // 語句
}
while(true) {
    // 語句
}

函數

Lambda函數

Lambda函數也稱爲箭頭函數

var foo = (x:number)=>10 + x 
console.log(foo(100))      //輸出結果爲 110

函數重載

重載時方法名相同，而參數不同，返回類型可以相同也可以不同。
每個重載的方法（或者構造函數）都必須有一個獨一無二的參數類型列表

參數類型不同：

function disp(string):void; 
function disp(number):void;

參數數量不同：

function disp(n1:number):void; 
function disp(x:number,y:number):void;

參數類型順序不同：

function disp(n1:number,s1:string):void; 
function disp(s:string,n:number):void;

Number

prototype實例

function employee(id:number, name:string) {
    this.id = id
    this.name = name
}
var emp = new employee(123, "admin")
employee.prototype.email = "[email protected]"

console.log("員工號:" + emp.id)
console.log("員工姓名:" + emp.name)
console.log("員工郵箱:" + emp.email)

Number對象方法

toEcponential() 把對象的值轉換爲指數計數法。
toFixed() 把數字轉換爲字符串，並對小數點指定位數。
toLocaleString() 把數字轉換爲字符串，使用本地數字格式順序。
toPrecision() 把數字格式化爲指定的長度。
toString() 把數字轉換爲字符串，使用指定的基數。數字的基數是2~36之間的整數。若省略該參數，則使用基數10。
valueOf() 返回一個Number對象的原始數字值。

String 字符串

var txt = new String("string")
// 或
var txt = "string"

// length 返回字符串的長度
console.log(txt.length)

charAt() 返回在指定位置的字符
charCodeAt() 返回在指定的位置的字符的Unicode編碼
concat() 連接兩個或者更多字符串，並返回新的字符串
indexOf() 返回某個指定的字符串值在字符串中首次出現的位置
lastIndexOf() 從後向前搜索字符串，並從起始位置(0)開始計算返回字符串最後出現的位置。

var str1 = "1234567890987654321"
str1.lastIndexOf('1') // 18

localeCompare() 用本地特定的順序來比較兩個字符串（可實現按拼音排序）

match() 查找找到一個或多個正則表達式的匹配

var str = "The rain in SPAIN stays mainly in the plain"
var n = str.match(/ain/g)	// ain,ain,ain

replace() 替換與正則表達式匹配的子串

var re = /(\w+)\s(\w+)/;
var str = "zara ali";
var newstr = str.replace(re, "$2, $1");
console.log(newstr); // ali, zara

search() 檢索與正則表達式相匹配的值
slice() 提取字符串的片段，並在新的字符串中返回被提取的部分
split() 從起始索引號提取字符串中指定數目的字符
substring() 提取字符串中兩個指定的索引號之間的字符
toLocaleLowerCase() 根據主機的語言環境把字符串轉換爲小寫，只有幾種語言（如土耳其語）具有地方特有的大小寫映射。
toLocaleUpperCase() 據主機的語言環境把字符串轉換爲大寫，只有幾種語言（如土耳其語）具有地方特有的大小寫映射。
toLowerCase() 把字符串轉換爲小寫。
toUpperCase() 把字符串轉換爲大寫。
toString() 返回字符串
valueOf() 返回指定字符串對象的原始值

Array 數組

數組解構

var arr:number[] = [12, 13]
var [x, y] = arr // 將數組的兩個元素復賦值給變量 x 和 y

// 編譯後的js代碼
var arr = [12, 13]
var x = arr[0], y = arr[1]

數組迭代

var j:any;
var nums:number[] = [1001, 1002, 1003, 1004]
for(j in nums) {
    console.log(nums[j])
}

多維數組

var arr_name:datatype[][]=[ [val1,val2,val3],[v1,v2,v3] ]

元祖

數組中元素的數據類型都一般是相同的（any[]類型的數組可以不同），如果存儲的元素數據類型不同，則需要使用元祖。

元祖中允許存儲不同類型的元素，元祖可以作爲參數傳遞給函數。

var mytuple = [10,"Runoob"]; // 創建元組
console.log(mytuple[0]) 
console.log(mytuple[1])

元祖運算

push() 向元祖中添加元素，添加在最後面
pop() 從元祖中移除元素（最後一個），並返回刪除的元素

解構元祖

var a = [10, "runoob"]
var [b, c] = a
console.log(b)
console.log(c)

聯合類型

聯合類型（UnionTypes）可以通過管道（|）將變量設置多種類型，隨時可以根據設置的類型來賦值。

注意：只能賦值指定的類型，如果賦值其他類型就會報錯

var val:string|number
val = 12
console.log("數字爲：" + val)
val = "Runoob"
console.log("字符串爲：" + val)

接口

接口是一系列抽象方法的聲明，是一些方法特徵的集合，這些方法都應該是抽象的，需要有具體的類去實現，然後第三方就可以通過這組抽象方法調用，讓具體的類執行具體的方法。

interface interface_name {}

實例：

定義一個接口IPerson，定義一個變量customer，它的類型是IPerson。

interface IPerson {
    firstName:string,
    lastName:string,
    sayHi: ()=>string
}

var custom:IPerson = {
    firstName: "Tom",
    lastName: "Hanks",
    sayHi: ()=> {return "Hi there"}
}
console.log("Customer 對象 ") 
console.log(customer.firstName) 
console.log(customer.lastName) 
console.log(customer.sayHi())  
 
var employee:IPerson = { 
    firstName:"Jim",
    lastName:"Blakes", 
    sayHi: ():string =>{return "Hello!!!"} 
} 
console.log("Employee  對象 ") 
console.log(employee.firstName) 
console.log(employee.lastName)

接口繼承

接口繼承就是說接口可以通過其他接口來擴展自己。

Typescript允許接口繼承多個接口。

繼承使用關鍵字 extends

// 單接口繼承語法格式
Child_interface_name extends super_interface_name

// 多接口繼承語法格式
Child_interface_name extends super_interface1_name, super_interface2_name,…,super_interfaceN_name

類

Typescript是面向對象的JavaScript。

class class_name {
    // 類作用域
}

定義類的關鍵字爲class，後面緊跟類名，類可以包含以下幾個模塊：

字段 - 字段是類裏面聲明的變量。字段表示對象的有關數據
構造函數 - 類實例化時調用，可以爲類的對象分配內存。
方法 - 方法爲對象要執行的操作

創建類的數據成員

class Car {
   // 字段
    engine:string;
    
   // 構造函數
   constructor(engine:string){
       this.engine = engine
   }
   
   // 方法
   disp():void {
       console.log("發動機爲： " + this.engine)
   }
}

編譯後JavaScript代碼爲：

var Car = /** @class */ (function () {
    // 構造函數
    function Car(engine) {
        this.engine = engine
    }
    // 方法
    Car.prototype.disp = function () {
        console.log("發動機爲：" + this.engine)
    }
}())

創建實例化對象，語法格式如下：

// 類實例化時會調用構造函數
var object_name = new class_name([arguments])
// 訪問屬性
object_name.field_name
// 訪問方法
object_name.function_name()

完整實例：

class Car { 
   // 字段
   engine:string; 
   
   // 構造函數
   constructor(engine:string) { 
      this.engine = engine 
   }  
   
   // 方法
   disp():void { 
      console.log("函數中顯示發動機型號  :   "+this.engine) 
   } 
} 
 
// 創建一個對象
var obj = new Car("XXSY1")
 
// 訪問字段
console.log("讀取發動機型號 :  "+obj.engine)  
 
// 訪問方法
obj.disp()

類的繼承

在創建類的時候繼承一個已存在的類，這個已存在的類稱爲父類，繼承它的類稱爲子類；
類繼承使用關鍵字 extends,子類處除了不能繼承父類的私有成員（方法和屬性）和構造函數，其它的都可以繼承。
Typescript一次只能繼承一個類，不支持繼承多個類，但Typescript支持多重繼承（A繼承B，B繼承C）
```
class child_class_name extends parent_class_name
```