属性名定义的两种方式对比

Jonas24
86 阅读2分钟

计算属性名称（Computed Property Names），它允许你使用变量或表达式作为对象的键名。这在以下几种情况下特别有用：

  1. 动态键名：当键名在运行时确定，或者需要通过变量来定义键名时。
  2. 避免硬编码字符串：通过使用常量，可以避免在代码中硬编码字符串，减少拼写错误并提高可维护性。
const USER_INFO_KEY = 'userInfo';

interface BasicStore {
  [USER_INFO_KEY]: UserInfo;
}

interface UserInfo {
  id: number;
  name: string;
  email: string;
}

const store: BasicStore = {
  [USER_INFO_KEY]: { id: 1, name: 'John Doe', email: 'john@example.com' }
};

console.log(store[USER_INFO_KEY]); // 访问 userInfo 属性

token: UserInfo;

这种方式使用了 字面量属性名称，它直接在对象中定义了一个名为 token 的属性。这种方法更常见于静态对象结构，键名是固定的，不会在运行时改变。

interface BasicStore {
  token: UserInfo;
}

interface UserInfo {
  id: number;
  name: string;
  email: string;
}

const store: BasicStore = {
  token: { id: 1, name: 'John Doe', email: 'john@example.com' }
};

console.log(store.token); // 访问 token 属性

区别和适用场景

1. 键名的动态性

  • 计算属性名称：键名可以动态生成或通过变量定义，适用于需要动态键名的场景。
  • 字面量属性名称：键名是固定的，适用于键名不会改变的场景。

2. 可维护性

  • 计算属性名称：通过使用常量，可以避免在代码中硬编码字符串，提高可维护性和一致性。
  • 字面量属性名称：在简单的对象结构中，直接使用字面量属性名称更直观，但如果键名需要频繁修改或在多个地方使用，维护起来可能比较麻烦。

3. 类型安全

  • 计算属性名称：可以通过常量和类型系统确保键名的一致性和类型安全。
  • 字面量属性名称：类型系统同样可以确保类型安全，但如果键名需要在多个地方使用，可能会增加出错的风险。

示例对比

使用计算属性名称

const USER_INFO_KEY = 'userInfo';

interface BasicStore {
  [USER_INFO_KEY]: UserInfo;
}

interface UserInfo {
  id: number;
  name: string;
  email: string;
}

const store: BasicStore = {
  [USER_INFO_KEY]: { id: 1, name: 'John Doe', email: 'john@example.com' }
};

console.log(store[USER_INFO_KEY]); // 访问 userInfo 属性

使用字面量属性名称

interface BasicStore {
  token: UserInfo;
}

interface UserInfo {
  id: number;
  name: string;
  email: string;
}

const store: BasicStore = {
  token: { id: 1, name: 'John Doe', email: 'john@example.com' }
};

console.log(store.token); // 访问 token 属性

总结

  • 计算属性名称 ([USER_INFO_KEY]: UserInfo;) 适用于需要动态键名或希望通过常量来避免硬编码字符串的场景。
  • 字面量属性名称 (token: UserInfo;) 适用于键名固定且结构简单的场景。

选择哪种方式取决于具体的需求和代码结构。如果键名是动态的或需要在多个地方使用，计算属性名称会更合适；如果键名是固定的且代码结构简单，字面量属性名称可能更直观。

avatar
文章
阅读
粉丝