TypeScript學習之路一：安裝.基礎類型.變量聲明.運算符.條件語句

1：安裝TypeScript

有兩種主要的方式來獲取TypeScript工具：

• 通過npm（Node.js包管理器）
• 安裝Visual Studio的TypeScript插件

針對使用npm的用戶：

> npm install -g typescript

針對 Visual Studio用戶

 1、下載 Visual Studio Code。

 2：在左側窗口中點擊當期編輯的代碼文件，選擇 open in command prompt（在終端中打開）

 

2：TypeScript 基礎類型

類型分類：

              任意類型        聲明爲 any 的變量可以賦予任意類型的值   any

              數字類型         它可以用來表示整數和分數。   let binaryLiteral: number = 6; // 二進制

              字符串類型     let name: string = "Runoob";   一個字符系列，使用單引號（'）或雙引號（"）來表示字符串類型。反引號（`）來定義多行文本和內嵌表達式。

              布爾類型        表示邏輯值：true 和 false     let flag: boolean = true;       

              數組類型        聲明變量爲數組。

                                     // 在元素類型後面加上[]    let arr: number[] = [1, 2];

                                     // 或者使用數組泛型         let arr: Array<number> = [1, 2];

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

                                  let x: [string, number];

                                   x = ['Runoob', 1]; // 運行正常

                                   x = [1, 'Runoob']; // 報錯 

                                   console.log(x[0]); // 輸出 Runoob

              枚舉              枚舉類型用於定義數值集合。

                  enum Color {Red, Green, Blue};

                  let c: Color = Color.Blue;

                  console.log(c);    // 輸出 2

              null                表示對象值缺失。

              undefined     用於初始化變量爲一個未定義的值

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

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

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

 Null 和 Undefined
null

在 JavaScript 中 null 表示 "什麼都沒有"。

null是一個只有一個值的特殊類型。表示一個空對象引用。

用 typeof 檢測 null 返回是 object。
undefined

在 JavaScript 中, undefined 是一個沒有設置值的變量。

typeof 一個沒有值的變量會返回 undefined。

Null 和 Undefined 是其他任何類型（包括 void）的子類型，可以賦值給其它類型，如數字類型，此時，賦值後的類型會變成 null 或 undefined。而在TypeScript中啓用嚴格的空校驗（--strictNullChecks）特性，就可以使得null 和 undefined 只能被賦值給 void 或本身對應的類型，示例代碼如下：

// 啓用 --strictNullChecks
let x: number;
x = 1; // 運行正確
x = undefined;    // 運行錯誤
x = null;    // 運行錯誤

上面的例子中變量 x 只能是數字類型。如果一個類型可能出現 null 或 undefined， 可以用 | 來支持多種類型，示例代碼如下：

// 啓用 --strictNullChecks
let x: number | null | undefined;
x = 1; // 運行正確
x = undefined;    // 運行正確
x = null;    // 運行正確

 never 類型

never 是其它類型（包括 null 和 undefined）的子類型，代表從不會出現的值。這意味着聲明爲 never 類型的變量只能被 never 類型所賦值，在函數中它通常表現爲拋出異常或無法執行到終止點（例如無限循環），示例代碼如下：

let x: never;
let y: number;

// 運行錯誤，數字類型不能轉爲 never 類型
x = 123;

// 運行正確，never 類型可以賦值給 never類型
x = (()=>{ throw new Error('exception')})();

// 運行正確，never 類型可以賦值給 數字類型
y = (()=>{ throw new Error('exception')})();

// 返回值爲 never 的函數可以是拋出異常的情況
function error(message: string): never {
    throw new Error(message);
}

// 返回值爲 never 的函數可以是無法被執行到的終止點的情況
function loop(): never {
    while (true) {}
}

 3：TypeScript 變量聲明

    

var uname = "Runoob";
var score1 = 50;
var score2 = 42.50;
var sum = score1 + score2;
console.log("名字: " + uname);
console.log("第一個科目成績: " + score1);
console.log("第二個科目成績: " + score2);
console.log("總成績: " + sum);


名字: Runoob
第一個科目成績: 50
第二個科目成績: 42.5
總成績: 92.5

變量作用域

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

程序中變量的可用性由變量作用域決定。

TypeScript 有以下幾種作用域：

• 全局作用域 − 全局變量定義在程序結構的外部，它可以在你代碼的任何位置使用。

• 類作用域 − 這個變量也可以稱爲 字段。類變量聲明在一個類裏頭，但在類的方法外面。 該變量可以通過類的對象來訪問。類變量也可以是靜態的，靜態的變量可以通過類名直接訪問。

• 局部作用域 − 局部變量，局部變量只能在聲明它的一個代碼塊

   

var global_num = 12; // 全局變量
var Numbers = /** @class */ (function () {
    function Numbers() {
        this.num_val = 13; // 類變量
    }
    Numbers.prototype.storeNum = function () {
        var local_num = 14; // 局部變量
    };
    Numbers.sval = 10; // 靜態變量
    return Numbers;
}());
console.log("全局變量爲: " + global_num);
console.log(Numbers.sval); // 靜態變量
var obj = new Numbers();
console.log("類變量: " + obj.num_val);


全局變量爲: 12
10
類變量: 13

 

4:TypeScript 運算符

算術運算符

var num1:number = 10
var num2:number = 2
var res:number = 0
   
res = num1 + num2
console.log("加:        "+res);

