Quasar(Vue.js)をTypeScript化してみる

Vue.jsでハイブリットアプリやPWAを開発するのにQuasarがとても便利そうなので、TypeScript化してみようと思います。

Quasarとは

Vue.jsでクロスプラットフォーム開発ができるフレームワークです。
SPAやPWA、SSR、Mobileアプリ(iOS、Android)、Desktopアプリなどに対応しています。
https://quasar.dev/

MobileアプリとしてはCordovaを使っているようなので、ReactNativeというよりは、IonicやOnsernUIに近いハイブリットアプリのようです。
UI Componentが豊富で、特にDesktopアプリやPC向けのSPAなどを開発する際にあると嬉しいコンポーネントが色々と用意されています。

TypeScript化する

1. Quasar CLIでアプリを作成する

チュートリアルに沿って下記コマンドを実行します。
https://quasar.dev/quasar-cli/installation

$ npm install -g @quasar/cli
$ quasar create hoge-app

2. package.jsonを修正する

Quasar CLIでサービスを稼働しやすくするため、npm scriptsに下記コマンドを追加します。

package.json

"scripts": {
  "dev": "quasar dev",
  "build": "quasar build",
  "build:pwa": "quasar build -m pwa"
}

3. Extensionを追加する

QuasarをTypeScritp化するためのExtensionを追加します。
※まだベータ版のようです。(2019/7/27時点)

$ quasar ext add @quasar/typescript

いくつか設定について聞かれますが、基本はrecommendedかYesで問題ないです。

? Please choose how to derive webpack: Use the fork-ts-checker-webpack-plugin module for type-checking (recommended)
? Rename .js files to .ts (experimental) Yes
? Will you use VSCode for this project? (Adds ESLint and Vetur configuration quirks, you must manually install the extensions) 
Yes
? Generate prettier configuration (ESLint and VScode, if used)? Yes

? Overwrite ".eslintrc.js"? Overwrite

4.TypeScriptライクな表記に変更する

デコレーターを使います。
併せてtsファイルをvueファイルから切り出します。

page/Index.ts

import Vue from 'vue';
import Component from "vue-class-component";

@Component({
  name: 'PageIndex'
})
export default class Index extends Vue {
  public message: string = "This is a test message";
}

page/Index.vue

<template>
  <q-page class="flex flex-center">
    <p>{{message}}</p>
  </q-page>
</template>

<script lang="ts" src="./Index.ts"></script>

5.サービスを起動する

npmコマンドでサービスを起動し、以下のような画面が表示されていればTypeScript化成功です。