「極速上手TypeScript」TypeScript進階“物件”

ice_moss發表於2021-10-29

[TOC]

一、定義

在TS中，我們定義一個物件不需要‘類’也不需要‘機構體’,如果我們需要寫一個物件就可直接寫，下面我們來看看：

//物件，直接建立物件即可
//定義物件em1
const em1 = {
 name: 'join', 
 gendr: 'male',
 salary: 8000,
 bonus: undefined  //bonus暫時不給值
 performance:5.5,
}

console.log(em1)

就這樣，一個簡單的物件我們就定義好了，看看列印結果：

 "name": "join",
 "gendr": "male",
 "salary": 8000,
 "bonus": undefined,
 "performance": 5.5

下面我們再來看看裡面的一些細節：

指定型別：

在上面例子中，我們的性別不一定是male，可以是female、other、unknown ，所以可以寫成：
```
gendr: 'male' as ('male' | 'female' | 'other' | 'unknown'),
```
當我們在賦值時也就只能賦值裡面指定的型別

undefined：

我們在上面例子中：

bonus: undefined

這裡使用undefined相當於沒寫這行，此時我們不能給bonus直接賦值，這裡仍然需要這樣寫：

bonus: undefined as (number| undefined),//當然也可以寫其他型別

下面我們來看一個小例子：

const em1 = {
name: 'join',
gendr: 'male' as ('male' | 'female' | 'other' | 'unknown'),
salary: 8000,
bonus: undefined as (number| undefined),
performance:5.5,
}


console.log(`${em1.name} has a salary of ${em1.salary}`)
//判斷是否發獎金
if (!em1.bonus){   //顯然bonus沒有給值，走if分支
 em1.bonus = em1.salary * em1.performance
 console.log(em1.bonus)
}else{
 console.log('already for the bonus')
}

二、巢狀

物件可以巢狀物件，也可以巢狀，物件也可以巢狀陣列

物件巢狀物件

const em1 = {
 //物件巢狀物件
 name : {
 first:'三',
 last: '張',
 },
 gendr: 'male' as ('male' | 'female' | 'other' | 'unknown'),
 salary: 8000,
 bonus: undefined as (number| undefined),
 performance:5.5,
}

console.log(em1)  //列印

列印結果：

{
 "name": {
 "first": "三",
 "last": "張"
 },
 "gendr": "male",
 "salary": 8000,
 "bonus": 44000,
 "performance": 5.5,
}

物件巢狀陣列

const em1 = {
 //結構體套結構體
 name : {
 first:'三',
 last: '張',
 },
 gendr: 'male' as ('male' | 'female' | 'other' | 'unknown'),
 salary: 8000,
 bonus: undefined as (number| undefined),
 performance:5.5,
 badges: ['優先員工','遲到王'],   //string[……]
}

三、JSON(stringify/parse)的應用

