DEV Community: Andrea

Vue component's props quirks while working with TypeScript

Andrea — Sat, 27 May 2023 14:23:46 +0000

Vue and TypeScript, such a complicated relationship! 🤯

A common pitfall comes while defining component's props, which are defined through a structure that provide a sort of "lightweight" type checking for props validation.

This can generate some misunderstandings, it doesn't actually work as type checker, since those type checks and validators are runtime guards, this explains why the type property supports just the native objects (Runtime Type Checks).

Let's add TypeScript

What I said above it doesn't change if you add TypeScript on the equation, those runtime validators still exists and required. So, maybe you might expect to write something like:

<script setup>
type MyCustomType = 'Hello' | 'World'
const props = defineProps({
  myProps: {
    type: MyCustomType
  }
})
// ...
</script>

The code above will results in:

This happens because you're trying to mix runtime validations with static type checking.

Solution 1

You can fully rely on TypeScript checking:

type MyCustomType = 'Hello' | 'World'
const props = defineProps<{
    test: MyCustomType
}>()
// ...
</script>

In this way you have solved the error, but you won't be able to provide custom validators.

Solution 2

Rely on type assertions:

type MyCustomType = 'Hello' | 'World'
const props = defineProps({
  myProps: {
    type: String as PropType<MyCustomType>
    validator: (value: MyCustomType) => {
       // your custom validation
    },
  }
})
// ...
</script>

Conclusion

As shown above, Vue might seem a little bit tricky while working alongside TypeScript, though it has taken steps onward, and still does.

How does it work Vue2 reactivity system?

Andrea — Sun, 21 Feb 2021 16:50:30 +0000

Quite often, as developers, we tend to use many frameworks and libraries as a black box, without really understanding what's going on under the hood. And that is okay, in fact is great we can effectively work with a library without worrying about how it works.

But though this concept of abstraction is important, understanding the basic concepts behind how a library/framework works is equally important.

Here we'll see which are the basic concepts behind Vue2 reactivity system. Believe or not, there's nothing magical on it, you can achieve the same behavior with plain JavaScript.

Object.defineProperty() method

The main responsible for reactivity is a static method in Object class, defineProperty().

This method was introduced by ES5, and allows us to add a new object property, or define a new one, the difference from a simple assignment is that you can define some more details about the property.

Object.defineProperty(obj, propertyName, descriptor) accepts three arguments:

obj, the object on which to define the property
propertyName, the name of the property to be defined or modified
descriptor, the descriptor for the property being defined or modified

The obj and propertyName should not require any further explanations, instead descriptor does.

There are two types of descriptors: data descriptors and accessor descriptor.

Data descriptors are meant to define regular properties, so beyond the property value, you can define three additional flags: which define which actions are allowed on a specific object property.

Accessor descriptor, are more interesting for our purpose. Such descriptor is defined by a getter/setter pair of functions, and supports the following flags: configurable and enumerable. Inside get/set the value of this is set to object through which the property is accessed.

💡 You can dive deeper on how descriptor flags affect the property on MDN.

How that can be useful for reactivity?

You may asking how this Object.defineProperty() might be useful for reactivity purpose, it's quite normal, with such simple example. So let me explain in words what is going on here:

get, let you define a custom function to read a property, no big computation here... most of the times you'll simply return a property's value
set, let you define a custom functions to set a property... when you land here, two things are given for sure: the property's value has been changed and you can run whatever you want.

The set definition should have hint you something...

Let's say we have a function, named renderFunction, which automatically retrieve the value of every needed property in order to render our templated HTML, then, every time a setter is accessed renderFunction is called again, and performs the update of our document.

That is the basic logic behind reactivity explained to a 5 years old kid.

Vue2 reactivity in concrete

Okay, let' see an overview about how Vue2 use all this to make things reactive.

Let's break the components of this diagram down.

VirtualDOM, represents our document to be rendered, we don't need to understand how it works for the purpose
Component Render Function, is the function responsible for update the VirtualDOM after every data changes
Watcher, is a core element for the component reactivity. It records all component's dependencies (all the properties involved during rendering process)
Data, is a property registered as dependency for the component, which has its own getter and setter (the ones we talked earlier)

Now let's see the flow of the above diagram.

First render: if a data is accessed, its getter calls the component's watcher which register this data as a dependency. In this way every change on the property will run the code inside its setter function.
The component render function perform the render of the document. A lot more complexity is hidden behind this statement, but it's not the purpose of the article, so a definition like that it's fine.
A data is updated somewhere (no matters where), its setter notify all the watchers which include the data as dependency.
Re-render is triggered by the watcher and performed by render function.

Conclusion

