Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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

biga816
TypeScriptが好き。
http://tanakas.org/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away