TypeScript 中将数字 ID 转换为字符串 slug 的难题：深入解析解决方案

2024-03-04 14:34:13

解决 TypeScript 中将数字 ID 转换为字符串 slug 的问题

问题陈述

在 TypeScript 项目中，我需要将一个数字 id 转换为一个包含连字符的字符串 slug。最初的代码将 slug 设置为 item.title.replace(/\s+/g, "-") + "-" + item.id.substring(0, 8)，其中 item.title 是一个字符串，而 item.id 是一个数字。连接后，结果仍然是一个字符串，而不是所需的数字 slug。

解决方案

为了将 slug 设置为 item.id，需要将 item.id 转换为字符串。修改后的代码如下：

const generateSlugs = (params: Array<any>) => {
  const slugs = params.map((item: any) => {
    let slug = item.title.replace(/\s+/g, "-");
    if (!slug.endsWith("-")) {
      slug = slug + "-";
    }
    slug = slug + item.id.toString().substring(0, 8);
    return { slug: slug.toLowerCase(), id: item.id };
  });
  return slugs;
};

其它改进

此外，还需要将 generateStaticParams 函数修改为返回一个数组，其中每个元素都是一个包含 slug 和 id 属性的对象：

export async function generateStaticParams() {
  const params = await fetch(`${process.env.API_URL}/api/auctions`).then(
    (res) => res.json()
  );

  const slugs = generateSlugs(params);

  return slugs.map((slug: Slug) => ({
    slug: slug.slug,
    id: slug.id,
  }));
}