ts---基礎語法及使用

ts的使用：

第一步：安裝

npm config set registry https://registry.npmmirror.com

npm install -g typescript

安裝成功後，可以檢查是否安裝成功：

tsc -v

一、變數的型別

1、任意型別 any 宣告為 any 的變數可以賦予任意型別的值。

2、數字型別 number 雙精度 64 位浮點值。它可以用來表示整數和分數。

3、字串型別 string 一個字元系列，使用單引號（'）或雙引號（"）來表示字串型別。反引號（`）來定義多行文字和內嵌表示式。

4、布林型別 boolean 表示邏輯值：true 和 false。

5、陣列型別 無 宣告變數為陣列。

// 在元素型別後面加上[]
let arr: number[] = [1, 2];
// 或者使用陣列泛型
let arr: Array<number> = [1, 2];

6、元組 元組型別用來表示已知元素數量和型別的陣列，各元素的型別不必相同，對應位置的型別需要相同。

let x: [string, number];
x = ['Runoob', 1];    // 執行正常
x = [1, 'Runoob'];    // 報錯
console.log(x[0]);    // 輸出 Runoob

7、列舉 enum 列舉型別用於定義數值集合。

enum Color {Red, Green, Blue};
let c: Color = Color.Blue;
console.log(c);    // 輸出 2

8、void void 用於標識方法返回值的型別，表示該方法沒有返回值。

function hello(): void {
    alert("Hello Runoob");
}

9、null null 表示物件值缺失。

10、undefined undefined 用於初始化變數為一個未定義的值。

11、never never never 是其它型別（包括 null 和 undefined）的子型別，代表從不會出現的值。

二、類

類在ts裡面，可以使用 class 來定義

var global_num = 12          // 全域性變數
class Numbers { 
   num_val = 13;             // 例項變數
   static sval = 10;         // 靜態變數
   
   storeNum():void { 
      var local_num = 14;    // 區域性變數
   } 
} 
console.log("全域性變數為: "+global_num)  
console.log(Numbers.sval)   // 靜態變數
var obj = new Numbers(); 
console.log("例項變數: "+obj.num_val)

三、迴圈

1、常見的for迴圈

var num:number = 5; 
var i:number; 
var factorial = 1;  
for(i = num;i>=1;i--) {
   factorial *= i;
}
console.log(factorial)

還有 for in 迴圈

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

2、新增的 for of

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

3、forEach 迴圈

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

4、every 迴圈

因為 forEach 在 iteration 中是無法返回的，所以可以使用 every 和 some 來取代 forEach。

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

5、some 迴圈

6、while 迴圈

var num:number = 5; 
var factorial:number = 1;  
while(num >=1) { 
    factorial = factorial * num; 
    num--; 
} 
console.log("5 的階乘為："+factorial);

7、do while 迴圈

var n:number = 10;
do { 
    console.log(n); 
    n--; 
} while(n>=0);

四、函式

1、普通函式

// 函式定義
function greet():string { // 返回一個字串
    return "Hello World" 
} 

2、帶引數的函式

function add(x: number, y: number): number {
    return x + y;
}
console.log(add(1,2))

可選引數：

function buildName(firstName: string, lastName?: string) {
    if (lastName)
        return firstName + " " + lastName;
    else
        return firstName;
} 
let result1 = buildName("Bob");  // 正確
let result2 = buildName("Bob", "Adams", "Sr.");  // 錯誤，引數太多了
let result3 = buildName("Bob", "Adams");  // 正確

預設引數：

function calculate_discount(price:number,rate:number = 0.50) { 
    var discount = price * rate; 
    console.log("計算結果: ",discount); 
} 
calculate_discount(1000) 
calculate_discount(1000,0.30)

剩餘引數：

function buildName(firstName: string, ...restOfName: string[]) {
    return firstName + " " + restOfName.join(" ");
}
  
let employeeName = buildName("Joseph", "Samuel", "Lucas", "MacKinzie");

