Add the typescript supports to quasar framework

ts-quasar-cli.md

Note: This guide applies to the project created by quasar-cli.

First install typescript and ts-loaderpackages in your project.

npm i -D typescript ts-loader

Then modified the quasar.conf.js file in your project:

function extendTypescriptToWebpack(cfg) {
  // added the type-script supports
  cfg.resolve.extensions.push('.ts')
  cfg.module.rules.push({
    test: /\.ts$/,
    loader: 'ts-loader',
    options: { appendTsSuffixTo: [/\.vue$/] }
  })
}

module.exports = function (ctx) {
  return {
    ...,
    build: {
      ...,
      extendWebpack (cfg) {
        extendTypescriptToWebpack(cfg)
        ...
      }
    },

add tsconfig.json and tslint.json to the root folder of the project:

// tsconfig.json
{
  "compilerOptions": {
    "sourceMap": true,
    "target": "es5",
    "strict": true,
    "experimentalDecorators": true,
    "module": "es2015",
    "moduleResolution": "node"
  },
  "include": [
    "./src/**/*"
  ]
}

// tslint.json
{
  "defaultSeverity": "error",
  "extends": [
      "tslint:recommended"
  ],
  "jsRules": {},
  "rules": {
      "quotemark": [
          true,
          "single"
      ],
      "indent": [
          true
      ],
      "interface-name": [
          false
      ],
      "arrow-parens": false,
      // Pending fix for shorthand property names.
      "object-literal-sort-keys": false
  },
  "rulesDirectory": []
}

Suggest to install vue-class-component and vue-property-decorator.

npm i vue-class-component vue-property-decorator

Now you can use this perfect class and property decorator with typescript.

<!-- src/components/HelloDecorator.vue -->
<template>
    <q-page class="flex flex-center">
        <p class="greeting">Hello {{name}}{{exclamationMarks}}</p>
        <q-btn @click="decrement">-</q-btn>
        <q-btn @click="increment">+</q-btn>
    </q-page>
</template>

<script lang="ts">
import { Vue, Component, Prop } from "vue-property-decorator";
@Component
export default class HelloDecorator extends Vue {
    @Prop() name!: string;
    @Prop({default: 1}) initialEnthusiasm!: number;
    enthusiasm = this.initialEnthusiasm;
    increment() {
        this.enthusiasm++;
    }
    decrement() {
        if (this.enthusiasm > 1) {
            this.enthusiasm--;
        }
    }
    get exclamationMarks(): string {
        return Array(this.enthusiasm + 1).join('!');
    }
}
</script>

<style>
.greeting {
    font-size: 20px;
}
</style>

Or you should use this in vue file:

<!-- src/components/Hello.vue -->
<template>
    <div>
        <div class="greeting">Hello {{name}}{{exclamationMarks}}</div>
        <button @click="decrement">-</button>
        <button @click="increment">+</button>
    </div>
</template>

<script lang="ts">
import Vue from "vue";
export default Vue.extend({
    name: 'Hello',
    props: {name, initialEnthusiasm: {default: 1, type: Number}},
    data() {
        return {
            enthusiasm: this.initialEnthusiasm,
        }
    },
    methods: {
        increment() { this.enthusiasm++; },
        decrement() {
            if (this.enthusiasm > 1) {
                this.enthusiasm--;
            }
        },
    },
    computed: {
        exclamationMarks(): string {
            return Array(this.enthusiasm + 1).join('!');
        }
    }
});
</script>

Kudos from the Quasar Team!

@snowyu How to add preFetch with class decorator?

Thanks for this!