88-Nodejs Course 2023: Resource: Resource Typings
Tags: node, typescript, mongodb, fastify
Published: 2022-12-04 20:01:08

---
title: 88-Nodejs Course 2023: Resource: Resource Typings
published: true
description: 
series: Nodejs Course 2023
tags: nodejs, typescript, mongodb, fastify
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/50smol81x88lucrplg1w.png
# Use a ratio of 100:42 for best results.
---

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.

```ts
// 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.

```ts
// 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.

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

export default class Resource {
  /**
   * Output shape
   */
  protected output: ResourceOutput = {};
```

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

```ts
// 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.

```ts
// 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.

```ts
// 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.

```ts
// 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](https://www.paypal.com/paypalme/hassanzohdy), 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](https://github.com/hassanzohdy/nodejs-2023)

## 😍 Join our community

Join our community on [Discord](https://discord.gg/pb2vmdfhGf) 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](https://www.youtube.com/playlist?list=PLGO8ntvxgiZMJc7RN2lIq9WmMOlWZGzmz), 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

* [Event Driven Architecture: A Practical Guide in Javascript](https://dev.to/hassanzohdy/event-driven-architecture-the-best-paradigm-that-i-love-to-work-with-in-javascript-and-node-js-1gnk)
* [Best Practices For Case Styles: Camel, Pascal, Snake, and Kebab Case In Node And Javascript](https://dev.to/hassanzohdy/best-practices-for-case-styles-camel-pascal-snake-and-kebab-case-in-node-and-javascript-55oi)
* [After 6 years of practicing MongoDB, Here are my thoughts on MongoDB vs MySQL
](https://dev.to/hassanzohdy/after-6-years-of-practicing-mongodb-here-are-my-thoughts-on-mongodb-vs-mysql-574b)

Packages & Libraries

* [Collections: Your ultimate Javascript Arrays Manager](https://dev.to/hassanzohdy/collections-your-ultimate-javascript-array-handler-3o15)
* [Supportive Is: an elegant utility to check types of values in JavaScript](https://dev.to/hassanzohdy/supportive-is-an-elegant-utility-to-check-types-of-values-in-javascript-1b3e)
* [Localization: An agnostic i18n package to manage localization in your project](https://dev.to/hassanzohdy/mongez-localization-the-simplest-way-to-translate-your-website-regardless-your-favorite-framework-4gi3)

 React Js Packages

* [useFetcher: easiest way to fetch data in React Js](https://dev.to/hassanzohdy/usefetcher-the-easiest-way-to-fetch-data-in-react-45o9)

Courses (Articles)

* [OOP In JS And TS From The Very Beginning](https://dev.to/hassanzohdy/jsts-oop-course-1-introduction-2ld)
* [ES6++: The Ultimate Guide to ES6 and Beyond](https://dev.to/hassanzohdy/es6-1-introduction-h3e)
* [React Js: Let"s Create File Manager With React Js and Node Js](https://dev.to/hassanzohdy/lets-create-a-file-manager-from-scratch-with-react-and-typescript-chapter-i-a-good-way-to-expand-your-experience-5g4k)