我們可以使用json將物件轉換為json格式(是一種網路傳輸字元格式），也可以將字串轉換為物件

將物件轉換為字串

const em1 = {
 //結構體套結構體
 name : {
 first:'三',
 last: '張',
 },
 gendr: 'male' as ('male' | 'female' | 'other' | 'unknown'),
 salary: 8000,
 bonus: undefined as (number| undefined),
 performance:5.5,
 badges: ['優先教師','遲到王'],   //string[……]
}


console.log('將物件轉為字串')
const s: string = JSON.stringify(em2)   //JSON.stringify()  物件轉為字串
console.log(s)

看看列印結果：

"{"name":{"first":"三","last":"張"},"gendr":"male","salary":8000,"bonus":44000,"performance":5.5,"badges":["優先教師","遲到王"]}"

將字串轉換為物件

（連線上段程式碼）

console.log('將字串轉為物件')
const em3 = JSON.parse(s)
console.log(em3)

列印結果：

{
 "name": {
 "first": "三",
 "last": "張"
 },
 "gendr": "male",
 "salary": 8000,
 "bonus": 44000,
 "performance": 5.5,
 "badges": [
 "優先教師",
 "遲到王"
 ]
}

四、函式

其實函式我們在基礎語法的時候就已經遇見了，但我們只做了簡單介紹，下面我們來具體講解一下TS的函式：

函式的定義

定義一個加法的函式

function add(a: number, b: number){
 console.log(a + b) //列印結果
}
//一個簡單的加法函式就定義好了
//呼叫：
add(100, 100) //輸出結果：200

在函式中’a’和‘b’都是形參(形式引數)，而我們在呼叫時的具體資料為實參(實際引數)

我們繼續深入，上面的函式是沒有返回值的，再來定義一個有返回值的函式：

function add(a: number, b: number):number{  //引數列表後面這需要加冒號及返回值型別
 return a + b
}
//呼叫：
const num = add(100, 100)
console.log(num)  //輸出：200

可選引數/預設引數/可變引數列表

可選引數：當我們在定義和使用函式時，有時需要多個引數，有時候引數有需要的少一些，例如：我們要一個既可以計算2個數有可以計算3個數的函式，這是候就需要可選引數，下面來定義一個有可選引數的函式：

function add(a: number, b: number, c?: number):number{ //使用’？‘表示可選引數
if(c){
 return a + b + c
} else{
 return a + b
 }
}
//呼叫：
console.log(add(100, 100, 100))  //輸出：300
console.log(add(100, 100))       //輸出：200

其實在add函式結構中還有更簡單的語法：

//method1
function add(a: number, b: number, c?: number):number{
return c ? a + b + c : a + b
}

//method2
function add(a: number, b: number, c?: number):number{
return a + b + (c||0) 
}

預設引數：我們在函式定義時就將某些引數設值

可變引數列表：

function add(a:number, 
    b: number, 
    c?:number,
    d: number=0, //預設引數
     ...e:number[]):number{ //不能直接return a + b + c   c 可能是undefined
     let sum = a + b + (c||0) + d
     for(let i = 0; i < e.length; i++){
         sum = sum + e[i]
     }
     return sum
}

使用物件型別作為引數

在定義函式的時候，如果我們需要的引數較多，例如下面：

function sendRequest(
 url: string,
 method: 'GET' | 'POST' | 'PUT',
 header: object,
 data: string,
 requireAuth:boolean,
 retry: boolean,
 retrytimeout: number,
){
return data
}

//這種函式當我們需要的引數過多時，函式在呼叫的時候就低效
sendRequest(https://test.com,
 'GET',
 {contentType:'application/json'}, 
 '{"name":"join"}', 
 ture,
 ture,
 3000)
//看吧，如果該函式在其他地方，我們就不知道這些實參究竟是什麼了，比如：’true‘，’3000‘等

下面就來看看使用物件型別作為引數：

function sendRequest(params:{   //以物件型別作為引數
     url: string,
     method: 'GET' | 'POST' | 'PUT',
     header: object,
     data: string,
     requireAuth:boolean,
     retry: boolean,
     retrytimeout?: number,
    }){
     console.log(params)
    }

//呼叫：
sendRequest({
     url: 'http:www.test.com',
     method: 'GET',
     header: {
     contentionType: 'application/json',
     },
     data: '',
     requireAuth: true, 
     retry: true,
     retrytimeout: 3000,
    })
//這樣就非常直觀明瞭

輸出結果：

{
 "url": "http:www.test.com",
 "method": "GET",
 "header": {
 "contentionType": "application/json"
 },
 "data": "",
 "requireAuth": true,
 "retry": true,
 "retrytimeout": 3000
}

五、方法

我們在’四‘中介紹了函式，下面我們就可以來介紹方法，為物件定義方法了，直接來看在TS中是如何為物件定義方法：定義方法和函式的區別是函式前面需要使用關鍵字function,方法則不需要，其他都一樣

const em1 = {
     name: 'join',
     gendr: 'male' as ('male' | 'female' | 'other' | 'unknown'),
     salary: 8000,
     bonus: undefined as (number| undefined),
     performance:5.5,

     upDataBonus(){    //em1的方法——發獎金
         if (!em1.bonus){
             em1.bonus = em1.salary * em1.performance
             console.log(em1.bonus)
         }else{
             console.log('already for the bonus')
         } 
     },

     getSalary(){   //返回工資
         return em1.salary
     }
}

//這裡需要注意：當我們列印物件em1時，我們在沒有調em1的方法時，它是沒有列印結果的
console.log(em1)

輸出結果：

{
 "name": "join",
 "gendr": "male",
 "salary": 8000,
 "bonus": undefined,
 "performance": 5.5
}

所以我們需要呼叫：

em1.upDataBonus()
console.log(em1.getSalary())
console.log(em1)

//輸出結果：
44000 
8000 
{
 "name": "join",
 "gendr": "male",
 "salary": 8000,
 "bonus": 44000,
 "performance": 5.5
}

其實這裡還有問題，我們在em1的內部定義方法為什麼這裡還是：em1.bonus,em1.salary,em1.performance

 upDataBonus(){    //em1的方法——發獎金
     if (!em1.bonus){
             em1.bonus = em1.salary * em1.performance
             console.log(em1.bonus)
     }else{
             console.log('already for the bonus')
      } 
    },

     getSalary(){   //返回工資
         return em1.salary
 }

原因是：我們的變數會去全域性找，在全域性中我們肯定找不到(沒有在全域性中定義)

如果我們改變物件的名字豈不是要修改方法裡的很多變數，更何況有點物件我們沒有命名

這裡的解決：使用this關鍵字

const em1 = {
     name: 'join',
     gendr: 'male' as ('male' | 'female' | 'other' | 'unknown'),
     salary: 8000,
     bonus: undefined as (number| undefined),
     performance:5.5,

     upDataBonus(){    //em1的方法——發獎金
         if (!this.bonus){
             this.bonus = this.salary * this.performance
             console.log(this.bonus)
         }else{
             console.log('already for the bonus')
         } 
   },

    getSalary(){
       return this.salary
    }
}

本作品採用《CC 協議》，轉載必須註明作者和本文連結

「極速上手TypeScript」TypeScript之Promise
2021-11-15
TypeScriptPromise
「極速上手TypeScript」TypeScript基礎語法
2021-10-24
TypeScript
「極速上手TypeScript」TypeScript函數語言程式設計
2021-11-10
TypeScript函數程式設計
TypeScript極速完全進階指南-2中級篇
2018-04-23
TypeScript
Typescript進階之路
2021-04-17
TypeScript
vue + typescript 進階篇
2017-11-06
VueTypeScript
Typescript 高階語法進階
2020-08-09
TypeScript
Typescript 進階與實踐（一）
2023-03-02
TypeScript
如何使用 vue + typescript 編寫頁面（typescript進階-相容篇）
2019-03-08
VueTypeScript
TypeScript與物件導向
2021-09-22
TypeScript物件
Typescript高階型別
2019-02-26
TypeScript型別
vue高階進階系列——用typescript玩轉vue和vuex
2019-04-27
VueTypeScript
Gin框架系列01：極速上手
2020-04-06
框架
聊聊TypeScript中列舉物件(Enum)
2021-10-15
TypeScript物件
極簡Typescript+Node.js 安裝教程
2018-12-25
TypeScriptNode.js
TypeScript 2.8下的終極React元件模式
2018-05-25
TypeScriptReact元件模式
vuex4 極速入門到上手
2021-11-12
Vue
TypeScript如何實現DDD的值物件？
2019-04-09
TypeScript物件
【譯】TypeScript中的React高階元件
2019-04-18
TypeScriptReact元件
typescript
2019-02-16
TypeScript
TypeScript 簡明教程：認識 TypeScript
2019-02-27
TypeScript
TypeScript 簡明教程：安裝 TypeScript
2019-03-01
TypeScript
TypeScript 中高階型別的理解？有哪些？
2021-09-13
TypeScript型別
循序漸進理解TypeScript型別模式
2019-04-26
TypeScript型別模式
從 JavaScript 到 TypeScript 5 - 路由進化
2017-10-12
JavaScriptTypeScript路由
TypeScript In ICE
2019-02-28
TypeScript
TypeScript @types
2019-03-21
TypeScript
Vue with TypeScript
2019-03-04
VueTypeScript
TypeScript declare
2019-05-01
TypeScript
Typescript basic
2019-02-16
TypeScript
Why TypeScript？
2021-09-07
TypeScript
Vuex and Typescript
2019-01-22
VueTypeScript
理解TypeScript
2018-07-31
TypeScript
TypeScript Iterators
2018-08-06
TypeScript
TypeScript 介面
2020-11-10
TypeScript
CSS in Typescript
2018-02-05
CSSTypeScript
初探 TypeScript
2018-07-03
TypeScript
TypeScript Generators
2017-08-03
TypeScript