TypeScript细碎知识点：TS中的索引签名

一、概述

在大多数情况下，我们在使用对象前就可以确定对象的结构，并为对象中的属性添加准确的类型。

但是当我们无法确定对象中有哪些属性时，或者说对象中可以出现任意多个属性时，此时，我们就可以用索引签名类型了。

⏰ 索引签名，主要是用来规定索引和属性值的类型，索引类型只能是 string 类型 或者 number 类型 或者 symbol 类型。

🔔 在 TypeScript 中，索引签名类型包括字符串索引签名类型和数字索引签名类型。

二、字符串索引签名类型

1. 语法格式

interface MyObj {
    [key: string]: number;
}

上面的这段代码中，使用 [key: string] 来约束该接口中允许出现的属性名称，其中 key 表示字符串索引的标识符，可以是任何有效的属性名，而 number 表示对应属性的值的类型，可以是任意类型。

2. 用法

interface MyObj {
    [key: string]: number;
}

let obj: MyObj = {
    a: 1,
    b: 2,
    c: 3,
    d: 4
}

如果对象中属性值的类型不是 number 类型，代码会报错。

interface MyObj {
    [key: string]: number;
}

let obj: MyObj = {
    a: 1,         // 🙆：正确
    b: 2,         // 🙆：正确
    name: "Echo", // 🙅报错：不能将类型“string”分配给类型“number”
    bool: true,   // 🙅报错：不能将类型“boolean”分配给类型“number”
};

3. 特点

• 一旦定义了索引签名，那么必选属性和可选属性的类型都必须是它的类型的子集。
• 返回的属性值的类型必须是索引签名指定的类型。
• 可以与其他明确声明的属性共存。
• 可以同时拥有多种类型的索引签名。
  

  // Ok
  interface Person {
      // 同时拥有 string 类型和 number 类型的索引签名
      [props: string]: string | number;
      // 可以定义其它属性，但是属性值的类型必须是索引签名类型的子集
      // 这里的属性值类型必须是 string 类型或者 number 类型
      name: string;
      age: number;
  }
  
  // Error
  interface User1 {
      [prop: string]: string | number;
      // 🙅报错：类型“string | undefined”的属性“name”不能赋给“string”索引类型“string | number”。
      // ‘name’的属性值类型虽然为’string‘是‘string | number’的子集,但是当其为可选时，值类型就变为‘string | undefined 类型。
      name?: string,
      age: number
  }
  
  // Error
  interface User {
      [props: string]: string | number;
      name: string;
      age: number;
      // 🙅报错：类型“true”的属性“bool”不能赋给“string”索引类型“string | number”。
      // 由于上面的索引签名规定了只能是 string 类型或者 number 类型，所以这里不能写其它类型
      bool: true;
  }

• 可以访问对象中已存在的属性，如果访问对象中不存在的属性，会返回 undefined。
  

  interface Person {
      [props: string]: string | number;
      name: string;
      age: number
  }
  
  const person: Person = {
      name: 'Echo',
      age: 26,
      city: 'GuangZhou',
      phone: 13000000000,
      gender: 'Male',
  }
  
  //访问存在的属性
  console.log(person.name);       // 输出：Echo
  console.log(person["age"]);     // 输出：26
  console.log(person.city);       // 输出：GuangZhou
  console.log(person["phone"]);   // 输出：13000000000
  console.log(person["gender"]);  // 输出：Male
  
  //访问不存在的属性
  console.log(person["address"]); // 输出：undefined

三、数字索引签名类型

当一个对象具有数字索引签名时，它意味着该对象可以使用数字来索引并获得相应的属性的值。

1. 语法

interface MyArr {
  [index: number]: string
}

上面的这段代码中，我们定义了 MyArr 接口，它具有索引签名。这个索引签名表示了当用 number 去索引 MyArr 时会得到 string 类型的返回值。

2. 用法格式

interface MyArr {
  [index: number]: string;
}

const arr: MyArr = ["Echo", "James", "John", "Steven"];
console.log(arr[0]); // Echo
console.log(arr[1]); // James
console.log(arr[2]); // John
console.log(arr[3]); // Steven

3. 特点

• 可以同时拥有多种类型的索引签名。
• 返回的属性值的类型必须是索引签名指定的类型。
  

  interface MyArr {
      [index: number]: string | number;
  }
  
  const arr: MyArr = [1, 'a', 2, 'b'];

四、注意事项

1、索引签名的键只能是 string、number、symbol 或者模板文本类型

interface MyObj {
    //🙅报错：索引签名参数类型必须是 “string”、“number”、“symbol”或模板文本类型。
    //这里参数类型为boolean类型了
    [key: boolean]: boolean;
}

2. 不能多次定义相同类型的索引签名

interface MyObj {
    //🙅报错: 类型“string”的索引签名重复。
    [key: string]: string;
    [key: string]: number;
}

五、索引签名类型 VS 泛型工具类型Record<K, T>

先看看下面的代码，我们发现索引签名类型和泛型工具类型 Record<K, T> 很相似：

const object1: Record<string, string> = { name: "Echo" };     // 正确
const object2: { [key: string]: string } = { name: "Echo" };  // 正确

但实际上它们两者之间还是有区别的：

1. 用途不同

• 索引签名类型：主要用于定义具有动态属性的对象，允许通过字符串或数字索引来访问属性。

  interface MyObj {
      [key: string]: string | number
  }
  
  const obj: MyObj = {
      name: "Echo",
      age: 26
  }
  
  console.log(obj.name);   // Echo
  console.log(obj["age"]); // 26

• Record<K, T>：主要用于生成一个新的类型，用于表示具有固定类型的属性集合，其中所有属性的值都具有相同的类型。

  interface Person {
      name: string;
      gender: string;
  }
  
  type NewPerson = Record<keyof Person, string>;
  const person: NewPerson = {
      name: "Echo",
      gender: "Male",
  }

2. 类型约束

• 索引签名类型：对于索引签名，键的类型可以是 string、number、symbol 或者模板文本类型，值的类型可以是任意类型。

  interface MyObj {
      //🙅报错：索引签名参数类型必须是 “string”、“number”、“symbol”或模板文本类型。
      //这里参数类型为boolean类型了
      [key: boolean]: boolean;
  }

  

• Record<K, T>：对于 Record<K, T>，类型参数 K 的类型可以是 string、number 或 symbol，可以接收字面量类型或者字面量类型组成的联合类型来作为参数，而类型参数 T 可以是任意类型。
  比如使用联合类型来作为 Key 值：

  type Person = Record<"name" | "age" | "gender" | "bool", string | number | boolean>;
  const person: Person = {
      name: "Echo",
      age: 26,
      gender: "Male",
      bool: true,
  }