TypeScript為對象動態(tài)添加屬性代碼示例

更新時間：2023年07月11日 09:30:51 作者：明明明h

這篇文章主要給大家介紹了關于TypeScript為對象動態(tài)添加屬性的相關資料,在TypeScript 中,我們經(jīng)常需要在運行時動態(tài)添加屬性到對象上,需要的朋友可以參考下

1.定義

TypeScript 對象是包含一組鍵值對的實例。值可以是標量、函數(shù)、數(shù)組、對象等，如下實例：

var object_name = { 
    key1: "value1", // 標量
    key2: "value",  
    key3: function() {
        // 函數(shù)
    }, 
    key4:["content1", "content2"] //集合
}

//訪問對象
object_name.key1	// value1
object_name.key4	// ["content1", "content2"]

2.TypeScript 類型模板

var sites = {
    site1: "",
    site2: 0,
    sayHello: function () { } // 類型模板
};

sites.site1 = "site1"
sites.site2 = 2
sites.sayHello = function () {
    console.log("hello " + sites.site1 + sites.site2);
};

sites.sayHello();	// hello site1 2

3.為對象動態(tài)添加屬性

如果我們使用以上的方法定義對象是無法做到為對象動態(tài)添加屬性

let people = {
    name: "hwm",
    age: 18,
    sayHello: ()=> {}
}

people.sex = "man"

以上代碼會報錯：

3.1 解決方法

定義一個包含數(shù)組屬性的接口，讓對象實現(xiàn)該接口

interface obj {
    [idx: string]: any
}
let people: obj = {}
people.name = "hwm"
people.age = 18
console.log(people)	// { name: 'hwm', age: 18 }

3.2 對象作為參數(shù)傳遞

方法一：

private ParamObj(objT: {name: string, age: number}) {
   let people = objT
    console.log(objT)
}

let people = {name: "hwm", age: 18}
this.ParamObj(people)		// {name: "hwm", age: 18}

方法二：

interface obj {
    [idx: string]: any
}

private ParamObj(objT: obj) {
  	let people = objT
   	console.log(objT)
}

let people:obj = {}
people.name = "lll"
people.age = 20
this.ParamObj(people)	// {name: "lll", age: 20}

3.3 方法返回對象

private ReturnObj(): {name: string, age: number}{
    let people = {name: "hwm", age: 18}
    return people
}

let res = this.ReturnObj()
console.log(res)	// {name: "hwm", age: 18}

3.4 對象數(shù)組

let tbl: {<!--{C}%3C!%2D%2D%20%2D%2D%3E-->name: string, age: number}[] = []

總結

到此這篇關于TypeScript為對象動態(tài)添加屬性的文章就介紹到這了,更多相關TS對象動態(tài)添加屬性內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

JavaScript實現(xiàn)櫥窗展示效果
這篇文章主要介紹了JavaScript實現(xiàn)櫥窗展示效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-11-11
networkInformation.downlink測用戶網(wǎng)速方法詳解
這篇文章主要為大家介紹了networkInformation.downlink測用戶網(wǎng)速方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-05-05
基于JavaScript+CSS實現(xiàn)禁用瀏覽器復制功能的幾種方法
網(wǎng)頁中禁用用戶的復制功能,包括 CSS 方法、JavaScript 方法、綜合解決方案以及實際應用場景,適用于需要保護內(nèi)容版權、防止惡意爬取或提升用戶體驗的場景,本文給大家介紹了基于JavaScript+CSS實現(xiàn)禁用瀏覽器復制功能的幾種方法,需要的朋友可以參考下
2025-07-07
js 能實現(xiàn)監(jiān)聽F5頁面刷新子iframe 而父頁面不刷新的方法
下面小編就為大家?guī)硪黄猨s 能實現(xiàn)監(jiān)聽F5頁面刷新子iframe 而父頁面不刷新的方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-11-11
判斷iframe里的頁面是否加載完成
這篇文章主要介紹了通過js來判斷iframe里的頁面是否加載完成,需要的朋友可以參考下
2014-06-06
單線程的JavaScript為什么可以異步執(zhí)行任務
JS作為單線程語言通過?事件循環(huán)機制實現(xiàn)異步任務處理,核心在于將耗時操作放入后臺線程處理,主線程繼續(xù)執(zhí)行其他任務,本文剖析JavaScript的異步處理原理,從單線程設計的原因到具體實現(xiàn)機制,最后通過偽代碼模擬整個異步處理流程,感興趣的朋友跟隨小編一起看看吧
2025-08-08
淺談json取值(對象和數(shù)組)
下面小編就為大家?guī)硪黄獪\談json取值(對象和數(shù)組)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-06-06
JS中IP地址與整數(shù)相互轉換的實現(xiàn)代碼
這篇文章主要介紹了JS中IP地址與整數(shù)相互轉換的實現(xiàn)代碼,需要的朋友可以參考下
2017-04-04
ES10 特性的完整指南小結
這篇文章主要介紹了ES10 特性的完整指南小結，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-03-03
原生js實現(xiàn)簡單滑動解鎖功能?js實現(xiàn)滑動拼圖解鎖
這篇文章主要為大家詳細介紹了原生js實現(xiàn)簡單滑動解鎖功能，js實現(xiàn)滑動拼圖解鎖，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-02-02