TypeScript(3) 變數

前言

呈TypeScript(2) 資料型態提到string、number、boolean基本資料類型，本節我們開始講如何宣告這些變數和這些資料型態有什麼限制與用法．

---

聯集型別(Union Types)

當定義的變數資料型態可能會有多個資料型態，我們可以使用聯集類型語法（“｜”），將不同資料類型做聯集分配．聯集型別的好處是讓我們更靈活使用資料型態指派．

語法：

//可以定義不同資料型態，使用“｜”區分就可以
let myVar : string|number ;  

範例

let myVar : string|number ; 

myVar="Hello";     //編譯成功
myVar=1234;       //編譯成功
myVar=true;  // 'boolean' only refers to a type, but is being used as a value here.

//多個資料類型作聯集
let myMessage: string|number|boolean;
myMessage="Hello";
myMessage=1234;
myMessage=true;

var、let、 const##

(1) var
表示預先不知道初始值使用，預設會給undefined，

語法：

var myVar ;  

範例：

var value ;  // undefined
var data = 100; // 有明確定義初始值

範例：

function xy()
{
    var dataX = 10; // 在xy()裡面為全域變數10  

    if(true)
    {
        var dataY = 20;  

        console.log(dataX);  
        console.log(dataY); 
    }

    console.log(dataX); 
    console.log(dataY);  
}


結果：
10
20
10
20


hoisting問題：
當我一開始不用var宣吿變數時，在JavaScript執行時會將var data這行自動往上移動宣告．

範例：

function fun()
{
    dataX = 10;
    console.log(dataX);  //10
    var  dataX;
}
fun();

function fun()
{
    var  dataX;     // 移動到頂端宣告
    dataX = 10;
    console.log(dataX);  //10

}
fun();

(2) let
let會比var在scope更嚴謹的限制，let宣告的變數只會在{}內有效，這樣的好處是不容易變數使用上出現問題且也必須宣告才可以使用該變數，沒有Hosting問題．

語法：

var myVar ;  

function xy()
{
    let dataX = 10; // 在xy()裡面為全域變數10  

    if(true)
    {
        let dataY = 20;  

        console.log(dataX);  
        console.log(dataY); 
    }

    console.log(dataX); 
    console.log(dataY);  
}


結果：
10
20
10
undefined


(3) const
當宣告const在定義時必須有值且只能指派一次
語法：

const PI ;  

範例：

const PI = "3.1415"
PI="1234"     //error

Template Strings

字串的特殊用法，可以將字串內容定義變數，分別帶入

範例：

let firstName :string ="Joe" ;
let lastName :string ="Lin" ;
let  message: string = `My name is ${firstName} ${lastName}`;

console.log(message);   


結果：
My name is Joe Lin


參考

1. unctions-rest-optional-default-params
2. https://oomusou.io/typescript/function/