Help us measure site usage?

With your permission, we use self-hosted analytics to understand page usage. It is optional and does not affect the Service. Learn more.

TypeScriptbeginnerwebAI generated

Type-Safe Form Validation Library

Build a small TypeScript library for checking form input, with a readable chained style: field().required().minLength(3).email(). You describe a form's rules once, and TypeScript works out the type of the valid data and of the errors for every field automatically, so a typo in a field name is caught by the editor before the code even runs. You'll write the rules, support custom rules, test everything with Vitest, and package the library with tsup so it could be published to npm. You'll learn TypeScript generics and type inference, designing an easy-to-use API, writing reusable code for other developers, unit testing, and building a package.

Estimate
~9h
Steps
6
Completed by
0
Proposed by
codeseed.app

Vitest · tsup

Project roadmap

  1. 01

    Design the API

    ~1h

    Create a project with TypeScript, Vitest and tsup. Write README.md with examples of how the library will be used: defining a form schema such as { name: field().required().minLength(2), email: field().required().email(), age: number().min(18) }, calling validate(schema, data), and the result: either { ok: true, value } or { ok: false, errors } with messages per field. Done when: README.md shows the API with realistic examples.

  2. 02

    Implement the basic rules

    ~2h

    Create a StringField class where each rule method (required, minLength, maxLength, pattern, email) adds a check to a list and returns the field, so calls can be chained. Each check returns an error message or nothing. Custom messages can be passed as an option. Treat an empty string as missing, except when the field is optional. Done when: a single field validates values correctly.

  3. 03

    Infer types from the schema

    ~2h

    Add a NumberField, and make a schema an object of fields. Write a generic validate<S>(schema: S, data: unknown) where the valid value's type is inferred from the schema (StringField becomes string, NumberField becomes number, optional fields become possibly undefined) and errors has the type Partial<Record<keyof S, string[]>>. Done when: the editor shows the correct inferred types, and using a wrong field name is a compile error.

  4. 04

    Support custom rules

    ~1.5h

    Add .custom(fn, message), where fn receives the value with the right type, and a form-level rule that can compare fields (for example password and confirmPassword must match), reporting the error on a chosen field. Done when: custom rules work with full type checking in the editor.

  5. 05

    Write tests

    ~1.5h

    Write Vitest tests for every rule, chaining, optional fields, custom messages, custom and form-level rules, and data with missing or extra fields. Add type tests with Vitest's expectTypeOf to check the inferred types. Done when: npm test passes, including the type tests.

  6. 06

    Build the package

    ~1h

    Configure tsup to build ESM and CommonJS versions with type declaration files, and set main, module, types and exports in package.json. Check the result with npm pack and by installing the packed file in a small separate project. Done when: the library installs and works in a separate project, with types.

Ready to build this?

Get a GitHub repo and start building. Your AI reviewer checks each step as you go.

~9h · 6 steps

Tech stack

Vitesttsup