TypeScript為對象動態(tài)添加屬性代碼示例
更新時間：2023年07月11日 09:30:51 作者：明明明h
這篇文章主要給大家介紹了關(guān)于TypeScript為對象動態(tài)添加屬性的相關(guān)資料,在TypeScript 中,我們經(jīng)常需要在運行時動態(tài)添加屬性到對象上,需要的朋友可以參考下
1.定義
TypeScript 對象是包含一組鍵值對的實例。 值可以是標(biāo)量、函數(shù)、數(shù)組、對象等，如下實例：
var object_name = {
key1: "value1", // 標(biāo)量
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)文章
這個功能主要是方便我們在發(fā)布文章時填寫關(guān)鍵字的時候，不用切換為英文狀態(tài)輸入逗號，他可以將中文逗號和空格統(tǒng)一轉(zhuǎn)換為英文逗號，提高工作效率。2008-11-11
詳解如何在JavaScript中無縫地集成和使用Python代碼
這篇文章主要目標(biāo)是幫助諸位理解如何在JavaScript中無縫地集成和使用Python代碼，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以了解一下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ù)獲取手機號碼功能，本文通過實例代碼給大家講解的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2019-12-12
這篇文章主要介紹了Bootstrap3學(xué)習(xí)筆記(三)之表格的相關(guān)資料,需要的朋友可以參考下2016-05-05
JavaScript實現(xiàn)頁面跳轉(zhuǎn)的八種方式
這篇文章介紹了JavaScript實現(xiàn)頁面跳轉(zhuǎn)的八種方式，文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-06-06
在開發(fā)中常常會需要截取字符串,而 JavaScript 提供了很多種方法實現(xiàn)截取操作,本文主要介紹了JavaScript中切割截取字符串的7種方法,感興趣的可以了解一下2024-02-02
tab相對而言用的還是比較多的,但是用起來并沒有難,下面這篇文章主要給大家介紹了關(guān)于微信小程序全局配置之tab的相關(guān)資料,文中通過圖文以及示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-10-10
JavaScript中this的四個綁定規(guī)則總結(jié)
相信大家都知道，ES5及之前時代的JavaScript中this的綁定機制是讓很多開發(fā)者頭疼不已的事情。this 的綁定變化多端，讓筆者也吃了不少虧。所以本文總結(jié)了this的四條綁定規(guī)則，在此記錄，以防自己遺忘，也方便他人參考借鑒。下面來一起看看吧。2016-09-09
在瀏覽器中使用JavaScript獲取本機IP地址是不可行的,因為瀏覽器的安全策略禁止JavaScript訪問這樣的信息,這篇文章主要給大家介紹了關(guān)于JavaScript獲取本機IP地址的三種常用方式,需要的朋友可以參考下2023-12-12