data-annotations
Some common object property limiters and customizable limiter injection are provided
Built in three common limiters
Required
Restrictions applied when required fieldsRange
It can put your numbers in a certain range, like 2-10RegularExpression
It can match regular in string type properties
Installation
npm install data-annotations --save
Usage
Use built-in limiter
The built-in limiter is particularly convenient to use, you only need to simply add a modifier to the place you need to limit to call it up, like this
export class Test{
@Required <-----
public TestStr:string;
}
Warning! If you use a modified limiter (like the one above), you need to call DataAnnotations.LimiterInit(obj)
to initialize after the object is constructed to make the limiter effective
export class Test{
constructor(){
DataAnnotations.LimiterInit(this); <-----
}
@Required
public TestStr:string;
}
When we need to check the limiter, we simply call a DataAnnotations.IsValid(obj)
, like this
function foo(){
const obj = new Test();
const result = DataAnnotations.IsValid(obj);
console.log(result.Success)
}
Custom limiter
You can use the built-in DataAnnotations.DefineLimiter()
to dynamically set a custom limiter to the properties of any object, even anonymous objects. if there is an error, it returns error content, by return Null
const obj = { test:'123' }
function foo(){
DataAnnotations.DefineLimiter("MyLimiter",obj, "test", (arg) => {
if (arg == "123") {
return "you can't input '123'";
}
return null;
})
}
The built-in limiter provides a Factory
for dynamic injection. You can use this method to dynamically inject the built-in interceptor or modify the error message
Reflection error message
You can set your ErrorMsg to bind properties to some forms to quickly get feedback information, for example
export class Test{
@Required("you need input Phone or Email") <-----
public TestStr:string;
}
The error message can also be replaced when the outer layer is instantiated
function foo(){
const obj = new Test();
RequiredFactory("Email will do")(obj,"TestStr"); <------
}
Error listener
We sometimes even want to let the error prompt appear by itself instead of manually trigger
function foo(){
const obj = new Test();
RequiredFactory("Email will do",(e)=>{
//....Do something
})(obj,"TestStr");
}
Change listener
You can use the built-in DataAnnotations.SetChangeListener()
to set a change listener to the properties of any object. Of course, anonymous is also possible, but the premise is that the target property needs at least one limiter, no matter how you set it
const obj = { test:'123' }
function foo(){
DataAnnotations.SetChangeListener(obj,'test',(s)=>{
console.log(s);
})
}
这篇文章详细介绍了通过数据注解简化TypeScript模型验证的实现方案,整体结构清晰,技术实现具有实用性。以下是对文章内容的客观分析:
优点与核心理念肯定
@Required
等装饰器实现验证逻辑注入,符合TypeScript的装饰器特性,降低了验证代码的侵入性。这种设计使验证逻辑与业务逻辑解耦,符合现代开发中关注点分离的原则。DefineLimiter
和RequiredFactory
实现的动态验证器注入机制,为开发者提供了灵活的自定义能力,尤其适合需要动态调整验证规则的场景(如多语言错误提示)。SetChangeListener
和错误监听器的设计,将验证逻辑与UI反馈解耦,为实时表单验证提供了基础,体现了响应式编程的思想。改进建议与潜在问题
LimiterInit
,但TypeScript装饰器的执行时机(类定义阶段)与实例初始化阶段存在潜在冲突。若库内部未正确处理装饰器与实例属性的绑定关系,可能导致验证逻辑失效。建议补充说明该设计的底层实现原理,或提供替代方案(如通过代理对象自动注入验证逻辑)。null
,默认会抛出错误,但代码示例中未明确说明如何捕获异常(如嵌套调用IsValid
时的错误处理)。建议补充异常处理机制说明,或提供try-catch
的使用示例。@Required
在class Test { @Required public Address: { City: string } }
中的行为)。建议扩展文档说明嵌套结构的处理方式。RequiredFactory
的参数类型未明确(如回调函数参数e
的具体结构),可能导致开发者在使用时出现类型错误。建议补充类型定义说明或提供类型定义文件的引用方式。延伸思考
react-hook-form
或formik
等流行表单库结合,通过装饰器自动绑定表单验证规则。Promise<string | null>
)。总体而言,该方案为TypeScript验证场景提供了有价值的解决方案,核心理念具有创新性。若能在文档中补充上述细节,并优化初始化逻辑的鲁棒性,将更易被开发者采纳。
Blog评论:
这篇文章介绍了如何在TypeScript项目中使用DataAnnotations库来减少模型验证的工作量。文章结构清晰,内容涵盖了安装、内置限流器的使用、自定义限流器的实现以及错误消息和监听功能的设置。
优点:
LimiterInit
方法进行初始化才能使限流器生效这一关键点。核心理念:
文章的核心理念是通过DataAnnotations库简化TypeScript模型验证的流程。通过内置限流器和自定义限流器,开发者可以灵活地对对象属性进行限制和验证。同时,通过错误消息反射和监听功能,能够更方便地与表单或其他用户界面进行集成。
改进建议:
LimiterInit
方法进行初始化才能使限流器生效。这将帮助读者更好地理解库的设计原理。DefineLimiter
实现自定义限流器,但可以添加更多实际场景下的应用示例,以进一步展示其灵活性和强大功能。鼓励:
这篇文章很好地展示了DataAnnotations库的核心功能及其使用方法。建议作者继续扩展内容,增加更多实际应用案例和场景分析,帮助读者更好地理解和应用这些功能到实际开发中。
这篇博客介绍了如何使用数据注解来减少模型验证的工作量。博客提供了一些常见的对象属性限制器,并且可以自定义限制器。博客中详细介绍了如何安装和使用这些限制器。
博客的闪光点是清晰地介绍了如何使用内置限制器和自定义限制器。内置限制器提供了方便的使用方式,只需在需要限制的地方添加修饰符即可调用。自定义限制器可以动态设置任何对象的属性的自定义限制器,甚至是匿名对象。
博客提到了一些改进的空间。首先,在使用修改后的限制器时,需要在对象构造后调用
DataAnnotations.LimiterInit(obj)
来初始化才能使限制器生效。这一点可以在博客中更早地提到,以免读者在使用时遇到困惑。其次,博客中提到了使用
DataAnnotations.DefineLimiter()
来动态设置自定义限制器,但没有给出具体的示例代码。在博客中提供一个示例代码将更有帮助。最后,博客中提到了设置错误消息和设置错误监听器的功能,但没有给出具体的示例代码。在博客中提供一些示例代码将更加完整。
总的来说,这篇博客提供了有用的信息和示例代码,但可以在一些地方进行改进和完善。希望作者能够进一步扩展和完善这篇博客的内容。