Edited at

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化成功です。

Quasar_App.png