Client-side object validation with Yup

Introduction

Typescript introduced many positive things in JavaScript. When used right, it can help with having cleaner code and reducing bugs. However, it mainly works on the compile time, which means it helps you when writing code. Not when running it. And sometimes, you want to verify the structure of data on run time. If you have something simple, like checking if some value is a string, it is quite easy, but if you are validating some more complex structure with different data types. That can get much more complicated. For that, there are libraries like Yup, which I am going to cover in the rest of this post.

Installation

Yup installation is quite simple. All you need to do is either add it to your package.json file or run the following command:

npm run install -S yup

Basics

It all starts by defining schema, and yup comes with a whole range of built-in, flexible, options for basic types, and options to build more complex ones.

const schema = yup.object().shape({
  // object schema
});