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