[TypeScript]2.認識原始資料型別

2022-12-08

文、意如

Javascript的型別有兩種，分成原始資料型別（Primitive data types）與物件型別（Object types），

本篇將介紹原始資料型別與幾種比較常用的型別。

任務一：認識原始型別
    1-1  使用定義String字串類型
    1-2  使用定義boolean布林類型
    1-3  使用定義Number數字類型
    1-4  使用定義BigInt大整數類型
    1-5  使用undefined未定義、 null空值類型
    1-6  使用定義symbol符號值類型

任務二：認識其它常用型別
    2-1  認識any任意型別
    2-2  認識Union聯合型別
    2-3  認識陣列的型別
    2-4  認識函式Function型別

任務一：認識原始型別

所有原始型別都是不能直接更改的但可以替換。

範例1：字串不能直接更改，但可以替換

var mystr = "helloworld";
console.log(mystr); //helloworld

mystr.toUpperCase();//不能直接更改
console.log(mystr);//helloworld    

mystr = mystr.toUpperCase()//可以替換
console.log(mystr)//Hello

可以使用陣列方法改變陣列

var myarr = [];
console.log(myarr); // []
myarr.push("HelloWorld");
console.log(myarr); // ["HelloWorld"]

1-1使用定義String字串類型

var mycity: string = 'Taipei'; //設定字串
var mystr: string = `Hi! 我住在 ${mycity}.`;
// ``用來定義 ES6 中的範本字串， 可使用${ }在字串中放入變數
console.log(mystr); //Hi! 我住在 Taipei.

1-2使用定義boolean布林類型

//使用定義boolean字串類型
var myboolean: boolean = false;
console.log(myboolean); //fasle
myboolean = true;
console.log(myboolean);//true

1-3使用定義Number數字類型

Number最大且安全的整數為 (253-1) = 9,007,199,254,740,991
//使用定義Number數字類型
var binaryLiteral: number = 0b1010; // 二進位
var octalLiteral: number = 0o744;    // 八進位
var decLiteral: number = 6;    // 十進位
var hexLiteral: number = 0xf00d;    // 十六進位

1-4使用定義BigInt大整數類型

用於大於此數9,007,199,254,740,991，BigInt可以達到數百萬個位數
//使用定義BigInt數字類型
var z = BigInt(9007199254740);
console.log(z);

1-5使用undefined未定義、null空值類型

undefined用於變數為未定義的值
Null用於變數為空值
//undefined,null
var abc: string = "123";
var u: undefined;
if (abc === u) {
    console.log(true)
} else {
    console.log(false)
}

1-6使用定義symbol符號值類型

ES6引入了新的Symbol類型，可用於定義為獨一無二唯一的值。

//使用定義Symbol字符號類型
var mysybol = Symbol("ABC");
console.log(mysybol);   // Symbol(ABC)
typeof(mysybol);        // "symbol"
// 相同参数 Symbol() 返回的值不相等
var mysybol2 = Symbol("abc");
console.log(mysybol === mysybol2);  // false

任務二：認識其它常用型別

2-1認識any任意型別

允許值為任意型別。

如果是一個普通型別，在賦值過程中改變型別是不被允許的。

但如果是 any型別，則允許被賦值為任意型別。

var myinfo: any = 'data';
myinfo = 123;

2-2認識Union聯合型別

表示取值可以為多種型別中的其一種。

//unionType
var myunion: string | number;
myunion = 'myinfo';
myunion = 123;

2-3 認識陣列型別

//陣列型別
var myarr: number[] = [1, 2, 3, 4, 5];
console.log(myarr); //[ 1, 2, 3, 4, 5 ]

//設定型別如果是number，那就只能是number，不能有其他型別
var myarr2: number[] = [1, 2, "C", 4, 5];
console.log(myarr2);
//拋錯：error TS2322: Type 'string' is not assignable to type 'number'.

也可以使用陣列泛型Array<elemType> 來表示陣列
//也可以使用陣列泛型（Array Generic） Array<elemType> 來表示陣列
var myarr: Array<string> = ["A","B","C","D","E"];
console.log(myarr);

讓陣列中也允許出現任意型別，可以使用 any 型別
//陣列中使用any型別
var myinfo: any[] = ['myinfo', 123, { city: 'taipei', age: 18 }];
console.log(myinfo)

2-4認識函式Function型別

設定傳入參數的型別name為字串型別，age為number型別
function datainfo(name: string, age: number) {
    console.log(`My name is ${name},I'm ${age} years old`);
    console.log("I'm " + age + "years old");
}
datainfo('John', 18);

一個函式有輸入和輸出型別設定

//函式型別
function cul(a: number, b: number): number {
    return a + b;
}
console.log(cul(1,2)); //3
export {}; //使用 ES Module

Yiru@Studio - 關於我 - 意如

回首頁

Yiru@Studio