[Typia] I made realtime demo site of 20,000x faster validation (+200x faster JSON stringify)

6/25/2023Jeongho NamOriginal on DEV

#programming#typescript#javascript#opensource

Preface

I’ve made a playground website to help you understand how typia works with AoT compilation.

In here dev.to community, I’ve written many articles introducing my library typia. In the previous articles, I had often explained that typia boosts up validation speed through AoT (Ahead of Time) compilation skill.

typia analyzes your TypeScript type T
typia writes optimal validation code only for that type T
Such skill is called AoT compilation.


// TYPESCRIPT SOURCE CODE
typia.is<number>(3);
typia.createIs<Date>();
 
// COMPILED JAVASCRIPT CODE
((input) => "number" === typeof input)(3);
(input) => input instanceof Date;

By the way, some typia user gave me such feedback:

Reading your articles, I could understand your typia is much faster than others, and it needs only pure TypeScript type. As I’d used ajv and class-validator for a long time, I especially like the word “only one line with pure TypeScript type”.

However, the concept AoT compilation was hard for me to understand. I was able to understand it only after installing typia and compiling my project. Setting it up, I though that such little time even could become a barrier to someone who would hesitate to introduce typia. If typia provides a playground site, this could be solved.

Hope typia thrives, and appreciate for developing such wonderful project.

Reading above feedback, I’ve decided develop a playground website sympathizing with the need of it. Developing the playground website, I think the above feedback was really good for typia, and early experienced playground users are satisfying. I especially thanks for such adviding.

Anyway, let’s play typia and understand how it works with AoT compilation.

Playground website: https://typia.io/playground
Github Repository: https://github.com/samchon
Guide Documents: https://typia.io

Playground Screenshot

What `typia` is

Introduction


// RUNTIME VALIDATORS
export function is<T>(input: unknown | T): input is T; // returns boolean
export function assert<T>(input: unknown | T): T; // throws TypeGuardError
export function validate<T>(input: unknown | T): IValidation<T>; // detailed
export const customValidators: CustomValidatorMap; // customizable
 
// ENHANCED JSON
export function application<...Args>(): IJsonApplication; // JSON schema
export function assertParse<T>(input: string): T; // type safe parser
export function assertStringify<T>(input: T): string; // safe and faster
    // +) isParse, validateParse 
    // +) stringify, isStringify, validateStringify
 
// RANDOM DATA GENERATOR
export function random<T>(g?: Partial<IRandomGenerator>): Primitive<T>;

Someone people do not know typia, I’ll introduce it shortly.

typia is a transformer library supporting below features.

Super-fast Runtime Validators
Safe JSON parse and fast stringify functions
JSON schema generator
Random data generator

Pure TypeScript Type

At first, as typia performs AoT (Ahead of Time) compilation, all of supported features in typia require only one line. Besides, other libraries like ajv or class-validator require extra schema definition like JSON schema or triple-duplicated type definition with decorator function calls.


//----
// TYPIA SCHEMA
//----
// TYPIA NEEDS ONLY PURE TYPESCRIPT TYPE
export interface IBbsArticle {
    files: IAttachmentFile[];
}
typia.assert<IBbsArticle>(input);
 
//----
// CLASS-TARNSFORMER
//----
// BESIDES, OTHERS NEED EXTRA-SCHEMA DEFINITION
export class BbsArticle {
    @ApiProperty({
        type: () => AttachmentFile,
        nullable: true,
        isArray: true,
        minItems: 1,
        description: "List of attached files.",
    })
    @Type(() => AttachmentFile)
    @IsArray()
    @IsObject({ each: true })
    @ValidateNested({ each: true })
    public files: AttachmentFile[];
}
validateSync(plainToObject(BbsArticle, input));

Stability

About functionality and stability, typia supports every TypeScript types, and ensure safety through over 900,000 LoC (Line of Codes) test programs. It actually validates every TypeScript type cases, with strong and wide test cases. Below table is the result of such strong testing.

Besides, other libraries are not intending to safety like typia. For an example, class-validator is composed with only 16 test functions, and missing most type cases. I think the reason why class-validator fails in the most type case is that, it does not have enough test cases.