3、遞迴函式

在函式內呼叫函式

function factorial(number) {
    if (number <= 0) {         // 停止執行
        return 1; 
    } else {     
        return (number * factorial(number - 1));     // 呼叫自身
    } 
}; 
console.log(factorial(6));      // 輸出 720

4、箭頭函式

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

五、Number

var num = new Number(value);

1、toExponential() 把物件的值轉換為指數計數法。

//toExponential() 
var num1 = 1225.30 
var val = num1.toExponential(); 
console.log(val) // 輸出： 1.2253e+3

2、toFixed() 把數字轉換為字串，並對小數點指定位數。

var num3 = 177.234 
console.log("num3.toFixed() 為 "+num3.toFixed())    // 輸出：177
console.log("num3.toFixed(2) 為 "+num3.toFixed(2))  // 輸出：177.23
console.log("num3.toFixed(6) 為 "+num3.toFixed(6))  // 輸出：177.234000

3、toLocaleString() 把數字轉換為字串，使用本地數字格式順序。

var num = new Number(177.1234); 
console.log( num.toLocaleString());  // 輸出：177.1234

4、toPrecision() 把數字格式化為指定的長度。

var num = new Number(7.123456); 
console.log(num.toPrecision());  // 輸出：7.123456 
console.log(num.toPrecision(1)); // 輸出：7
console.log(num.toPrecision(2)); // 輸出：7.1

5、toString() 把數字轉換為字串，使用指定的基數。數字的基數是 2 ~ 36 之間的整數。若省略該引數，則使用基數 10。

var num = new Number(10); 
console.log(num.toString());  // 輸出10進位制：10
console.log(num.toString(2)); // 輸出2進位制：1010
console.log(num.toString(8)); // 輸出8進位制：12

6、valueOf() 返回一個 Number 物件的原始數字值。

var num = new Number(10); 
console.log(num.valueOf()); // 輸出：10

六、String

var txt = new String("string");
或者更簡單方式：
var txt = "string";

1、charAt() 返回在指定位置的字元。
2、charCodeAt() 返回在指定的位置的字元的 Unicode 編碼。
3、concat() 連線兩個或更多字串，並返回新的字串。
4、indexOf() 返回某個指定的字串值在字串中首次出現的位置。
5、lastIndexOf() 從後向前搜尋字串，並從起始位置（0）開始計算返回字串最後出現的位置。、
6、match() 查詢找到一個或多個正規表示式的匹配。
7、replace() 替換與正規表示式匹配的子串
8、search() 檢索與正規表示式相匹配的值
9、slice() 提取字串的片斷，並在新的字串中返回被提取的部分。
10、split() 把字串分割為子字串陣列。
11、substr() 從起始索引號提取字串中指定數目的字元。
12、substring() 提取字串中兩個指定的索引號之間的字元。
13、toLocaleLowerCase() 根據主機的語言環境把字串轉換為小寫
14、toLocaleUpperCase() 據主機的語言環境把字串轉換為大寫
15、toString() 返回字串。
16、valueOf() 返回指定字串物件的原始值。

七、Array

var sites:string[];
var numlist:number[] = [2,4,6,8]
var arr_names:number[] = new Array(4)  

1、concat() 連線兩個或更多的陣列，並返回結果。

var alpha = ["a", "b", "c"]; 
var numeric = [1, 2, 3];
var alphaNumeric = alpha.concat(numeric); 
console.log("alphaNumeric : " + alphaNumeric );    // a,b,c,1,2,3   

2、every() 檢測數值元素的每個元素是否都符合條件。

function isBigEnough(element, index, array) { 
        return (element >= 10); 
}         
var passed = [12, 5, 8, 130, 44].every(isBigEnough); 
console.log("Test Value : " + passed ); // false

3、filter() 檢測數值元素，並返回符合條件所有元素的陣列。

