I’m working on a few projects using Quasar and Typescript. I got tired of writing my own type guards, and found ts-type-checked which ends up working great. They have an example for webpack, but quasar does some tricks behind the scenes that required a different configuration.

Here’s a snippet of my quasar.config.js that involves getting this to work:

1
2
3
4
5
6
7
8
9
10
11
12
const { configure } = require("quasar/wrappers")
const typeCheckedTransformer = require('ts-type-checked/transformer')

module.exports = configure((ctx) => ({
  supportTS: {
    tsLoaderConfig: {
      getCustomTransformers: (program) => ({
        before: [typeCheckedTransformer(program)],
      }),
    },
  },
...

I had been writing custom type guards for all of my model classes, but now I can just use if (isA<ItemGroup>(newGroup)).