在 TypeScript 中实现数据校验的 3 种方式-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，数据校验是一项非常重要的工作。通过对输入数据进行校验，可以保证数据的绝对正确性，有效地避免了因数据错误引发的各种问题。而在 TypeScript 中，实现数据校验也非常方便，因为 TypeScript 内置了丰富的类型机制和接口定义。

下面，我们将为大家介绍 3 种在 TypeScript 中实现数据校验的方式，希望对 TypeScript 开发者有所帮助。

1. 使用接口定义数据结构

首先，我们可以通过定义接口的方式来定义数据结构，然后对输入数据进行校验。比如，以下是一个用户数据结构的接口定义：

interface User {
  id: number;
  name: string;
  age: number;
  email: string;
}

我们可以在类的构造函数中，对参数进行强校验，代码如下：

// javascriptcn.com 代码示例
class User {
  constructor(userData: User) {
    if (!userData.id || !userData.name || !userData.age || !userData.email) {
      throw new Error('参数错误')
    }
    this.id = userData.id
    this.name = userData.name
    this.age = userData.age
    this.email = userData.email
  }
}

这种方式的优点是代码简单，并且对于多个使用该接口的类，数据结构可以统一管理。但是，也有一些缺点。比如，数据结构比较复杂的情况下，接口定义可能会很长，而且对于较为复杂的业务逻辑，接口定义的校验方式可能显得有些单薄。

2. 使用类定义数据结构

其次，我们可以通过类的方式来定义数据结构，并且在类中添加数据校验的方法。比如，我们可以定义如下的用户类：

// javascriptcn.com 代码示例
class User {
  id: number
  name: string
  age: number
  email: string

  constructor(id: number, name: string, age: number, email: string) {
    this.id = id
    this.name = name
    this.age = age
    this.email = email
    this.validate()
  }

  private validate() {
    if (!this.id || !this.name || !this.age || !this.email) {
      throw new Error('参数错误')
    }
  }
}

这种方式的优点是，对于数据结构比较复杂的情况下，代码结构清晰，可以通过方法来校验各个属性。而且，类的继承和扩展也非常容易。但是，缺点是同样存在的，比如，对于较为复杂的业务逻辑，仍需要把校验逻辑写在类中，可能对类的职责产生一定的冲击。

3. 使用第三方库实现数据校验

最后，我们还可以通过第三方库来实现数据校验，其中，较为常用的有 joi 和 class-validator 等。这里以 class-validator 为例，来介绍其使用方式。

首先，我们需要使用 npm 来安装该库：

npm install --save class-validator

接着，在类中引入 Validator 和 Validate 等装饰器，并对类的属性进行装饰，如下：

// javascriptcn.com 代码示例
import { IsNumber, IsString, IsEmail, Validate } from 'class-validator';
import { ValidationError } from 'class-validator';

class User {
  @IsNumber()
  id: number;

  @IsString()
  name: string;

  @IsNumber()
  age: number;

  @IsEmail()
  email: string;

  constructor(id: number, name: string, age: number, email: string) {
    this.id = id
    this.name = name
    this.age = age
    this.email = email
    this.validate()
  }

  private validate() {
    Validate(this).then(errors => {
      if (errors.length > 0) {
        throw new Error(errors.toString())
      }
    })
  }
}

在这里，我们使用了 class-validator 提供的装饰器来定义类的属性和它们的规则。当类的实例化时，validate 方法会自动调用，并对类的属性进行校验，校验不通过时，会抛出错误，从而避免了大量的手动校验代码。

使用第三方库的优点是，它能很好地解耦业务逻辑和数据校验逻辑，代码简洁且易于维护。而且，该库还提供了多种校验规则和自定义规则的功能，能够满足大部分实际需求。

总结

在 TypeScript 中实现数据校验，可以通过接口、类、第三方库等多种方式来完成。每种方式都有其优缺点，我们可以根据实际需求进行选择。在实际开发过程中，我们也可根据具体场景，灵活运用这些方式，以优化代码质量和编码效率。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65422e967d4982a6ebbd79d8