初学者:TypeScript 实用程序类型

2023-11-29 21:42:31 浏览数 (1)

当心!你最好不要使用 any 类型在我的项目中。只有在非常特定的情况下才可以接受,但最终应通过实现特定的类型/接口来消除它。

选择使用类型(type)还是接口(interface)主要取决于个人偏好。然而,使用类型(type)可以轻松地利用 TypeScript 内置的实用工具函数。你也可以在使用接口(interface)时使用这些实用函数,但语法会很快变得混乱。

一些常用的实用工具类型包括 PickOmitPartialRecord

  • Pick - 选择要包含在新类型中的键。
  • Omit - 选择要排除在新类型中的键。
  • Partial - 表示类型的所有键都是可选的。
  • Record - 构造键/值映射类型。

例如,你可能有这样的类型:

代码语言:typescript复制
type Todo = {
  id: string;
  title: string;
  description: string;
}

但是你想要更新一个待办事项(todo),但不希望更新 id 字段,通过使用 Omit 实用工具类型,你可以排除它。

代码语言:typescript复制
function updateTodo(id: string, updatedTodo: Omit<Todo, "id">) {
  // 在这里更新待办事项的代码
}

updateTodo("todo1", { title: "新标题", description: "新描述" });

另一个使用 Record 的示例可能是:

代码语言:typescript复制
type PokemonType = "fire" | "water" | "grass";

type PokemonSkill = {
  name: string;
  damage: number;
}

type PokemonInfo = {
  name: string;
  health: number;
  skills: PokemonSkill[];
}

const pokedex: Record<PokemonType, PokemonInfo[]> = {
  fire: [
    {
      name: "小火龙",
      health: 100,
      skills: [
        {
          name: "太阳之力",
          damage: 10,
        }
      ]
    }
  ],
  water: [],
  grass: [],
}

在这个例子中,我们将宝可梦类型映射到宝可梦信息数组。如果我们想根据它们的类型显示宝可梦的类别,这可能会很有用。

另一种不使用 Record 的编写方式是这样的,但从语法上看不太好:

代码语言:typescript复制
const pokedex2: { [pokemonType in PokemonType]: PokemonInfo[] } = {
  fire: [],
  water: [],
  grass: [],
}

我正在参与2023腾讯技术创作特训营第三期有奖征文,组队打卡瓜分大奖!

0 人点赞