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化成功です。
Qiitaでも書いています
Quasar(Vue.js)をTypeScript化してみる
The following two tabs change content below.

Akihiro Tanaka
Blockchain Engineer
I worked on Accenture's management, design and development in many services mainly on web and mobile applications for 8 years from 2009.
I encountered Bitcoin in 2013 and is developing block chain related development from 2018.
Love TypeScript.
Blockchain / Ethereum / IPFS / UIUX Design / TypeScript / Angular / Ionic
WEB: http://tanakas.org/
Love TypeScript.
Blockchain / Ethereum / IPFS / UIUX Design / TypeScript / Angular / Ionic
WEB: http://tanakas.org/

最新記事 by Akihiro Tanaka (全て見る)
- ERC1167(Minimal Proxy Contract)で実装するERC20のFacrotyコントラクト - 2020-01-02
- [Ethereum] Docker Composeで動かすPoAコンソーシアム - 2019-12-25
- [Ethereum] DApps開発でgas代行と戦うためのメモ - 2019-12-24