TypeScript VS Yup

const createStoreImpl: CreateStoreImpl = (createState) => { type TState = ReturnType type Listener = (state: TState, prevState: TState) => void let state: TState const listeners: Set = new Set() const setState: StoreApi['setState'] = (partial, replace) => { // TODO: Remove type assertion once https://github.com/microsoft/TypeScript/issues/37663 is resolved // https://github.com/microsoft/TypeScript/issues/37663#issuecomment-759728342 const nextState = typeof partial === 'function' ? (partial as (state: TState) => TState)(state) : partial if (!Object.is(nextState, state)) { const previousState = state state = (replace ?? (typeof nextState !== 'object' || nextState === null)) ? (nextState as TState) : Object.assign({}, state, nextState) listeners.forEach((listener) => listener(state, previousState)) } } const getState: StoreApi['getState'] = () => state const getInitialState: StoreApi['getInitialState'] = () => initialState const subscribe: StoreApi['subscribe'] = (listener) => { listeners.add(listener) // Unsubscribe return () => listeners.delete(listener) } const api = { setState, getState, getInitialState, subscribe } const initialState = (state = createState(setState, getState, api)) return api as any }

Our application will be built using TypeScript and the technical stack will be:

TypeScript is a great "onbuild" for JavaScript that adds static types and helps us catch errors early during development, and even though, sometimes you need to break your brain to type some function it is still wonderful.

const setState: StoreApi['setState'] = (partial, replace) => { // TODO: Remove type assertion once https://github.com/microsoft/TypeScript/issues/37663 is resolved // https://github.com/microsoft/TypeScript/issues/37663#issuecomment-759728342 const nextState = typeof partial === 'function' ? (partial as (state: TState) => TState)(state) : partial if (!Object.is(nextState, state)) { const previousState = state state = (replace ?? (typeof nextState !== 'object' || nextState === null)) ? (nextState as TState) : Object.assign({}, state, nextState) listeners.forEach((listener) => listener(state, previousState)) } }

TypeScript

Each package/app is 100% TypeScript.

As we can see, it has a typing issue as the comment. I quickly searched for solution, then I ended up following up this issue which was open long ago https://github.com/microsoft/TypeScript/issues/30581.

LogTape is a shiny new logging library for JavaScript and TypeScript that's designed with one goal in mind: to make logging simple, flexible, and hassle-free across all your JavaScript environments. Whether you're building applications for Deno, Node.js, Bun, edge functions, or browsers, LogTape has got you covered.

For ease of work, you must use Yup package to smoothly Validate the form data. It is a very popular package used with Form Libraries like React-Hook-Form or Formik. Yup Docs: https://www.npmjs.com/package/yup

You can study more about Formik here and Yup here.

Hello! In this tutorial, you'll learn how to validate an array of strings using Yup validation library. First, you'll learn how to validate a string and then apply it to an array. I recently had this problem where the form requires each input field to not be empty. I'll share in this tutorial how I did it.

*Yup: https://www.npmjs.com/package/yup

As we are only learning the validation method here, I am not going for a detailed explanation of Yup. if you are new to the Yup, here is docs for Yup.

Let’s make our first form! We will create a simple login form with yup schema validator. With yup we can easily define nested object rules which make client-side validation much more easier. Check yup documentation for more details.

Formik and Yup empower you to build robust and user-friendly forms in React. By leveraging their capabilities, you can streamline form management, reduce boilerplate code, and ensure a smooth user experience with clear and effective validation. Refer to the official documentation of Formik https://formik.org/ and Yup https://github.com/jquense/yup for in-depth exploration and advanced use cases.

On the other hand, Formik gives you components that you can mix and match to have fully working forms. Formik has builtin support for Yup for data validation.

I was recently building an application that, among other features, allows a user to submit chess players and chess games to a database. I was utilizing Yup for form schema and Formik for error handling, validation, and form submission.

Sometimes our use case might not require a full-blown form validation library though and we might already have a schema validation library installed in our project such as Zod or Yup. In that case, a simple Vue composable is all that is needed to provide a great form validation UX.