僅知道鍵和值的類型，如何定義 TS 對象類型？
在學習 TS 的過程中，你遇到過類似的錯誤么?
let user = {}
user.id = "TS001" // 類型“{}”上不存在屬性“id”。
user.name = "阿寶哥" // 類型“{}”上不存在屬性“name”。
除了 any “大招” 之外，你還知道幾種解決方案?閱讀完本文，你將會找到一些答案。
這是小王他的月薪是包含了基本工資和月度獎金，這是小郭他的月薪只包含合同工資。
const Wang = {
baseSalary: 10000, // 基本工資
monthlyBonus: 2000 // 月度獎金
};
const Guo = {
contractSalary: 15000 // 合同工資
}
這里我們可以實現一個 calculateSalary 函數來計算他們的薪資，計算邏輯實現起來很簡單。但問題來了，在 TS 中如何定義該函數參數的類型呢?
function calculateSalary(salaryObject: ???) {
let total = 0;
for (const name in salaryObject) {
total += salaryObject[name];
}
return total;
}
給你 3 秒鐘的時間思考一下。你想到答案了么?其中一種方案是使用索引簽名。當我們僅知道對象鍵和值的類型時，就可以使用索引簽名來定義該對象的類型。
這是索引簽名的語法：
{ [key: KeyType]: ValueType }
其中 Key 的類型，只能是 string，number，symbol 或模版字面量類型，而值的類型可以是任意類型。
interface Dictionary {
[key: boolean]: string;
}
其中模版字面量類型是 TypeScript 4.1 版本引入的新類型，結合索引簽名我們可以定義更強大的類型：
interface PropChangeHandler {
[key: `${string}Changed`]: () => void;
}
let handlers: PropChangeHandler = {
idChanged: () => {}, // Ok
nameChanged: () => {}, // Ok
ageChange: () => {} // Error
};
了解索引簽名的語法之后，我們就可以輕松地定義出 salaryObject 參數的類型：
function calculateSalary(salaryObject: { [key: string]: number }) {
let total = 0;
for (const name in salaryObject) {
total += salaryObject[name];
}
return total;
}
有些時候，在定義對象類型時，會含有一些已知和未知的鍵，這時我們可以結合索引簽名來定義該對象的類型：
interface Options {
[key: string]: string | number | boolean;
timeout: number; // 已知的鍵
}
const options: Options = {
timeout: 1000,
errorMessage: 'The request timed out!',
isSuccess: false
};
在使用索引簽名時，你可能會遇到這些困惑：
interface NumbersNames {
[key: string]: string
}
const names: NumbersNames = {
'1': 'one',
'2': 'two',
'3': 'three'
};
const value1 = names['1'] // Ok
const value2 = names[1] // Ok
type N0 = keyof NumbersNames // string ｜ number
- 為什么可以通過字符串 1 和數字 1 來訪問對應的屬性值。
- 為什么 keyof NumbersNames 返回的 string 和 number 類型組成的聯合類型。
這是因為當用作屬性訪問器中的鍵時，JavaScript 會隱式地將數字強制轉換為字符串，TypeScript 也會執行這種轉換。
除了使用索引簽名之外，我們還可以使用 TS 內置的工具類型 Record 類型來定義 calculateSalary 函數的參數類型：
type Record<K extends keyof any, T> = {
[P in K]: T;
};
function calculateSalary(salaryObject: Record<string, number>) {
let total = 0;
for (const name in salaryObject) {
total += salaryObject[name];
}
return total;
}
那么索引簽名和 Record 工具類型有什么區別呢?在一些場合下，它們都能定義出期望的類型。
const user1: Record<string, string> = { name: "阿寶哥" }; // Ok
const user2: { [key: string]: string } = { name: "阿寶哥" }; // Ok
對于索引簽名來說，其鍵的類型，只能是 string，number，symbol 或模版字面量類型。而 Record 工具類型，鍵的類型可以是字面量類型或字面量類型組成的聯合類型：
type User1 = {
[key: "id"]: string; // Error
};
type User2 = {
[key: "id" | "name"]: string; // Error
};
type User3 = Record<"id", string>; // Ok
type User4 = Record<"id" | "name", string>; // Ok
const user: User4 = {
id: "TS001",
name: "阿寶哥",
};
看完以上內容，你學會索引簽名和 Record 工具類型了么?
