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)
>;

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)
>;

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 = {};

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,
  };

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;

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;
    }
  }
}

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);
    });
  }
}

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

useFetcher: easiest way to fetch data in React Js

Courses (Articles)

Blog