TypeScript: 如何為對象動態(tài)分配屬性

?

鬼哥本周將通過幾篇優(yōu)秀的Typescript文章，讓大家學習到Typescript一些高級的用法，讓大家對Typescript更加的深入理解，并且更好實踐到工作當中，【一共五篇文章】，關注我們一起完成這個系列的學習

原文:https://github.com/leslie1943

?

• 在JavaScript中我們很容易給對象動態(tài)添加屬性

let developer = {}
developer.name = 'frontender'  

• 以上代碼在 JavaScript 中可以正常運行, 但在 TypeScript 中, 編譯器會提示以下異常信息

Property 'name' does not exist on type '{}'.ts(2339)

?????? 使用 索引簽名

• {}類型表示一個沒有包含成員的對象, 所以該類型沒有包含name屬性. 為了解決這個問題, 我們可以聲明一個 LooseObject類型

interface LooseObject {
  [key: string]: any
}

let developer: LooseObject = {}
developer.name = 'finder'

• 該類型使用 索引簽名 的形式描述 LooseObject 類型可以接收 key 類型是字符串, 值的類型是any類型的字段. 有了LooseObject類型之后, 我們就可以通過上述代碼解決動態(tài)添加屬性的問題

• 對于 LooseObject 類型來說, 它的約束是很寬松的. 在一些應用場景中, 我們除了希望能支持動態(tài)的屬性之外, 也希望能夠聲明一些必選和可選的屬性.

• 比如對于一個表示開發(fā)者的 Developer 接口來說, 我們希望它的 name 屬性是必填, 而 age 屬性是可選的, 此外還支持動態(tài)地設置字符串類型的屬性. 針對這個需求我們可以這樣做

interface LooseStaticObject {
  name: string
  age?: number
  [key: string]: any
}

let coder: LooseStaticObject = { name: 'semlinker' }
coder.age = 30
coder.city = 'Dalian'

?????? 使用工具類型 Record 定義接口

• 其實除了使用 索引簽名 之外, 我們也可以使用 TypeScript 內置的工具類型 Record 來定義 Developer 接口

// type Record<K extends string | number | symbol, T> = { [P in K]: T; }
// { [P in K]: T } : 屬性名稱是 string |number | symbol 之一(下面代碼中的 string), 屬性值是 T 類型(下面代碼中的any)

// <K, T>: K 是指屬性的類型; T 是指屬性的值類型 any指任意類型

interface Developer extends Record<string, any> {
  name: string
  age?: number
}

let developer: Developer = { name: 'coder', 1: '1' }
developer.age = 22
developer.city = 'Dalian'

// Record<K,T>中的 ?? T 是 string, Value 只能是 string
interface Coder extends Record<string, string> {
  name: string
  age?: string // 只能是 string
}
let coder: Coder = { name: 'coder' }
// coder.age = 22 // Type 'number' is not assignable to type 'string'.ts(2322)
coder.age = `22`

?? 看完三件事