DEV Community ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ‘จโ€๐Ÿ’ป

Cover image for 88-Nodejs Course 2023: Resource: Resource Typings
Hasan Zohdy
Hasan Zohdy

Posted on

88-Nodejs Course 2023: Resource: Resource Typings

Before we get started, follow the following section pleeeeese.

Regular Package Update

A gentle reminder, don't forget to update your packages while you're still working on the project.

Run

yarn update

And return back the version of chalk to 4.

Now run yarn install

Resource typings

This is going to be a light article, we'll just enhance our Resource class a little bit and some typings inside it.

Output Type

We already said that the output property is an object that its key's value is either a built in cast, or a reference to another resource or a custom function, so let's define that type.

// src/core/resources/resource.ts

/**
 * Resource output
 */
export type ResourceOutput = Record<
  string,
  OutputCastType | typeof Resource | ((value: any) => Promise<any> | any)
>;
Enter fullscreen mode Exit fullscreen mode

This is the type of the Resource output, now let's define our OutputCastType type.

// src/core/resources/resource.ts

/**
 * Output cast type
 */

export type OutputCastType =
  | "string"
  | "number"
  | "boolean"
  | "float"
  | "integer"
  | "double"
  | "date"
  | "url"
  | "uploadsUrl"
  | "publicUrl"
  | "assetsUrl";

/**
 * Resource output
 */
export type ResourceOutput = Record<
  string,
  OutputCastType | typeof Resource | ((value: any) => Promise<any> | any)
>;
Enter fullscreen mode Exit fullscreen mode

Now let's update the output property to have that type, this will make it easier to autocomplete the output key types.

// src/core/resources/resource.ts
// ...

export default class Resource {
  /**
   * Output shape
   */
  protected output: ResourceOutput = {};
Enter fullscreen mode Exit fullscreen mode

Same applies to our user resource, let's update it.

// src/app/users/resources/user-resource.ts

import Resource, { ResourceOutput } from "core/resources/resource";

export default class UserResource extends Resource {
  /**
   * Output data
   */
  protected output: ResourceOutput = {
    isActive: "boolean",
    isPhoneVerified: "boolean",
    joinDate: "date",
    createdAt: "date",
    updatedAt: "date",
    name: "string",
    email: "string",
    image: "uploadsUrl",
    createdBy: UserResource,
  };
Enter fullscreen mode Exit fullscreen mode

Much better, much cleaner.

Resource Accepted Data Types

The resource constructor receives the resource data that will be transformed in the response output, we need to specify what type of data it accepts, so let's define that type.

// src/core/resources/resource.ts
import { Model } from "core/database";
import { GenericObject } from "@mongez/reinforcements/cjs/types";

/**
 * Allowed resource data
 */
export type ResourceData = GenericObject | typeof Model | typeof Resource;
Enter fullscreen mode Exit fullscreen mode

The GenericObject is just a simple type that is defined as Record<string, any>.

Now let's update the constructor to accept that type.

// src/core/resources/resource.ts
// ...

export default class Resource {
  /**
   * Constructor
   */
  public constructor(protected resource: ResourceData = {}) {
    //
    if (this.resource instanceof Model) {
      this.resource = this.resource.data;
    } else if (this.resource instanceof Resource) {
      this.resource = this.resource.resource;
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

Also we need to update the collect method to accept array of that type only.

// src/core/resources/resource.ts
// ...

export default class Resource {
  /**
   * return list of resources for the given array ouf data
   */
  public static collect(data: ResourceData[]) {
    return data.map(item => {
      return new this(item);
    });
  }
}
Enter fullscreen mode Exit fullscreen mode

And that's it!

๐ŸŽจ Conclusion

That's it for this article, we just enhanced our resource class a little bit, and added some typings to it.

โ˜•โ™จ๏ธ Buy me a Coffee โ™จ๏ธโ˜•

If you enjoy my articles and see it useful to you, you may buy me a coffee, it will help me to keep going and keep creating more content.

๐Ÿš€ Project Repository

You can find the latest updates of this project on Github

๐Ÿ˜ Join our community

Join our community on Discord to get help and support (Node Js 2023 Channel).

๐ŸŽž๏ธ Video Course (Arabic Voice)

If you want to learn this course in video format, you can find it on Youtube, the course is in Arabic language.

๐Ÿ“š Bonus Content ๐Ÿ“š

You may have a look at these articles, it will definitely boost your knowledge and productivity.

General Topics

Packages & Libraries

React Js Packages

Courses (Articles)

Top comments (0)

New programmer and javascript

Stop by this week's meme thread!