TypeScript 100天(第5天)

目录

需求

实现

测试代码

代码


这是100篇系列文章的第5部分,如果你以前没有使用过TypeScript,这篇文章将向你介绍它;如果你用过它,它会让你复习你已经知道的东西,也许还会给你介绍一些你以前可能没有遇到过的新东西。在这篇文章中,我将演示如何使用接口来设置类型,使它们必须具有特定的行为。

在我们学习TypeScript的第4天,我们研究了如何使用接口来充当数据类型。正如我将要向您展示的,这并不是接口能做的全部。在这篇文章中,我将演示如何使用接口来设置类型,使它们必须具有特定的行为。出于本文的目的,我将创建一个简单的接口来控制验证。

需求

验证的要求非常简单。

  1. 验证将确定string是否大于或等于最小字符串。
  2. 验证将确定string是否小于或等于最大字符串。
  3. 验证将使用一个名为 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;
    }
}

您可能会注意到构造函数看起来很不寻常。我已经在构造函数的签名中声明了textminimumLength。通过将它们标记为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 <= this.maximumLength;
    }
}

测试代码

编写了验证类之后,我准备对它们进行测试。我可以这样写代码。

console.log(new MinimumLengthValidation('ABC12345', 10).IsValid());        // Should print false
console.log(new MinimumLengthValidation('ABC12345AB12345', 10).IsValid()); // Should print true
console.log(new MaximumLengthValidation('ABC12345', 10).IsValid());        // Should print true
console.log(new MaximumLengthValidation('ABC12345AB12345', 10).IsValid()); // Should print false

这并没有真正演示我的验证,所以让我们看看如何使用Validate接口。我将创建Validate项的数组。

const validation: Validate[] = [];

我现在要做的是将上述代码片段中的相同验证项push到数组中。

validation.push(new MinimumLengthValidation('ABC12345', 10));
validation.push(new MinimumLengthValidation('ABC12345AB12345', 10));
validation.push(new MaximumLengthValidation('ABC12345', 10));
validation.push(new MaximumLengthValidation('ABC12345AB12345', 10));

在此之后,我将使用一个循环来遍历数组,并打印验证是否成功。

for (let index = 0; index < validation.length; index++) {
    console.log(validation[index].IsValid());
}

代码

我们已经不再使用接口来描述类可以有哪些行为了。我们开始进入继承领域,继承是面向对象的支柱之一。在下一篇文章中,我将进一步深入继承的世界,这是我们真正要加快步伐的地方。

非常感谢您的阅读。与往常一样,本文背后的代码可以在Github上获得。

https://www.codeproject.com/Articles/5316609/100-Days-of-TypeScript-Day-5

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值