Template literal types in the Vuex | by Przemyslaw Jan Beigert | Nov, 2021

Przemyslaw Jan Beigert

TypeScript 4.1 introduced template literal types. On the first look it doesn’t sound interesting, it allows the creation of a union of literal types based on other ones.

However there’s couple of cases when this feature is very useful.

After that TypeScript will throw compilation error when someone will dispatch/commit action/mutation with a wrong payload. e.g:

But what about the case when we need to dispatch action from module2? Module1ActionContext doesn’t know about actions and mutations from another namespace. To let him know we need to add something like this:

Sounds good but we have to call dispatch with ${module2Namespace}/actionB2 not a actionB2. So best we ca do is type cast

Looks like type safe code however ${module2Namespace}/actionB2 as 'actionB2' is a duplication, compiler should knows which actions we are dispatching. Also we have to remember about { root: true } because TS wouldn’t throw error when this parts is missing.

After update TypeScript to 4.1+ (and prettier to 2.0+) we are allow to declare context like this

This syntax means we’re mapping union actionB1 | actionB2into module2Namespace/actionB1 | module2Namespace/actionB2. It’s almost perfect, almost…

By default value like this ${module2Namespace}/actionB2 is typed as string not a literal. To change that we can use as const:

So we changed as actionB2 into as const . Great success? Yes because with as const there’s no duplication and you can not make bug like this: dispatch({module2Namespace}/actionB2 as actionB1, actionB1Payload)with payload from actionB1 without notice that in the compilation message.

This is not first TypeScript feature which looks silly but with time become useful.

Source link

Latest articles

Related articles

Leave a reply

Please enter your comment!
Please enter your name here