We have seen an overview of Vue2 reactivity system, its workflow, and how it takes advantage of the Object.defineProperty() built-in method. Actually the same logic is behind a lot of modern libraries/frameworks, so take this article as a starting point to understand on your own how your favorite framework's reactivity works.

Some useful resources to dive deeper in this topic:

To better understand the Object.defineProperty():
Understand the reactivity in Vue2:

How to get organized with Notion

Andrea — Fri, 13 Nov 2020 21:14:31 +0000

What is Notion?

Notion is an all-in-one workspace, which provides a tool to take notes, plan and get organized. It can be used either for personal use and team collaboration.

Notion is quite simple to use, no high skills are required, you can use it as simple notes taking app or you can use it to plan things in your life and set reminders. Actually it can be seen as a white canvas which you can paint as you want. You can decide to start using it simple and the evolve based on your needs.

The core elements in Notion are:

Blocks, everything in Notion is a block! With blocks you can build almost whatever you want from simple things like text, headers, lists, etc… until advanced stuff like databases, tables and more.
Page, which is were the blocks are placed, and allow you to define your notebooks.

Nothing is definitive, for example you can transform a text block, or a database into a page!

The possibilities is almost endless.

What is the main competitor of Notion?

Evernote is one of the most popular note taking application, you can use it to take note, collect several type of resources: documents, images, etc…

With Evernote you can create an entire system of notebooks and append tags to categorize your notes into topics.

Evernote has its strengths:

it can rely on a wide community support
integration with several apps like Google Drive, Gmail, Microsoft Teams, etc…
useful feature like document scanning, web clipper, etc…

Evernote doing a great job as block notes, but it doesn't help to improve your productivity and its plans it pricey.

With Notion you can do the same you can do with Evernote and more!

Note that either Notion and Evernote are just tools, none of them two do magic! To get organized and improve your productivity you have to get a method to follow. Given that, you can choose the software which fit more your needs, even a paper notebook if you prefer!

What can you do with Notion?

As said in a previously Notion comes without presets, at first it's a simple white page with no hints. It could be seems useless, but it isn't… That is a the strength of Notion, you can do whatever you want with no limits.

If you don't know how to start, don't worry, start simple! Create some pages to use as notebooks, and put your notes inside. You can always add complexity and move your notes around the pages, nothing will be loss. So it isn't required to find the perfect setup at the first time.

If you are searching ideas to use Notion, here some:

Journaling. You can set up a database (a table for example, you can add as many views as you want) to store your daily journal. It can be useful to create a standard template (yes you can define even templates) to have some commons properties between each day.
Habit tracker. Same thing as Journaling, you can create a database of habits, and track the progress. -Reading list, to keep track of all the books you've read and which you wish to read.
Calendar. Notion provides even calendar, so you can schedule your tasks, view your due dates, set reminders.
Life goals. You can set up a workspace to manage all life goals you are pursuing and plan how to reach them.

These above are only some examples, but you can actually do whatever you want, so don't give yourself limits.

Let's get deeper

Now I want to go a step further, and show how you can use Notion to keep tracked all the projects you are working on and their related resources.

This part isn't meant only for freelancers that have a lot of projects running at the same time, but you can set up your workspace as you want. For example by tracking your life goals.

PARA is an information management system created by Tiago Forte. PARA stands for Projects Areas Resources Archive.

Let's see what means each category:

Projects, a series of tasks linked to a goal, with a deadline. (Hint: I use it to list only the projects I am currently working on and have defined another database which contains all the tasks).
Areas, a sphere of activity with a standard to be maintained over time. (Here you can list the areas of your life, such as Finances, Health, Hobbies, etc…)
Resources, a topic or theme of ongoing interest. (Here you can list all your interests and ideas)
Archive, contains inactive items from the other three categories. (Here you can put all the projects you no longer working on)

PARA is just a framework, it can be adjusted to fit your needs. So if is not for you, don't be afraid and try to apply some changes.

More resources

I've talked about Notion, its basics and PARA a useful method to keep your resources organized. I hope all the info I shared have been useful to someone!

This article is just an overview of Notion, so I encourage you to go deeper and explore yourself the tool and all the productivity methods. If you need info don't be afraid to contact me.

I want to leave you with some useful resources!

Beginners guides to Notion:

Insights PARA method:

An alternative of PARA mehtod:

RadReads - How to implement GTD in Notion

YouTube channels:

Tiago Forte YouTube Channel
Marie Paulin YouTube Channel, she is a master of Notion and make absolutely great videos about it.
Keep Productive, do amazing videos to improve your prouctivity.

If you want read more about Notion, let me know in the comments!