在學習 TS 的過程中，你遇到過類似的錯誤么?

創(chuàng)新互聯(lián)是一家專業(yè)提供樟樹企業(yè)網(wǎng)站建設,專注與成都網(wǎng)站建設、成都網(wǎng)站設計、HTML5建站、小程序制作等業(yè)務。10年已為樟樹眾多企業(yè)、政府機構等服務。創(chuàng)新互聯(lián)專業(yè)網(wǎng)絡公司優(yōu)惠進行中。

let user = {}
user.id = "TS001" // 類型“{}”上不存在屬性“id”。
user.name = "阿寶哥" // 類型“{}”上不存在屬性“name”。

除了 any “大招” 之外，你還知道幾種解決方案?閱讀完本文，你將會找到一些答案。

這是小王他的月薪是包含了基本工資和月度獎金，這是小郭他的月薪只包含合同工資。

const Wang = {
  baseSalary: 10000, // 基本工資
  monthlyBonus: 2000 // 月度獎金
};
const Guo = {
  contractSalary: 15000 // 合同工資
}

這里我們可以實現(xiàn)一個 calculateSalary 函數(shù)來計算他們的薪資，計算邏輯實現(xiàn)起來很簡單。但問題來了，在 TS 中如何定義該函數(shù)參數(shù)的類型呢?

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 參數(shù)的類型：

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 和數(shù)字 1 來訪問對應的屬性值。
• 為什么 keyof NumbersNames 返回的 string 和 number 類型組成的聯(lián)合類型。

這是因為當用作屬性訪問器中的鍵時，JavaScript 會隱式地將數(shù)字強制轉換為字符串，TypeScript 也會執(zhí)行這種轉換。

除了使用索引簽名之外，我們還可以使用 TS 內(nèi)置的工具類型 Record 類型來定義 calculateSalary 函數(shù)的參數(shù)類型：

type Record = {
  [P in K]: T;
};
function calculateSalary(salaryObject: Record) {
  let total = 0;
  for (const name in salaryObject) {
    total += salaryObject[name];
  }
  return total;
}

那么索引簽名和 Record 工具類型有什么區(qū)別呢?在一些場合下，它們都能定義出期望的類型。

const user1: Record = { name: "阿寶哥" }; // Ok
const user2: { [key: string]: string } = { name: "阿寶哥" }; // Ok

對于索引簽名來說，其鍵的類型，只能是 string，number，symbol 或模版字面量類型。而 Record 工具類型，鍵的類型可以是字面量類型或字面量類型組成的聯(lián)合類型：

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: "阿寶哥",
};

看完以上內(nèi)容，你學會索引簽名和 Record 工具類型了么?

本文名稱：僅知道鍵和值的類型，如何定義TS對象類型？
路徑分享：http://uogjgqi.cn/article/dpgoedd.html