快捷導航

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

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

這篇文章主要給大家介紹了關(guān)于TypeScript為對象動態(tài)添加屬性的相關(guān)資料,在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}[] = []

總結(jié)

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

您可能感興趣的文章:

相關(guān)文章

關(guān)鍵字空格替換為逗號的js代碼
這個功能主要是方便我們在發(fā)布文章時填寫關(guān)鍵字的時候，不用切換為英文狀態(tài)輸入逗號，他可以將中文逗號和空格統(tǒng)一轉(zhuǎn)換為英文逗號，提高工作效率。
2008-11-11
詳解如何在JavaScript中無縫地集成和使用Python代碼
這篇文章主要目標是幫助諸位理解如何在JavaScript中無縫地集成和使用Python代碼，文中的示例代碼講解詳細，感興趣的小伙伴可以了解一下
2023-06-06
JavaScript實現(xiàn)動態(tài)添加Form表單元素的方法示例
這篇文章主要介紹了JavaScript實現(xiàn)動態(tài)添加Form表單元素的方法,結(jié)合實例形式分析了javascript表單元素操作相關(guān)函數(shù)使用方法與相關(guān)注意事項,需要的朋友可以參考下
2017-08-08
微信小程序利用云函數(shù)獲取手機號碼
這篇文章主要介紹了微信小程序利用云函數(shù)獲取手機號碼功能，本文通過實例代碼給大家講解的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下
2019-12-12
Bootstrap3學習筆記(三)之表格
這篇文章主要介紹了Bootstrap3學習筆記(三)之表格的相關(guān)資料,需要的朋友可以參考下
2016-05-05
JavaScript實現(xiàn)頁面跳轉(zhuǎn)的八種方式
這篇文章介紹了JavaScript實現(xiàn)頁面跳轉(zhuǎn)的八種方式，文中通過示例代碼介紹的非常詳細。對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2022-06-06
JavaScript中切割截取字符串的7種方法
在開發(fā)中常常會需要截取字符串,而 JavaScript 提供了很多種方法實現(xiàn)截取操作,本文主要介紹了JavaScript中切割截取字符串的7種方法,感興趣的可以了解一下
2024-02-02
微信小程序?qū)崿F(xiàn)tab組件切換動畫
tab相對而言用的還是比較多的,但是用起來并沒有難,下面這篇文章主要給大家介紹了關(guān)于微信小程序全局配置之tab的相關(guān)資料,文中通過圖文以及示例代碼介紹的非常詳細,需要的朋友可以參考下
2022-10-10
JavaScript中this的四個綁定規(guī)則總結(jié)
相信大家都知道，ES5及之前時代的JavaScript中this的綁定機制是讓很多開發(fā)者頭疼不已的事情。this 的綁定變化多端，讓筆者也吃了不少虧。所以本文總結(jié)了this的四條綁定規(guī)則，在此記錄，以防自己遺忘，也方便他人參考借鑒。下面來一起看看吧。
2016-09-09
JavaScript獲取本機IP地址三種常用方式
在瀏覽器中使用JavaScript獲取本機IP地址是不可行的,因為瀏覽器的安全策略禁止JavaScript訪問這樣的信息,這篇文章主要給大家介紹了關(guān)于JavaScript獲取本機IP地址的三種常用方式,需要的朋友可以參考下
2023-12-12