目录
需求
实现
测试代码
代码
这是100篇系列文章的第5部分,如果你以前没有使用过TypeScript,这篇文章将向你介绍它;如果你用过它,它会让你复习你已经知道的东西,也许还会给你介绍一些你以前可能没有遇到过的新东西。在这篇文章中,我将演示如何使用接口来设置类型,使它们必须具有特定的行为。
在我们学习TypeScript的第4天,我们研究了如何使用接口来充当数据类型。正如我将要向您展示的,这并不是接口能做的全部。在这篇文章中,我将演示如何使用接口来设置类型,使它们必须具有特定的行为。出于本文的目的,我将创建一个简单的接口来控制验证。
需求验证的要求非常简单。
- 验证将确定string是否大于或等于最小字符串。
- 验证将确定string是否小于或等于最大字符串。
- 验证将使用一个名为 IsValid的方法来确定string是否有效。
有了这些简单的需求,我就可以开始编写代码了。
在我开始编写代码之前,我想解决一些您可能会疑惑的问题,即,为什么我要把我的需求写下来?答案很简单;作为一个专业的开发人员,我想知道我在写什么。我发现将需求写下来是一个很好的开始解决我正在为之编写代码的问题的地方。
实现好了,回到代码上来。我的一个需求是,我想要一个名为IsValid 的方法,我的验证代码将使用它。这就是interface的由来;接口没有任何实现能力,所以我不能在我的接口中编写任何实际的逻辑,我可以说出我想要使用的方法。这是接口的代码。
interface Validate {
IsValid(): boolean;
}
现在我需要对接口做一些事情。为了满足我的需求,我将创建一个类来验证string是否为最小长度,并创建另一个类来确定该类是否为最大长度。这两个类都将使用接口;为此,我需要使用implements来说明类实现了接口。
class MinimumLengthValidation implements Validate {
constructor(private text: string, private minimumLength: number) {}
IsValid(): boolean {
return this.text.length >= this.minimumLength;
}
}
您可能会注意到构造函数看起来很不寻常。我已经在构造函数的签名中声明了text和minimumLength。通过将它们标记为private,我已经告诉TypeScript我想要在这里赋值。实际上,这段代码与下面的代码完全相同:
class MinimumLengthValidation implements Validate {
private text: string;
private minimumLength: number;
constructor(text: string, minimumLength: number) {
this.text = text;
this.minimumLength = minimumLength;
}
IsValid(): boolean {
return this.text.length >= this.minimumLength;
}
}
最大长度验证看起来非常类似于这段代码。
class MaximumLengthValidation implements Validate {
constructor(private text: string, private maximumLength: number) {}
IsValid(): boolean {
return this.text.length
关注
打赏
最近更新
- 深拷贝和浅拷贝的区别(重点)
- 【Vue】走进Vue框架世界
- 【云服务器】项目部署—搭建网站—vue电商后台管理系统
- 【React介绍】 一文带你深入React
- 【React】React组件实例的三大属性之state,props,refs(你学废了吗)
- 【脚手架VueCLI】从零开始,创建一个VUE项目
- 【React】深入理解React组件生命周期----图文详解(含代码)
- 【React】DOM的Diffing算法是什么?以及DOM中key的作用----经典面试题
- 【React】1_使用React脚手架创建项目步骤--------详解(含项目结构说明)
- 【React】2_如何使用react脚手架写一个简单的页面?