[TypeScript]3.認識物件型別

2022-12-13

文、意如

TypeScript系列：

1.TypeScript初探篇

2.認識原始資料型別

[本篇]3.認識物件型別

4.TypeScript物件導向-類別(Class)的使用方式

5.TypeScript物件導向-介面(Interface)的使用方式

JavaScript的型別有兩種，分成原始資料型別（Primitive data types）與物件型別（Object types），
原始資料型別介紹請參閱上一篇，本篇即將介紹物件型別與其它常見的型別。

任務一：認識物件型別（Object types）
  1-1：認識物件
  1-2：修改物件型別中的值
  1-3：物件可當參數傳遞
任務二：認識鴨子類型（Duck Typing）
任務三：其它常見的資料類型
  3-1：認識Map
  3-2：認識Set
  3-3：認識Tuple元組

任務一：認識物件型別（Object types）

1-1：認識物件

物件是由鍵（key）與值（value）組成。值可以是字串、數值、函數、陣列、物件等。

var myobject = {
    key1: "mydata", // 字串
    key2: 123,  //整數
    key3: function() {// 函數
        console.log("ABC");
        return "BCD"
    },
    key4:["arr1", "arr2"] //陣列
}
//物件
console.log(myobject)
/*{
  key1: 'mydata',
  key2: 123,
  key3: [Function: key3],
  key4: [ 'arr1', 'arr2' ]
} */

//物件中的值
console.log(myobject.key1) //mydata
//物件中的函數
console.log(myobject.key3())//ABC BCD//

1-2：修改物件型別中的值

注意修改的資料值要與物件中的型別一樣

//物件
var myinfo = {
    city: "台北",
    memberid: 123,
    mydata: function () { }
};
//修改物件值
myinfo.city = "高雄"; //資料要與物件中的型別一致
myinfo.memberid = 999;
//修改屬性值
myinfo.mydata = function () {
    console.log("Hello:" + myinfo.city); //hello 高雄
    console.log("Memeber:"+myinfo.memberid);//Member:999
};
//呼叫物件中的函數
myinfo.mydata();

1-3：物件可當參數傳遞

物件也可以當作一個參數傳遞給函數Function

var fruit = {
    fruit1: "Apple",
    fruit2: "Kiwi",
};
var buy = function (obj: { fruit1: string, fruit2: string }) {
    console.log("水果1 : " + obj.fruit1);//水果1 :Apple
    console.log("水果2 : " + obj.fruit2);//水果2 :Kiwi
}
buy(fruit);

任務二：認識鴨子類型（DuckTyping）

鴨子類型是動態類型的一種，也是多態（polymorphism）的一種。

//鴨子類型DcukTyping
interface ISize {
    width: number
    height: number
}
//(代入參數型別):return型別
function addPoints(box1: ISize, box2: ISize): ISize {
    var w = box1.width + box2.width
    var h = box1.height + box2.height
    return { width: w, height: h }
}
//呼叫型別並把參數代入
var newPoint = addPoints(
    { width: 10, height: 35 },
    { width: 25, height: 41 }
)
console.log(newPoint); //{ width: 35, height: 76 }
export { }; //使用 ES Module

任務三：其它常見的資料類型

3-1：認識Map

Map是ES6中新引入的一種新的類型，使用鍵（Key）值（Value）儲存資料

任何值都可以作為鍵（Key）或一個值（Value）。

使用 Map類型時需要使用new 來建立Map資料

//MAP 類型
var myMap = new Map([
    ["key1", "value1"],
    ["key2", "value2"]
]);

console.log(myMap);//Map(2) { 'key1' => 'value1', 'key2' => 'value2' }

因Map 是 ES6 中新引入的一種新的類型，編譯時需要使用es6來編譯

指令：tsc - -target es6 t4.ts

執行：node t4.js

//Map常用函數及屬性
var mycitymapping = new Map();
//設定 Map鍵(key)值(value)
mycitymapping.set("台北", 1);
mycitymapping.set("新竹", 2);
mycitymapping.set("高雄", 3);
console.log(mycitymapping);//Map(3) { '台北' => 1, '新竹' => 2, '高雄' => 3 }
//抓取對應的value
console.log(mycitymapping.get("高雄"));// 3
//判斷是否有該鍵(key)
console.log(mycitymapping.has("新竹"));// true
console.log(mycitymapping.has("宜蘭"));// false
//Map大小
console.log(mycitymapping.size);// 3
//删除高雄
console.log(mycitymapping.delete("高雄"));// true
console.log(mycitymapping);//Map(2) { '台北' => 1, '新竹' => 2}
//移除 Map
mycitymapping.clear();
console.log(mycitymapping);//{}

3-2：認識Set

Set 陣列值是唯一不重複

//set
var mySet  = new Set ( [ 1 , 2 , 2 , 4 , 4 ] ) ;
console.log(mySet);//Set(3) { 1, 2, 4 }

3-3：認識Tuple元組

陣列中資料通常來說類型是一樣的，如果需要存取的類型不同，就需要使用Tuple元組，也可以做為參數傳給函數。

//元組資料可以儲存不同類型
var mytuple = ["John",32];
console.log(mytuple)//[ 'John', 32 ]
console.log(mytuple[0])//John
console.log(mytuple[1])//32
console.log("長度："+mytuple.length)//2
mytuple.push("ABC")//新增一個元素
console.log(mytuple)//[ 'John', 32, 'ABC' ]
console.log(mytuple.pop()+" 刪除了")//刪除最後元素
console.log(mytuple)//[ 'John', 32 ]
mytuple[0] = "Mary"//更新元素
console.log(mytuple)//[ 'Mary', 32 ]

Yiru@Studio - 關於我 - 意如

TypeScript

回首頁

Yiru@Studio