TS - in

前端黑板报

发布于 2024-05-13 17:27:30

660

发布于 2024-05-13 17:27:30

文章被收录于专栏：前端黑板报前端黑板报

在 TypeScript 中，in 关键字用于几个不同的场景，包括索引签名、类型守卫和枚举声明。下面是 in 的语法和用法的详细说明：

索引签名

TypeScript 中的索引签名允许你定义一个对象，该对象的键可以是任何类型，并且它们的值可以是相同或不同的类型。

interface StringMap {
  [key: string]: string; // 索引签名，键是 string 类型，值也是 string 类型
}

let map: StringMap = {
  "hello": "world",
  "goodbye": "world"
};

这里，StringMap 接口使用 key: string 定义了一个索引签名，表示任何 string 类型的键都映射到 string 类型的值。

类型守卫

in 也用于类型守卫，确保某个属性存在于对象上。

interface Person {
  name: string;
  age?: number;
}

function printPersonInfo(person: Person) {
  if ("age" in person) {
    // 在这个块内，TypeScript 知道 person 对象有 age 属性
    console.log(`${person.name} is ${person.age} years old.`);
  } else {
    // 在这个块内，TypeScript 知道 person 对象没有 age 属性
    console.log(`${person.name}'s age is not defined.`);
  }
}

在这个例子中，if ("age" in person) 是一个类型守卫，它检查 age 属性是否存在于 person 对象上。

枚举声明

in 还用于枚举声明中，表示枚举的成员。

enum Color {
  Red,
  Green,
  Blue
}

function getColorName(color: Color) {
  switch (color) {
    case Color.Red:
      return "Red";
    case Color.Green:
      return "Green";
    case Color.Blue:
      return "Blue";
    default:
      return "Unknown color";
  }
}

在这个例子中，Color 是一个枚举，它定义了三个成员：Red、Green 和 Blue。

for...in 循环

在 TypeScript 中，in 也用于 for...in 循环，遍历一个对象的所有可枚举属性。

interface Person {
  name: string;
  age: number;
}

let person: Person = { name: "Alice", age: 30 };

for (let key in person) {
  // 在这里，key 是 person 对象的键
  console.log(`${key}: ${person[key]}`);
}

类型别名

in 也可用于类型别名，特别是在与 keyof 联合使用时，可以创建一个类型，该类型是某个类型所有键的联合。

type PersonKeys = keyof Person; // "name" | "age"

在这个例子中，PersonKeys 是一个类型，它包含了 Person 接口中所有键的联合。

泛型约束

in 还用于泛型约束，确保泛型类型变量可以作为索引签名使用。

function getProperty<T, K extends keyof T>(obj: T, key: K) {
  return obj[key];
}

let person = { name: "Alice", age: 30 };
let name = getProperty(person, "name"); // string

在这个例子中，getProperty 函数接受一个对象和一个键，然后返回该键对应的值。泛型 K 被约束为 T 的键之一，这样 TypeScript 就可以确保键是有效的。

in 是 TypeScript 中一个多用途的关键字，它在类型系统和运行时检查中扮演着重要角色。通过使用 in，你可以编写出类型安全且灵活的代码。

本文参与腾讯云自媒体分享计划，分享自微信公众号。

原始发表：2024-05-10，如有侵权请联系 cloudcommunity@tencent.com 删除

接口