js其它

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > js其它 > TypeScript 类型级别

TypeScript 类型级别示例介绍

作者：dingsheng

这篇文章主要为大家介绍了TypeScript 类型级别示例介绍，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

介绍

这是一门在线课程，旨在将您的TypeScript技能从中级提升到高级。它将使你深入了解类型系统的基本原理，并指导你完成其高级功能。在这里，你会找到成为TypeScript专家所需的一切-不仅有深入的内容，还有练习新技能的有趣挑战，就像这里的这个。

/**
 * Try assigning "World" to `type Hello`!
 */
type Hello = "...";
// Type-level unit tests!
// If the next line type-checks, you solved this challenge!
type test1 = Expect<Equal<Hello, "World">>;

多年来，TypeScript的类型系统已经从基本的类型注释发展成为一种大型复杂的编程语言。如果你曾经研究过一个开源库的代码，你可能会发现一些看起来很吓人、很陌生的类型，比如来自另一个星球的一些深奥的语言。库代码通常需要比我们习惯编写的代码更抽象；

这就是为什么它广泛使用高级TypeScript功能，如泛型、条件类型、映射类型甚至递归类型。我个人在研究TS Pattern时学习了这些概念，这是一个开源库，具有极其难以键入的特殊性。在本课程中，我希望分享我通过阅读过多的源代码和对类型系统进行数百小时的修改所学到的知识。

类型之所以很棒，有很多原因：

类型系统对您的代码了解得越多，它对你的帮助就越大！一旦你精通TypeScript，一切都变得可能。您将不再觉得类型系统限制了您编写所需抽象的能力。

想不想检查路由参数传递的是否正确?

走你：

// ✅ this is correct 👌
navigate("user/:userId", { userId: "2" });
// ✅ Looks good! `dashboardId` is optional.
navigate("user/:userId/dashboard(/:dashboardId)", { userId: "2" });
// ❌ `userId` is missing. Add one to fix the error!
navigate("user/:userId/dashboard(/:dashboardId)", { dashboardId: "2" });
// ❌ `oops` isn't a parameter. Remove it to fix the error!
navigate("user/:userId/dashboard(/:dashboardId)", { userId: "2", oops: ":(" });
// 👇 Scroll to see how this works!
// 🤫 Here are the kind of things you will soon be able to do!
type ParseUrlParams<Url> =
  Url extends `${infer Path}(${infer OptionalPath})`
    ? ParseUrlParams<Path> & Partial<ParseUrlParams<OptionalPath>>
    : Url extends `${infer Start}/${infer Rest}`
    ? ParseUrlParams<Start> & ParseUrlParams<Rest>
    : Url extends `:${infer Param}`
    ? { [K in Param]: string }
    : {};
// navigate to a different route
function navigate<T extends string>(
  path: T,
  params: ParseUrlParams<T>
) {
  // interpolate params
  let url = Object.entries<string>(params).reduce<string>(
    (path, [key, value]) => path.replace(`:${key}`, value),
    path
  );
  // clean url
  url = url.replace(/(\(|\)|\/?:[^\/]+)/g, '')
  // update url
  history.pushState({}, '', url);
}

是不是觉得很神奇？它居然能够检查路由参数的传递。其实这并不是魔法。类型系统只是一种真正的编程语言！

为了更好地理解这一点，我们首先需要承认TypeScript的类型系统本身就是一种成熟的编程语言！它非常值得学习它的基础知识，就像我们使用任何其他新编程语言一样。在本课程中，我将尝试展示您已经知道的编程概念之间的对应关系，如代码分支、变量赋值、循环和数据结构，以及它们的类型级别等价物。通过组装这些构建块，您将能够创建强大的类型级算法，以确保在整个代码库中始终正确使用您创建的抽象。

以上就是TypeScript 类型级别示例介绍的详细内容，更多关于TypeScript 类型级别的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:
阅读全文