在过去的几年里，TypeScript 语言除了增长用户之外几乎什么都没做。它已被许多 Web 开发人员评为最喜欢的语言。使用纯JavaScript 代码的前端工作变得越来越少。

但是，有时 TypeScript 并没有充分发挥其潜力。导致过多或使用过多any是最常见的错误之一。

在本文中，我们将看到5 个 TypeScript 库，这些库将增强您的 TypeScript 体验并增加您对其静态类型的信心。这些最小的库将提高开发人员的开发效率。

1、zod

TypeScript 的薄弱环节是仅在编译时验证。一旦它被解析和构建，所有类型都被删除。在以下情况下，这可能会导致出现一些错误：

让我们看一个例子：

interface User {name: string;email: string;
}
async function fetchUser(id: string): User {const url = `/users/${id}`;const response = await fetch(url);return (await response.json()) as User;
}

在上面的代码中，编译器认为请求将返回一个带有 name 和email属性的 JSONUser对象。如果结果不是这样，将在生产中出现bug。但不幸的是，这些bug只能在运行时找到原因。

我们可以定义一个模式，该zod模式可以在运行时进行验证。

让我们看看使用zod重构后的代码：

const UserSchema = z.object({name: z.string(),email: z.string(),
});
async function fetchUser(id: string) {const url = `/users/${id}`;const response = await fetch(url); // ✅如果校验不通过，可以通过日志抛出错误。return UserSchema.parse(await response.json());
}

我们可以选择如何处理错误。在上面的示例中，UserSchema.parse将在运行时引发错误。

我们也可以选择不使用safeParse方法抛出错误。它仅适合在日志记录问题而不会破坏用户体验。

Zod 非常强大，我们还可以使用z.infer. 我们可以在整个代码中使用该方法。

const UserSchema = z.object({name: z.string(),email: z.string(),
});
export type User = z.infer<typeof UserSchema>;

总而言之，它是一个强大的库。

zod的一些其他优点：

zod 注意事项：

zod 安装：

npm install --save-dev zod

2、tiny-invariant

在 TypeScript 的严格模式下，如果您不进行验空检查，会出现bug。 为了避免bug，有原生的！操作方法。

让我们看一个例子：

interface User {name?: string; email?: string;
}
const u: User = { name: 'Joe', email: 'joe@no-reply.com'};// ❌ Error: 对象可能是 'undefined'
console.log(u.name.toUpperCase());
// ✅ Compiles
console.log(u.name!.toUpperCase());

以上做法不太完美，因为有时这些开发人员的假设判断可能是错误的。

通过使用tiny-invariant，您可以在断言不正确时在运行时抛出异常，并在 Sentry 或任何其他提供程序上捕获该异常。这将增加您对代码的信心并检测任何不一致之处。

import invariant from 'tiny-invariant';
interface User { name?: string; email?: string;}
const u: User = { name: 'Joe', email: 'joe@no-reply.com'};invariant(u.name, 'Name should not be null for this scenario')
// ✅ Compiles without the need of `!`
console.log(u.name.toUpperCase());

代码更有弹性，我们可以清除很多冗余if语句。

这个包是最小的，如果你愿意，你可以选择实现你自己的invariant功能。

tiny-invariant 注意事项：

tiny-invariant 安装：

npm install --save-dev tiny-invariant

3、type-fest

TypeScript 最强大的功能之一是映射类型。

TypeScript 附带了一些方法，但是这些方法是有限的，并且只是作为一个起点。因此，可以肯定的是，您的代码中有一些公共方法。可能在一个utils.d.ts文件中，你可能会从一个项目带到另一个项目的地方。这绝对没问题，但是，还有其他方法可以解决该问题。

您可以使用一些类型的库。例如：ts-toolbet。它提供了久经考验的类型，可以减少您花在编写新映射上的时间。

通过查看 npm 趋势，您可以发现该type-fest领域是如何占据主导地位的。通过npmtrends可以看到：

让我们看一个例子。TypeScript 原生的Optional方法非常有限。它只是让我们将所有属性标记为可选。它缺乏细节。

让我们看看type-fest关于该用例的内容：

import { type MarkOptional, type OptionalKeys } from 'ts-essentials';interface User {name: string;email: string;
}
// 原生方法：所有的属性都是可选的type PartialUser = Partial<User>;
// Result:  // {// name?: string;// email?: string;
} // 												


											

