Vue.js로 혼합 응용 프로그램과 PWA의 Quasar를 개발하는 것이 편리할 것 같아서 TypeScript화를 사용해 보고 싶습니다.

무엇이 빠른가

Vue.js가 크로스플랫폼 개발을 할 수 있는 프레임워크입니다.
SPA, PWA, SSR, Mobile 응용 프로그램(iOS, Android), Desktop 응용 프로그램 등을 지원합니다.
https://quasar.dev/
모바일 응용 프로그램은 Cordova를 사용한 것 같아서 React Native라기보다는 Ionic와 OnsernUI에 가까운 혼합 응용 프로그램입니다.
UI Component가 풍부하고 특히 데스크톱 응용 프로그램과 PC를 위한 SPA 등을 개발할 때 다양한 반가운 구성 요소가 준비되어 있다.

TypeScript

1. Quasar CLI로 애플리케이션 제작

강좌에 따라 다음 명령을 집행하다.
https://quasar.dev/quasar-cli/installation

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

2. package.수정

Quasar CLI에서 서비스가 실행될 수 있도록 npm scripts에 다음 명령을 추가합니다.
package.json

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

3. 확장 추가

확장자를 추가하여 Quasar 유형 Scritp을 지정합니다.
※ 베타 버전인 것 같습니다.(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에서 쉬운 태그로 변경

장식기를 사용하다.
동시에 vue 파일에서ts 파일을 잘라냅니다.
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화에 성공했습니다.