Components	`typia`	`TypeBox`	`ajv`	`io-ts`	`zod`	`C.V.`
Easy to use	✅	❌	❌	❌	❌	❌
Object (simple)	✔	✔	✔	✔	✔	✔
Object (hierarchical)	✔	✔	✔	✔	✔	✔
Object (recursive)	✔	❌	✔	✔	✔	✔
Object (union, implicit)	✅	❌	❌	❌	❌	❌
Object (union, explicit)	✔	✔	✔	✔	✔	❌
Object (additional tags)	✔	✔	✔	✔	✔	✔
Object (template literal types)	✔	✔	✔	❌	❌	❌
Object (dynamic properties)	✔	✔	✔	❌	❌	❌
Array (rest tuple)	✅	❌	❌	❌	❌	❌
Array (hierarchical)	✔	✔	✔	✔	✔	✔
Array (recursive)	✔	✔	✔	✔	✔	❌
Array (recursive, union)	✔	✔	❌	✔	✔	❌
Array (R+U, implicit)	✅	❌	❌	❌	❌	❌
Array (repeated)	✅	❌	❌	❌	❌	❌
Array (repeated, union)	✅	❌	❌	❌	❌	❌
Ultimate Union Type	✅	❌	❌	❌	❌	❌

C.V. means class-validator

Performance

About performance, typia is the fastest library in the world.

As you know, typia generates dedicated validation codes for each types. And those codes are optimized considering characteristics of v8 engine (especially about hidden class). Below graphes are the result of such optimization.

assert

Validation is 20,000x faster than class-validator

stringify

JSON serialization is 200x faster than class-transformer

server performance

Such performance even affects to the server side -> 30x up

Monaco Editor

https://microsoft.github.io/monaco-editor/

I think there would be someone who are interested in the way to build the playground website. For such people, I’ll introduce how I did it shortly.

At first, I’ve made typia playground website through monaco editor. It is a web-based single-file editor, and supports TypeScript language with external node_modules. As you can see in typia playground website, it even supports auto-completion with type-hints like VsCode.

As you know, typia performs AoT (Ahead of Time) compilation and generates dedicated validation codes for each TypeScript types. Therefore, I combined above monaco editor with bundled typia and typescript modules. Also, for auto-completion with type hints, I’ve hard copied d.ts (definition) files of typia into the monaco editor like below.

Reading monaco manual and referencing my key source files, you may enoughly possible to build your own playground website. Good luck!

Key source files


export const RAW: [file: string, content: string][] = [
  ["file:///node_modules/typia/package.json", typia_packageJson],
  ["file:///node_modules/typia/index.d.ts", typia_index],
  ["file:///node_modules/typia/lib/CustomValidatorMap.d.ts", typia_lib_CustomValidatorMap],
  ["file:///node_modules/typia/lib/executable/setup/ArgumentParser.d.ts", typia_lib_executable_setup_ArgumentParser],
  ["file:///node_modules/typia/lib/executable/setup/CommandExecutor.d.ts", typia_lib_executable_setup_CommandExecutor],
  ["file:///node_modules/typia/lib/executable/setup/FileRetriever.d.ts", typia_lib_executable_setup_FileRetriever],
  ["file:///node_modules/typia/lib/executable/setup/PackageManager.d.ts", typia_lib_executable_setup_PackageManager],
  ["file:///node_modules/typia/lib/executable/setup/PluginConfigurator.d.ts", typia_lib_executable_setup_PluginConfigurator],
  ["file:///node_modules/typia/lib/executable/typia.d.ts", typia_lib_executable_typia],
  ["file:///node_modules/typia/lib/executable/TypiaGenerateWizard.d.ts", typia_lib_executable_TypiaGenerateWizard],
  ["file:///node_modules/typia/lib/executable/TypiaSetupWizard.d.ts", typia_lib_executable_TypiaSetupWizard],
  ["file:///node_modules/typia/lib/factories/CommentFactory.d.ts", typia_lib_factories_CommentFactory],
  ["file:///node_modules/typia/lib/factories/ExpressionFactory.d.ts", typia_lib_factories_ExpressionFactory],
  ["file:///node_modules/typia/lib/factories/IdentifierFactory.d.ts", typia_lib_factories_IdentifierFactory],
  ...
];
for (const [file, content] of RAW)
    monaco.languages.typescript.typescriptDefaults.addExtraLib(
        content, 
        file
    );