Day08:【TypeScript 学起来】物件型别 Object Types : object

https://bit.ly/2XuVqBJ (这篇必看，不分享对不起自己)

//原来南无观世音菩萨可以这麽用 真的笑鼠我 今天来介绍object～

上一篇纪录了原始资料型别（Primitive Types），这一篇要来探险物件型别（Object types）咯～ 会介绍到的型别包括：object(物件) 、 arrays(阵列) 、function(函式)。

一般 JSON 物件格式

像一般在 javascript 宣告物件应用在 TypeScript :

let person = {
    name: "iris",
    age: 18
};

在 TypeScript 中会按照物件本身自动推论出资料型别(Type Inference)。

来修改看看物件会出现什麽状况：

person.name = "aka 废废前端" //ok 型别相同
person = {
    name: "aa",  //ok 覆写的物件格式必须完全相同
    age: 20
}

person.name = false; // error: Type 'boolean' is not assignable to type 'string'.
person.job = "在家躺" //error: Property 'job' does not exist on type
person = {
    name: "bb"   //error: Property 'age' is missing in type 
}
person = {
    gender : "male", //error: Type '{ gender: string; job: string; }' is not assignable to type '{ name: string; age: number; }'
    job : "在家躺"
}

delete person.name; //可执行删除属性

//tsconfig 开启严谨模式 会报错提醒
delete person.name;//error: The operand of a 'delete' operator must be optional.

结论：

• ✅ 覆写的值需与属性对应的型别相同
• ✅ 对物件整体覆写，其覆写的物件格式必须完全相同
• ❌ 不能随意新增原先不存在该物件的属性
• ❌ 不能覆写整个物件时的格式错误（少一个 key / 新增 key / key所对应的值型别错误）
• ❓ 但如果 delete 属性 TS 不会警告 ，还能够进行删除，不小心删掉就GG (没开严谨模式的时候)
• ❌ 补充：tsconfig 开启严谨模式时，删除属性时 compiler 会报错提醒。

object 型别注记

除了 TypeScript 会自动推论物件型别外，我们也可以自己去定义物件变数：

let person2: object = {
    name: "iris",
    age: 18
};

他跟一般 JSON 物件格式有什麽差别呢？

person2.name = "aka 废废前端" //error: Property 'name' does not exist on type 'object'.
person2 = {
    name: "aa",  //ok 
    age: 20
}
person2.name = false; // error: Property 'name' does not exist on type 'object'.
person2.job = "在家躺" //error: Property 'job' does not exist on type 'object'.
person2 = {
    name: "bb"   //ok
}
person2 = {
    gender : "male", //ok
    job : "在家躺",
}
delete person2.name; //error: Property 'name' does not exist on type 'object'.

惊不惊喜，意不意外～我也没想到，居然连值型别相同都不能覆写。所以在定义object时只定义了 person2 为空object {} , 却没有细节属性可以用 QQ

结论：

• ❌ 无法单独对该物件属性做覆写，即使相同型别的值也无法
• ❌ 无法单独新增属性
• ❌ 无法删除属性
• ✅ 可以完全覆写整个物件（新增/减少属性，即使型别完全不同都可以）

手动定义物件属性型别

虽然 TS 已经帮我们自动推论出型别，但也可以手动定义型别。感觉使用方法1，一般 JSON 物件格式，更方便快速吧，符合废废前端的特质 XD

let person3 : {name: string, age: number} = {
    name: "iris", 
    age: 18
}

在function中定义物件参数型别

在function中定义参数型别，person4: { name: string, age: number } ，官网说也可使用分号去分隔参数如：person4: { name: string; age: number }。

const getUserInfo = (person4: { name: string, age: number }) =>{
    console.log(` Hello, my name is ${person4.name}. I'm ${person4.age} years old.`);
}

getUserInfo({ name: "iris", age: 18 });

可选属性 （Optional Properties）

我们可以去指定部分或全部属性为可选属性，方法是在属性名称後面加上一个?。如下面例子，age 改为可选属性，可输入或不输入。

const getUserInfo2 = (person5: { name: string, age?: number }) =>{
    console.log(` Hello, my name is ${person5.name}. I'm ${person5.age} years old.`);
}

getUserInfo2({ name: "iris"}); //Hello, my name is iris. I'm undefined years old.

以上例子没带age参数虽然没报错，但函式内有用到age时他会回传 undefined， 这样也不是我们要的，我们在去针对undefined做判断即可。

const getUserInfo2 = (person5: { name: string, age?: number }) =>{
    if(person5.age !== undefined){
        console.log(`Hello, my name is ${person5.name}. I'm ${person5.age} years old.`);
    }else{
        console.log(`Hello, my name is ${person5.name}.`);
    }
}

getUserInfo2({ name: "iris"}); //Hello, my name is iris.
getUserInfo2({ name: "iris", age: 18 }); //Hello, my name is iris. I'm 18 years old.

呜呜 终於写完 object 了，原本预计本篇是要写 object，array 及 function ， 但小编我已累，而且读起来会太长，就下篇再写 array 及 function了。耶！来去休息一下～

参考资料

https://ithelp.ithome.com.tw/articles/10214840#h5o-8
https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#object-types