建站
咨詢
售后
建站咨詢
新聞中心
TypeScript 是一種由微軟開發(fā)的自由和開源的編程語(yǔ)言，它是 JavaScript 的一個(gè)超集，擴(kuò)展了 JavaScript 的語(yǔ)法，TypeScript 可以編譯成純 JavaScript，可以在任何瀏覽器、任何計(jì)算機(jī)和任何操作系統(tǒng)上運(yùn)行，在 TypeScript 中，Record 類型是一種特殊的類型，它允許你創(chuàng)建具有特定屬性名和類型的對(duì)象。
創(chuàng)新互聯(lián)公司始終堅(jiān)持【策劃先行，效果至上】的經(jīng)營(yíng)理念，通過多達(dá)10余年累計(jì)超上千家客戶的網(wǎng)站建設(shè)總結(jié)了一套系統(tǒng)有效的全網(wǎng)營(yíng)銷解決方案，現(xiàn)已廣泛運(yùn)用于各行各業(yè)的客戶，其中包括：工商代辦等企業(yè)，備受客戶表?yè)P(yáng)。
Record 類型簡(jiǎn)介
Record 類型是 TypeScript 4.2 版本引入的一個(gè)新特性，它允許你使用一組已知的屬性名和它們的類型來創(chuàng)建一個(gè)新的對(duì)象類型，Record 類型可以讓你更簡(jiǎn)潔地表示具有固定屬性的對(duì)象，而不需要顯式地定義每個(gè)屬性的類型。
假設(shè)我們有一個(gè)具有兩個(gè)屬性 name 和 age 的對(duì)象：
interface Person {
name: string;
age: number;
}
const person: Person = {
name: '張三',
age: 30,
};
使用 Record 類型，我們可以簡(jiǎn)化這個(gè)對(duì)象的定義：
type Person = Record<'name' | 'age', string | number>;
const person: Person = {
name: '張三',
age: 30,
};
Record 類型的基本用法
Record 類型的基本用法是將一組屬性名和它們的類型用 Record 關(guān)鍵字包裹起來，屬性名可以是字符串字面量或符號(hào)，類型可以是任何類型，如果屬性名是一個(gè)字符串字面量，那么它的值必須是字符串；如果屬性名是一個(gè)符號(hào)，那么它的值必須是該符號(hào)對(duì)應(yīng)的類型。
我們可以創(chuàng)建一個(gè)表示顏色的 Record 類型：
type Color = Record<'red' | 'green' | 'blue', string>;
const color: Color = {
red: '#FF0000',
green: '#008000',
blue: '#0000FF',
};
在這個(gè)例子中，我們創(chuàng)建了一個(gè)名為 Color 的 Record 類型，它有三個(gè)屬性：red、green 和 blue，它們的類型都是字符串，然后我們創(chuàng)建了一個(gè) color 對(duì)象，它具有這三個(gè)屬性，并分別賦值為紅色、綠色和藍(lán)色的十六進(jìn)制顏色代碼。
Record 類型的高級(jí)用法
可選屬性
你可以使用問號(hào)（?）來表示一個(gè)可選的屬性，這意味著該屬性的值可以為 undefined。
type PersonOptional = Record<'name' | 'age' | 'gender'?, string | number | undefined>;
const personOptional: PersonOptional = {
name: '張三',
age: 30,
};
在這個(gè)例子中，我們創(chuàng)建了一個(gè)名為 PersonOptional 的 Record 類型，它有三個(gè)屬性：name、age 和可選的 gender，然后我們創(chuàng)建了一個(gè) personOptional 對(duì)象，它具有 name 和 age 屬性，但沒有 gender 屬性，注意，這里的 gender 屬性值為 undefined。
只讀屬性
你可以使用 readonly 關(guān)鍵字來表示一個(gè)只讀的屬性，這意味著該屬性的值只能在對(duì)象初始化時(shí)設(shè)置，之后不能被修改。
type PersonReadonly = Record<'name' | 'age' | 'gender' | 'isStudent' | 'isEmployee' | 'isTeacher', string | number | boolean>;
const personReadonly: PersonReadonly = {
name: '張三',
age: 30,
gender: '男',
isStudent: true,
isEmployee: false,
isTeacher: false,
};
在這個(gè)例子中，我們創(chuàng)建了一個(gè)名為 PersonReadonly 的 Record 類型，它有七個(gè)屬性：name、age、gender、isStudent、isEmployee、isTeacher，然后我們創(chuàng)建了一個(gè) personReadonly 對(duì)象，它具有這些屬性，并在初始化時(shí)設(shè)置了它們的值，由于沒有使用 readonly 關(guān)鍵字，所以這些屬性的值之后仍然可以被修改，如果你嘗試修改這些屬性的值，TypeScript 編譯器會(huì)報(bào)錯(cuò)，要?jiǎng)?chuàng)建一個(gè)真正的只讀對(duì)象，你需要使用 TypeScript 的 Readonly 類型：
const personReadonly: Readonly= { ...personReadonly, isStudent: false }; // Error! Property 'isStudent' is readonly.
在這個(gè)例子中，我們使用了 Readonly 類型來創(chuàng)建一個(gè)真正的只讀對(duì)象，當(dāng)我們嘗試修改 isStudent 屬性的值時(shí)，TypeScript 編譯器會(huì)報(bào)錯(cuò)，提示該屬性是只讀的。
網(wǎng)站題目：TypeScriptRecord類型詳解
本文來源：http://m.fisionsoft.com.cn/article/dhhdoid.html