function isBigEnough(element, index, array) { 
   return (element >= 10); 
}           
var passed = [12, 5, 8, 130, 44].filter(isBigEnough); 
console.log("Test Value : " + passed ); // 12,130,44

4、forEach() 陣列每個元素都執行一次回撥函式。

5、indexOf() 搜尋陣列中的元素，並返回它所在的位置。如果搜尋不到，返回值 -1，代表沒有此項。
6、join() 把陣列的所有元素放入一個字串。
7、lastIndexOf() 返回一個指定的字串值最後出現的位置，在一個字串中的指定位置從後向前搜尋。
8、map() 透過指定函式處理陣列的每個元素，並返回處理後的陣列。
9、pop() 刪除陣列的最後一個元素並返回刪除的元素。
10、push() 向陣列的末尾新增一個或更多元素，並返回新的長度。
11、reduce() 將陣列元素計算為一個值（從左到右）。
12、reduceRight() 將陣列元素計算為一個值（從右到左）。
13、reverse() 反轉陣列的元素順序。
14、shift() 刪除並返回陣列的第一個元素。
15、slice() 選取陣列的的一部分，並返回一個新陣列。
16、some() 檢測陣列元素中是否有元素符合指定條件。
17、sort() 對陣列的元素進行排序。
18、splice() 從陣列中新增或刪除元素。
19、toString() 把陣列轉換為字串，並返回結果。
20、unshift() 向陣列的開頭新增一個或更多元素，並返回新的長度。

八、Map

Map 物件儲存鍵值對，並且能夠記住鍵的原始插入順序。任何值(物件或者原始值) 都可以作為一個鍵或一個值。

let myMap = new Map([
  ["key1", "value1"],
  ["key2", "value2"]
]); 

1、map.clear() – 移除 Map 物件的所有鍵/值對 。
2、map.set() – 設定鍵值對，返回該 Map 物件。
3、map.get() – 返回鍵對應的值，如果不存在，則返回 undefined。
4、map.has() – 返回一個布林值，用於判斷 Map 中是否包含鍵對應的值。
5、map.delete() – 刪除 Map 中的元素，刪除成功返回 true，失敗返回 false。
6、map.size – 返回 Map 物件鍵/值對的數量。

九、元組

儲存不同型別的元素，就需要用到元組。

let tuple: [型別1, 型別2, 型別3, ...];

例項：

let mytuple: [number, string];
mytuple = [42,"Runoob"];

例項：

let mytuple: [number, string, boolean] = [42, "Runoob", true];
 
// 訪問元組中的元素
let num = mytuple[0]; // 訪問第一個元素，值為 42，型別為 number
let str = mytuple[1]; // 訪問第二個元素，值為 "Runoob"，型別為 string
let bool = mytuple[2]; // 訪問第三個元素，值為 true，型別為 boolean
 
console.log(num);  // 輸出: 42
console.log(str);  // 輸出: Runoob
console.log(bool); // 輸出: true

十、聯合型別

聯合型別（Union Types）可以透過管道(|)將變數設定多種型別，賦值時可以根據設定的型別來賦值。

Type1|Type2|Type3 

例項：

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

傳參例項：

function disp(name:string|string[]) { 
        if(typeof name == "string") { 
                console.log(name) 
        } else { 
                var i; 
                for(i = 0;i<name.length;i++) { 
                console.log(name[i])
                } 
        } 
} 
disp("Runoob") 
console.log("輸出陣列....") 
disp(["Runoob","Google","Taobao","Facebook"])

聯合陣列：

var arr:number[]|string[]; 
var i:number; 
arr = [1,2,4] 
console.log("**數字陣列**")   
for(i = 0;i<arr.length;i++) { 
   console.log(arr[i]) 
}   
arr = ["Runoob","Google","Taobao"] 
console.log("**字串陣列**")  
for(i = 0;i<arr.length;i++) { 
   console.log(arr[i]) 
}

以上就是 ts 的基礎使用！

打完收工！