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
- Event Driven Architecture: A Practical Guide in Javascript
- Best Practices For Case Styles: Camel, Pascal, Snake, and Kebab Case In Node And Javascript
- After 6 years of practicing MongoDB, Here are my thoughts on MongoDB vs MySQL
Packages & Libraries
- Collections: Your ultimate Javascript Arrays Manager
- Supportive Is: an elegant utility to check types of values in JavaScript
- Localization: An agnostic i18n package to manage localization in your project
React Js Packages
Courses (Articles)
Top comments (0)