24 Followers
·
Follow

Image for post
Image for post
Thanks to Good Free Photos.

Vetur had destroyed my enjoyment of programming. The experience it provides in the IDE is too degraded. Most of the refactoring features of the TypeScript code don’t work, there are bugs with monorepos, and so on. With my TypeScript developer team, we spend maybe 95% of our time on TypeScript code, 4% on the SCSS code (yes, we have a designer who write most of the CSS for us), and we can generously count 1% of our time spent on the HTML code. This is why an HTML container is a bad format to write a web application.

Therefore, a year ago, we switched to the old method and abandoned SFC and its weird .vue format. But since then, we have gradually created tools to import most of the benefits of the .vueformat into JavaScript and TypeScript source files. …


Thanks to Good Free Photos.

In this tutorial, I will show a way to validate, at runtime, the conformity of a JSON configuration file, in any existing project. We will be able to use our own TypeScript definition of the configuration types, with the help of TypeOnly.

Let’s start with a JSON configuration file

Let’s assume we have a Node.js project. In the main directory, the TypeScript source files are in a src/ directory, and the generated JavaScript files are in a dist/ directory. We also have a config.json configuration file like this one:

{
"tmpDir": "/tmp/data",
"httpServer": {
"port": 8212,
"hostName": null
},
"log": {
"level": "trace",
"prettyPrint": true
}
}

A TypeScript definition for the configuration file

TypeScript can help describe this data structure. …


Image for post
Image for post
Thanks to Good Free Photos.

I found a way to use Vuex stores in TypeScript without losing typing. It doesn’t require classes, so it is compatible with Vue 3 and the composition API.

With lightweight wrappers that are fully typed

At runtime, the library direct-vuex will create a wrapper around each getters, mutations and actions. We can use them from outside the store implementation.

So instead of writing:

store.dispatch("myAction", myPayload);

… we write:

store.dispatch.myAction(myPayload);

Or, instead of writing:

store.dispatch("myModule/myAction", myPayload);

… we write:

store.dispatch.myModule.myAction(myPayload);

Getters and mutations are accessible the same way:

store.getters.myModule.myGetter;
store.commit.myModule.myMutation(myPayload);

The types of these wrappers are correctly inferred by TypeScript.

How to create a direct store

The store can be implemented in the same way as usual. …

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store