前端权限管理方案之精确到按钮级别相关推荐
	

    
								
  1. 整体思路【路由权限管理方案】
		
    笔者想说: 这个教程是笔者从这个大佬的视频中学习到的: 保姆级搭建vue项目权限控制权限路由方案_哔哩哔哩_bilibili 但是从大佬给的代码由于缺少了package.json这个包和后端的文件,所 ...
    
		
    2. 
						
  2. java 编程 菜单权限设计，精确到按钮级别，建议收藏【转存】
		
    一.介绍 在实际的项目开发过程中,菜单权限功能可以说是后端管理系统中必不可少的一个环节,根据业务的复杂度,设计的时候可深可浅,但无论怎么变化,设计的思路基本都是围绕着用户.角色.菜单进行相应的扩展.  ...
    
		
    3. 
						
  3. 深入探讨大数据权限管理方案-从哲学到技术
		
    大数据平台的权限管理工作,听起来不就是用户和密码管理这点事么?找个数据库存储一下两者的映射关系,然后再找个地方记录一下每个人可以做什么事,最后在需要的时候验证一下就好了,如果不讨论各种加解密原理和算法 ...
    
		
    4. 
						
  4. 《前端》权限链接--vue前端权限控制方案详解附demo_feiyu_may的博客-CSDN博客_vue 前端权限
		
    前端权限控制 - 潘正 - 博客园  https://www.cnblogs.com/guchengnan/p/11800947.html vue前端权限控制方案详解附demo_feiyu_may的博 ...
    
		
    5. 
						
  5. 基于Vue的前端权限管理
		
    前端权限控制的思路主要分为以下几个方向:
    
		
    6. 
						
  6. 如何用 Vue 实现前端权限控制
		
    本文来自作者 雅X共赏 在 GitChat 上分享 「如何用 Vue 实现前端权限控制(路由权限 + 视图权限 + 请求权限)」,「阅读原文」查看交流实录. 「文末高能」 编辑 | 哈比 为什么做前端 ...
    
		
    7. 
						
  7. vue权限管理的设计与实现
		
    一.什么是权限管理 在web应用中权限管理,一般指根据系统设置和分配给某个角色的应用权限,用户可以访问而且只能访问自己被分配的资源.权限管理几乎出现在任何系统里面,在web后台管理系统里面尤为常见.  ...
    
		
    8. 
						
  8. Mongodb的权限管理
		
    Mongodb的权限管理 1. 为什么要进行权限管理的设置 刚安装完毕的mongodb默认不使用权限认证方式启动,与MySQL不同,mongodb在安装的时候并没有设置权限,然而公网运行系统需要设置权 ...
    
		
    9. 
						
  9. python通用权限管理框架图_通用权限管理设计篇_设计模式
		
    摘要: 本文讲的是通用权限管理设计篇_设计模式, 博客地址:http://www.blogjava.net/amigoxie/  一．引言        因为做过的一些系统的权限管理的功能虽然在逐步完 ...
    
		
    10. 
		


					

最新文章
	

    
						
  1. 互斥锁、共享内存方式以及生产者消费者模型
		
    2. 
						
  2. CentOS文件权限管理
		
    3. 
						
  3. Visual Studio现可使用EditorConfig
		
    4. 
						
  4. BZOJ 4241 分块
		
    5. 
						
  5. 左手手机右手智慧屏 华为9月要搞大事情
		
    6. 
						
  6. [Windows Phone] 自己动手实现Telerik公司的LayoutTransform动画效果
		
    7. 
						
  7. c语言gs迭代法解方程,ex1_7-GS迭代法例题源程序及注释.pdf
		
    8. 
						
  8. dpl直播源_上千个高清无码直播源，爽歪歪！
		
    9. 
						
  9. android 修复工具,牛学长安卓手机修复工具(Reiboot for Android)
		
    10. 
						
  10. 用计算机怎么按e,在计算器上e的多少次方怎样按
		
    11. 
						
  11. 关于低功耗车牌识别摄像机，你知道多少
		
    12. 
						
  12. 2017最新总结政府大数据应用案例及启示
		
    13. 
						
  13. 还在搞三层架构？了解下 DDD 分层架构的三种模式吧 ！
		
    14. 
						
  14. 斐尔可（FILCO）67键迷你机械键盘 如何使用快捷键
		
    15. 
						
  15. Android项目---拼图小游戏（下）
		
    16. 
						
  16. 码农+码农=码农 ？
		
    17. 
						
  17. kafka 四：（设计模式）Kafka数据上传至Hbase
		
    18. 
						
  18. Bugly-iOS导入设置
		
    19. 
						
  19. html点击按钮显示星期,js实现日期显示的一些操作(实例讲解)
		
    20. 
						
  20. 如何从计算机截屏到U盘,win7电脑如何实现截图
		
    21. 
		

	


热门文章
	

    
									
  1. 王卫，零售风口练习生
			
    2. 
						
  2. M1 macOS 无法录制系统声音？SoundFlower后继有BlackHole【macOS系统声音内录】
			
    3. 
						
  3. python数学建模（二）线性规划2.实战(思路清晰\过程完整、详细)
			
    4. 
						
  4. Mysql数据库MMM实现高可用架构
			
    5. 
						
  5. geek_2013年How-To Geek的节日礼物指南：男孩，女孩，极客和有情机器人的书籍
			
    6. 
						
  6. 评价一个产品好坏的简单准则：NPS
			
    7. 
						
  7. c语言空循环的作用是什么意思,C语言空循环和无穷循环有的区别
			
    8. 
						
  8. 血战上海滩寻找英雄血量地址 实现无敌效果
			
    9. 
						
  9. Laya魅族手动关闭banner广告之后打不开
			
    10. 
						
  10. 【我的第一个目标检测课题】2、薅一把Google的羊毛！使用Colaboratory链接谷歌云盘在线进行网络训练
			
    11.