res = num1 - num2;
console.log("減: "+res)

res = num1*num2
console.log("乘:    "+res)

res = num1/num2
console.log("除:   "+res)
   
res = num1%num2
console.log("餘數:   "+res)

num1++
console.log("num1 自增運算: "+num1)

num2--
console.log("num2 自減運算: "+num2)

加:        12
減: 8
乘:    20
除:   5
餘數:   0
num1 自增運算: 11
num2 自減運算: 1

關係運算符
 
var num1:number = 5;
var num2:number = 9;
 
console.log("num1 的值爲: "+num1); 
console.log("num2 的值爲:"+num2);
 
var res = num1>num2 
console.log("num1 大於n num2: "+res)
 
res = num1<num2 
console.log("num1 小於 num2: "+res)  
 
res = num1>=num2 
console.log("num1 大於或等於  num2: "+res)
 
res = num1<=num2
console.log("num1 小於或等於 num2: "+res)  
 
res = num1==num2 
console.log("num1 等於 num2: "+res)  
 
res = num1!=num2  
console.log("num1 不等於 num2: "+res)


num1 的值爲: 5
num2 的值爲:9
num1 大於n num2: false
num1 小於 num2: true
num1 大於或等於  num2: false
num1 小於或等於 num2: true
num1 等於 num2: false
num1 不等於 num2: true

 

邏輯運算符

var avg:number = 20; 
var percentage:number = 90; 
 
console.log("avg 值爲: "+avg+" ,percentage 值爲: "+percentage);
    
var res:boolean = ((avg>50)&&(percentage>80)); 
console.log("(avg>50)&&(percentage>80): ",res);
 
var res:boolean = ((avg>50)||(percentage>80)); 
console.log("(avg>50)||(percentage>80): ",res);
 
var res:boolean=!((avg>50)&&(percentage>80)); 
console.log("!((avg>50)&&(percentage>80)): ",res);


avg 值爲: 20 ,percentage 值爲: 90
(avg>50)&&(percentage>80):  false
(avg>50)||(percentage>80):  true
!((avg>50)&&(percentage>80)):  true

 

位運算符

var a:number = 2;   // 二進制 10 
var b:number = 3;   // 二進制 11
    
var result; 
        
result = (a & b);     
console.log("(a & b) => ",result)
            
result = (a | b);          
console.log("(a | b) => ",result)  
        
result = (a ^ b);  
console.log("(a ^ b) => ",result);
    
result = (~b); 
console.log("(~b) => ",result);
 
result = (a << b); 
console.log("(a << b) => ",result); 
 
result = (a >> b); 
console.log("(a >> b) => ",result);
 
result = (a >>> 1); 
console.log("(a >>> 1) => ",result);


(a & b) =>  2
(a | b) =>  3
(a ^ b) =>  1
(~b) =>  -4
(a << b) =>  16
(a >> b) =>  0
(a >>> 1) =>  1

 

賦值運算符


var a: number = 12 
var b:number = 10  
 
a = b 
console.log("a = b: "+a)
 
a += b
console.log("a+=b: "+a)
 
a -= b 
console.log("a-=b: "+a)
 
a *= b 
console.log("a*=b: "+a)
 
a /= b 
console.log("a/=b: "+a)    
 
a %= b 
console.log("a%=b: "+a)


a = b: 10
a+=b: 20
a-=b: 10
a*=b: 100
a/=b: 10
a%=b: 0

 

三元運算符 (?)


var num:number = -2 
var result = num > 0 ? "大於 0" : "小於 0，或等於 0" 
console.log(result)


小於 0，或等於 0

類型運算符

var num = 12 
console.log(typeof num);   //輸出結果: number


其他運算符

var x:number = 4 
var y = -x; 
console.log("x 值爲: ",x);   // 輸出結果 4 
console.log("y 值爲: ",y);   // 輸出結果 -4


x 值爲:  4
y 值爲:  -4


字符串運算符: 連接運算符 (+)

var msg:string = "RUNOOB"+".COM" 
console.log(msg)


RUNOOB.COM

TypeScript 條件語句

   

• if 語句 - 只有當指定條件爲 true 時，使用該語句來執行代碼
• if...else 語句 - 當條件爲 true 時執行代碼，當條件爲 false 時執行其他代碼
• if...else if....else 語句- 使用該語句來選擇多個代碼塊之一來執行
• switch 語句 - 使用該語句來選擇多個代碼塊之一來執行

 

                 if

var  num:number = 5
if (num > 0) { 
   console.log("數字是正數") 



數字是正數



                if-else


var num:number = 12; 
if (num % 2==0) { 
    console.log("偶數"); 
} else {
    console.log("奇數"); 
}

偶數、



                 if...else if....else 語句

var num:number = 2 
if(num > 0) { 
    console.log(num+" 是正數") 
} else if(num < 0) { 
    console.log(num+" 是負數") 
} else { 
    console.log(num+" 不是正數也不是負數") 
}

2 是正數



                switch…case 



var grade:string = "A"; 
switch(grade) { 
    case "A": { 
        console.log("優"); 
        break; 
    } 
    case "B": { 
        console.log("良"); 
        break; 
    } 
    case "C": {
        console.log("及格"); 
        break;    
    } 
    case "D": { 
        console.log("不及格"); 
        break; 
    }  
    default: { 
        console.log("非法輸入"); 
        break;              
    } 
}

優