quasarframework/app-extension-typescript

Add TypeScript to your existing Quasar 1.0 JS project

quasar-app-extension-typescript

WARNING

This extension will bring you in sync with Quasar + TS setup as of [email protected] and @quasar/[email protected]

This extension is DEPRECATED and is only meant to ease the transition of pre-existing codebases. For new projects use starter-kit TypeScript option by installing @quasar/cli and running quasar create <project-name>

Check out the official documentation.

ESLint configuration will be overwritten, only Prettier flavour is supported out-of-the-box. airbnb and default configuration should be manually merged using your previous .eslintrc.js or one generated when creating a new Quasar project.

You need to remove this extension and typescript dependency after a successful installation: the extension will only do the migration and there's no point into keeping it after that, while typescript dependency is already provided by @quasar/app

This extension is one-shot and does not provide uninstall script, make sure you've some form of version control in place to perform rollbacks

Add TypeScript to your Quasar project (won't work for 0.x Quasar versions).

For simpler cases, just running this extension will do the job.

For the majority of cases, many tweaks on your side will be needed to fix type or linting issues, take some time when trying the migration.

If you don't trust a software to automatically update your code, you can manually update your project following the official documentation.

Installation

Add the app extension to your project:

$ quasar ext add @quasar/typescript

To test the various build types, cd into test-extension and:

$ yarn
$ quasar ext invoke @quasar/typescript

Fallback

If you experience problems you cannot understand or resolve, copy your src folder (and any project specific configuration) into a freshly created project with TypeScript option enabled. Then proceed to manually update your files to use TypeScript.

To create a new project, run quasar create <your project name> using the global Quasar CLI and enable the TypeScript option.

app-extension-typescript's Issues

Initial lint errors

Steps to reproduce

1. Create a new project:

quasar create example
cd example
quasar ext add @quasar/typescript

2. Run yarn lint

Actual result

babel.config.js
  1:1  error  'module' is not defined  no-undef

quasar.conf.js
    4:1   error    'module' is not defined                             no-undef
    4:28  warning  'ctx' is defined but never used                     @typescript-eslint/no-unused-vars
   82:24  error    'require' is not defined                            no-undef
  110:9   error    Identifier 'background_color' is not in camel case  @typescript-eslint/camelcase
  111:9   error    Identifier 'theme_color' is not in camel case       @typescript-eslint/camelcase
  150:22  warning  'cfg' is defined but never used                     @typescript-eslint/no-unused-vars

Non-Critical: VUE_ROUTER_BASE is string

Not a critical issue.

VUE_ROUTER_BASE is simply a string or undefined.

Reference: https://router.vuejs.org/api/#base

app-extension-typescript/extension/src/templates/base/src/env.d.ts

Line 5 in af76821

VUE_ROUTER_BASE: 'hash' | 'history' | 'abstract' | undefined

solution for vscode adding semicolon in ts based single file components.

Even if in "prettier.semi": false is specified in vsCode settings json file, vscode will add semicolon in the ts part.
This can be avoided when specifying:
"vetur.format.defaultFormatterOptions": {
"prettier": {
"stylelintIntegration": true,
"eslintIntegration": true,
"semi": false,
"singleQuote": true,
"tabWidth": 2
}
}

Boot files cannot be .ts files

When all the files get renamed, it renames boot files to .ts which would be great but they can't be TS files. It seems Quasar looks for js files.

Package manager detection

If we really need to put some dependencies into the project package.json and sequentially run yarn or npm to install them, we should detect in some way which package manages has been used.

Here is how the core package does it.
Maybe adding that function to AE install API could be a way, to avoid redundance.

Property '$q' does not exist on type 'CombinedVueInstance<Vue, ..>

<template>
    <q-btn @click="c"/>
<templage>

<script lang="ts">
import Vue from 'vue';

export default Vue.extend({
    name: "btn",
    methods:{
    c(){
    this.$q.loading.show()
    do_something()
    this.$q.loading.hide()
}
}
    
})
<script>

An ts error would occur.
Property '$q' does not exist on type 'CombinedVueInstance<Vue, ..>

The build breaks when using vue-property-decorator

I have created a simple repository with the bare minimum example

https://github.com/Abuntxa/quasar-demo-typescript

Steps to reproduce the environment:

1. Create a new quasar empty project with the newest quasar-cli (betav1)

quasar create -b dev

2. Add the extension @quasar/typescript with the quasar-cli

quasar ext add @quasar/typescript

3. Add the vue-property-decorator dependency and vue-class-component

yarn add vue-property-decorator vue-class-component

4. Modify Index.vue to make use of the decorator syntax

[BUG] ts-loader not being installed correctly

I'm using Yarn Workspaces for a project, and today I faced a issue with a new installation of the repo.

After the pull of the repo, and yarn install, when I did the dev command, I get some errors that were strange.

After some research and help from @nothingismagick and @hawkeye64 I tried to build the project to see if I get another error, and found this.

The ts-loader packaged that was supposed to be installed with the extension was not being installed correctly with a new pull from the repo of the project.

I had to puth the ts-loader on the project to get working.

ERROR in ./.quasar/app.js
Module not found: Error: Can't resolve 'ts-loader' in '/Users/heitor/Versionamento/INTI/Applications/AccessControl/packages/quasar'
 @ ./.quasar/app.js 15:0-46 19:21-32 19:50-61 21:7-18
 @ ./.quasar/client-entry.js
 @ multi ./.quasar/client-entry.js

ERROR in ./src/boot/socket/accessControl.js
Module not found: Error: Can't resolve 'ts-loader' in '/Users/heitor/Versionamento/INTI/Applications/AccessControl/packages/quasar'
 @ ./src/boot/socket/accessControl.js 1:0-75 4:30-49
 @ ./.quasar/client-entry.js
 @ multi ./.quasar/client-entry.js

ERROR in ./src/socket/intervalEvents.js
Module not found: Error: Can't resolve 'ts-loader' in '/Users/heitor/Versionamento/INTI/Applications/AccessControl/packages/quasar'
 @ ./src/socket/intervalEvents.js 9:0-80 77:79-102
 @ /Users/heitor/Versionamento/INTI/Applications/AccessControl/node_modules/babel-loader/lib??ref--1-0!/Users/heitor/Versionamento/INTI/Applications/AccessControl/node_modules/@quasar/app/node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=script&lang=js&
 @ ./src/App.vue?vue&type=script&lang=js&
 @ ./src/App.vue
 @ ./.quasar/app.js
 @ ./.quasar/client-entry.js
 @ multi ./.quasar/client-entry.js

Linting vue is slow

Steps to reproduce

1. Create a new project:

quasar create example
cd example
quasar ext add @quasar/typescript

2. Fix all the errors (see #31)

without vue < 5 sec

eslint --ext .js,.ts --ignore-path .gitignore ./

✨ Done in 3.85s.

with vue > 5 sec

eslint --ext .js,.ts,.vue --ignore-path .gitignore ./

✨ Done in 8.55s.

tsconfig.json error for babel config file

An error is reported at tsconfig.json about babel.config.js being overwritten after build or something like that.

This answer explain it's cause, while this reflect our current scenario: it's Quasar app who decide to generate into dist folder, but TS extension doesn't know about this (because it's probably managed at a lower level via Webpack) and complains.

It can be fixed by changing options like this:

{
  "compilerOptions": {
    "allowJs": true,
    "sourceMap": true,
    "target": "es6",
    "strict": true,
    "experimentalDecorators": true,
    "module": "esnext",
    "moduleResolution": "node",
    "baseUrl": ".",
    "outDir": "./dist" // <- Add this
  },
  "exclude": ["node_modules", "dist"] // <- Add "dist" to "exclude" array
}

EDIT
or (preferred, if you are not using this configuration also to directly compile files) like this

{
  "compilerOptions": {
    "allowJs": true,
    "sourceMap": true,
    "target": "es6",
    "strict": true,
    "experimentalDecorators": true,
    "module": "esnext",
    "moduleResolution": "node",
    "baseUrl": ".",
    "noEmit": true // <- Add this
  },
  "exclude": ["node_modules"]
}

Output is managed by Webpack, so we don't really need TypeScript to emit any file.

performance problem when using @quasar/typescript

Since I added @quasar/typescript for using typescript in my project, my debug is quite slow, some time for quasar dev I should wait around 10 minutes, furthermore, after running when I save my changes I have to wait at least 30 seconds to see my changes.

because I'm working on a project with a limited deadline, it is an acute problem for me

Meta shim

I think, we may add default shim for Meta plugin. Something like

declare module 'vue/types/options' {
  interface ComponentOptions<V extends Vue> {
    meta?: any;
  }
}

Converting all files converts store / router and shouldn't

It seems router / store require there to be an index.js file so perhaps it shouldn't rename them.

Integrate typescript-eslint v2 as soon as becomes stable

typescript-eslint/typescript-eslint#501 (comment)

typescript-eslint v2 will be released as stable in a couple of weeks and contains some fixes for problems we noticed while moving away from TSLint

It must be updated after the release

Remove Prettier explanations from no-prettier setup

app-extension-typescript/extension/src/templates/noprettier/_eslintrc.js

Lines 26 to 28 in 694023d

	// Prettier has not been included as plugin to avoid performance impact
	// See https://github.com/typescript-eslint/typescript-eslint/issues/389#issuecomment-509292674
	// Add it as an extension

This lines should be removed into no-prettier setup

Quasar Layout <router-view> bug with Typescript

Describe the bug
When adding this extension to a brand new Quasar project and then running "quasar dev" I get a <router-view> error in the console window in Google Chrome.

To Reproduce

1. Install quasar via quasar create, with default options
2. Install this extension via quasar ext add @quasar/typescript, with default options
3. Run the dev environment via quasar dev
4. In the web browser of your choice, open the console
   You should notice an error that says:

[Vue warn]: Unknown custom element: <router-view> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
found in
---> <MyLayout> at src/layouts/MyLayout.vue
       <App> at src/App.vue
         <Root>

Platform (please complete the following information):
OS: Windows 10
Node: 10.16.3
NPM: 6.9.0
Yarn: N/A, although I did also try with the latest Yarn and fresh install (total new project) with the same result
Browsers: Google Chrome

Additional context
Even after installing the extension, if you revert it back to the original script section, it works with no error. I've also tried it two different typescript implementations and still had the same problem.

TS Implementations:

export default class MyLayout extends Vue {}

and

export default Vue.extend({})

Installed original script:

<script>
import { openURL } from "quasar";

export default {
  name: "MyLayout",
  data() {
    return {
      leftDrawerOpen: false
    };
  },
  methods: {
    openURL
  }
};
</script>

Error when using Component Decorator

When using the "vue-property-decorator" the following error occurs:
Parsing error: Using the export keyword between a decorator and a class is not allowed. Please use export @dec class instead.
Can be fixed by adding this to the .eslintrc.js parserOptions:
{ parserOptions: { ecmaFeatures: { legacyDecorators: true } } }

Move back typescript and typescript-eslint dependencies to AE deps

As said here, we should move back typescript and typescript-eslint dependencies into AE dependencies (also @types/node at this point?) until the whole ecosystem dependency mechanism is better defined.

Extending the .vscode/settings.json fails if it's JSON5

👋 ,

I've stumbled across an issue trying to install this package with: quasar ext add @quasar/typescript.

When I choose "Yes" for the VSCode question, the installer bails out with this error:

UnhandledPromiseRejectionWarning: SyntaxError: vscode/settings.json: Unexpected token } in JSON at position 524

This is caused by a trailing comma in the existing settings.json:

{
  "[vue]": {
    "editor.formatOnSave": true,
    // trailing comma here
    "editor.formatOnPaste": true,
  },
  "eslint.validate": [
      "javascript",
      "javascriptreact",
      "vue"
  ]
}

This is not valid JSON, but it is valid JSON5 which VSCode is using for their setting files.

Full Log:

? 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

app:extension-manager Updating /quasar.extensions.json for "@quasar/typescript" extension ... +21s
app:extension Running App Extension install script... +16ms
(node:21189) UnhandledPromiseRejectionWarning: SyntaxError: vscode/settings.json: Unexpected token } in JSON at position 524

• JSON.parse

• loader.js:987 Object.Module._extensions..json
  internal/modules/cjs/loader.js:987:27

• loader.js:812 Module.load
  internal/modules/cjs/loader.js:812:32

• loader.js:724 Function.Module._load
  internal/modules/cjs/loader.js:724:14

• loader.js:849 Module.require
  internal/modules/cjs/loader.js:849:19

• helpers.js:74 require
  internal/modules/cjs/helpers.js:74:18

• InstallAPI.js:214 InstallAPI.extendJsonFile
  [frontend]/[@quasar]/app/lib/app-extension/InstallAPI.js:214:48

• install.js:42 module.exports
  [frontend]/[@quasar]/quasar-app-extension-typescript/src/install.js:42:9

• Extension.js:326 Extension.__runInstallScript
  [frontend]/[@quasar]/app/lib/app-extension/Extension.js:326:11

• Extension.js:163 Extension.install
  [frontend]/[@quasar]/app/lib/app-extension/Extension.js:163:30

(node:21189) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 2)
(node:21189) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

Thanks for reading and have a great day!

Upgrade to ESLint 6

This is more a whole-project stuff, but here I'm gonna list dependencies which need to update to ESLint6 to guarantee compatiblity and related links.

Note that ESLint currently works out-of-the-box even with older dependencies, but it fires off a warning.

• @typescript-eslint/eslint-plugin and @typescript-eslint/parser will support ESLint 6 in a couple of weeks #23
• @vue/eslint-plugin-vue will support ESLint 6 in next release vuejs/eslint-plugin-vue#920
• eslint-config-prettier already supports ESLint 6
• eslint-loader seems to already support ESLint 6, but I cannot be sure because Github is having some severe server failure right now

Installation script should check for ESLint dependencies presence

Currently the installation script take as assumptiom that ESLint dependencies are already installed by the core, but I guess this is not always the case.
At the very least we should use hasPackage to check for all packages needed by the extension, but that could already be there from the initial project creation.

This could be due to the fact that ESLint is not mandatory, but added when the project is created.
It must also be decided where these dependencies should be put, as per #22 (comment)

Should them be put into AE dependencies? Or as peerDependencies? Or added to the user project package.json?

Installation problem (Windows 10)

Below is my output after doing "> quasar ext add @quasar/typescript"
Seems to be successful and then an error afterwards? Perhaps related to this (https://stackoverflow.com/questions/37459717/error-spawn-enoent-on-windows)?

 app:extension Installing "@quasar/typescript" Quasar App Extension +0ms

 app:extension Retrieving "@quasar/quasar-app-extension-typescript"... +5ms
 app:spawn [sync] Running "npm install --save-dev @quasar/quasar-app-extension-typescript" +1ms

npm WARN [email protected] requires a peer of typescript@* but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of tslint@^4.0.0 || ^5.0.0 but none is installed. You must install peer dependencies yourself.npm WARN [email protected] requires a peer of typescript@^2.1.0 || ^3.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\webpack-dev-server\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\watchpack\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fork-ts-checker-webpack-plugin\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ @quasar/[email protected]
added 41 packages from 39 contributors and audited 16930 packages in 34.324s
found 0 vulnerabilities



   ╭────────────────────────────────────────────────────────────────╮
   │                                                                │
   │      New minor version of npm available! 6.9.0 -> 6.10.3       │
   │   Changelog: https://github.com/npm/cli/releases/tag/v6.10.3   │
   │               Run npm install -g npm to update!                │
   │                                                                │
   ╰────────────────────────────────────────────────────────────────╯
? 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

 app:extension-manager Updating /quasar.extensions.json for "@quasar/typescript" extension ... +3m
 app:extension Running App Extension install script... +42ms

We could not automatically update your quasar.conf.js to
use typescript. Quasar looks for *.js files by default.
Please add this to your quasar.conf.js:

sourceFiles: {
  router: 'src/router/index.ts',
  store: 'src/store/index.ts'
}

 app:extension Updating dependencies... +1s
 app:spawn [sync] Running "npm install" +14ms

npm WARN [email protected] requires a peer of tslint@^4.0.0 ||
^5.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN @typescript-eslint/[email protected] requires a peer of eslint@^5.0.0
but none is installed. You must install peer dependencies yourself.
npm WARN @typescript-eslint/[email protected] requires a peer of eslint@^5.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of eslint@>=3.14.1 but none
is installed. You must install peer dependencies yourself.
npm WARN @typescript-eslint/[email protected] requires a peer of eslint@*
but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\webpack-dev-server\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\watchpack\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fork-ts-checker-webpack-plugin\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

added 16 packages from 14 contributors, updated 1 package and audited 16965 packages in 40.648s
found 0 vulnerabilities

 app:extension Quasar App Extension "@quasar/typescript" successfully installed. +46s

(node:42876) UnhandledPromiseRejectionWarning:   Error: spawn yarn ENOENT

  - enoent.js:6 notFoundError
    [client]/[cross-spawn]/lib/enoent.js:6:26

  - enoent.js:40 verifyENOENT
    [client]/[cross-spawn]/lib/enoent.js:40:16

  - enoent.js:27 ChildProcess.cp.emit
    [client]/[cross-spawn]/lib/enoent.js:27:25

  - child_process.js:248 Process.ChildProcess._handle.onexit
    internal/child_process.js:248:12


(node:42876) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 2)
(node:42876) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

feature request: electron integration

Wondering if electron with typescript could be directly supported by this extension.

tsconfig.json needs baseUrl

It needs "baseUrl": "." so that module resolution will work correctly. I think it might also need some bits to make webpack aliases work but I'll update as I find out more.

File cleanup should take place on uninstall

It currently leaves tsconfig.json in place and I'm not sure what else.

Would be better if it removed them.

When choosing to overwrite files, components aren't done correctly.

export default { is correctly changed to export default Vue.extend({ however, it doesn't add the closing ) to the end of the extend.

Support adding types for boot files (Axios, Vuex, etc)

As seen here, the AE should also check which boot files have been added from the Quasar CLI and add typings to those one too.

How to solve boot file Error with boot.d.ts?

Hi, I'm learning Typescript from Quasar, but I have a question.

In boot files, there would be an error

And I found there is a file called boot.d.ts in @quasar/app/types/boot.d.ts.

My question is how can I combine them to solve this problem?

// src/boot/i18n.ts

export default ({ app }) => {
  app.i18n = i18n // `Error:(13, 19) TS7031: Binding element 'app' implicitly has an 'any' type.`.
}

quasar dev not compiling anymore

Since installing the extension compiling in SPA mode as part of quasar dev randomly freezes at [0%].

Important to note is that so far I have only written a test in typescript. None of the other code is in TS.

I would love to upload a screenshot but github seems to be broken right now.

ProcessEnv is always string | undefined, but the truth is it can be boolean

I have this problem:

// src/store/index.ts
export default function(/* { ssrContext } */) {
  console.log(process.env);

  const Store = new Vuex.Store({
    modules: {
      // example
    },

    // enable strict mode (adds overhead!)
    // for dev mode only
    strict: process.env.DEV
  });

  return Store;
}

ERROR in /src/store/index.ts(23,5):
TS2322: Type 'string | undefined' is not assignable to type 'boolean | undefined'.
  Type 'string' is not assignable to type 'boolean | undefined'.

In env.d.ts, we know this can be set
but
In node_modules/@types/node/globals.d.ts

declare namespace NodeJS {
  interface ProcessEnv {
        [key: string]: string | undefined;
    }
}

So, I have two questions:

1. node env should always be string, then how it came out a boolean??
2. If we don't alter the global.d.ts file, how can we fix this problem by not using this way...

strict: process.env.DEV === true ? true : false

next() in Stepper does not exist on type 'Vue'

Hi 👋🏼

Currently I'm facing a problem with Stepper in TypeScript. Since the this.$refs.stepper.next()does not exist in type Vue. so I can't programmatically navigate the stepper to next panel. Maybe I was missing something to import 😢 because the docs doesn't explain enough with TS

FYI: Currently I'm using Vue CLI

How should I solve this problem?

Integrate linting with official ESLint TypeScript plugin

When you opt-in to eslint feature of quasar-cli, it will inject the eslint-loader to the webpack config. Problem is even if the <script> uses lang="ts" on a SFC, it will still run against it.

// quasar.conf.js
extendWebpack(cfg) {
  cfg.module.rules.push({
    enforce: 'pre',
    test: /\.(js|vue)$/,
    loader: 'eslint-loader',
    exclude: /node_modules/,
  });
},

Sample error when using vue-property-decorator

  33:11  error  Parsing error: Unexpected token

  17 | export default class UserList extends Vue {
  18 |   @Prop({ type: Array, default: () => [] })
> 19 |   readonly users: any[];
     |            ^

Cannot recognize readonly as a keyword since it is only recognized by typescript.

Not sure if the best option is to use tslint-loader. investigate typescript-eslint

Vanilla install will not build

A complete new app with typescript fails to build with error:

ERROR in ../src/router/index.ts(25,11):
TS2591: Cannot find name 'process'. Do you need to install type definitions for node? Try npm i @types/node and then add node to the types field in your tsconfig.

Using yarn: 1.21.1
node: v10.17.0
quasar: 1.4.3
@quasar/quasar-app-extension-typescript: ^1.0.0-beta.2

I created a fresh app with 'quasar create', accepted the default prompts and added ESLint, Vuex, Axios, IE11.

cd into the project directory and run quasar ext add @quasar/typescript and press enter to accept all the defaults.

Run 'quasar b' and the build fails.

If I create an app without the 'experimental' convert .js to .ts files then the app builds ok.

Output from 'quasar info':
Operating System - Linux(3.10.0-1062.9.1.el7.x86_64) - linux/x64
NodeJs - 10.17.0

Global packages
NPM - 6.11.3
yarn - 1.21.1
@quasar/cli - 1.0.5
cordova - Not installed

Important local packages
quasar - 1.6.1 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
@quasar/app - 1.4.3 -- Quasar Framework local CLI
@quasar/extras - 1.3.3 -- Quasar Framework fonts, icons and animations
vue - 2.6.11 -- Reactive, component-oriented view layer for modern web interfaces.
vue-router - 3.1.3 -- Official router for Vue.js 2
vuex - 3.1.2 -- state management for Vue.js
electron - Not installed
electron-packager - Not installed
electron-builder - Not installed
@capacitor/core - Not installed
@capacitor/cli - Not installed
@capacitor/android - Not installed
@capacitor/ios - Not installed
@babel/core - 7.7.7 -- Babel compiler core.
webpack - 4.41.3 -- Packs CommonJs/AMD modules for the browser. Allows to split your codebase into multiple bundles, which can be loaded on demand. Support loaders to preprocess files, i.e. json, jsx, es7, css, less, ... and your custom stuff.
webpack-dev-server - 3.9.0 -- Serves a webpack app. Updates the browser on changes.
workbox-webpack-plugin - 4.3.1 -- A plugin for your Webpack build process, helping you generate a manifest of local files that workbox-sw should precache.
register-service-worker - 1.6.2 -- Script for registering service worker, with hooks

Quasar App Extensions
@quasar/quasar-app-extension-typescript - 1.0.0-beta.2 -- A Quasar CLI Extension

Move TS support to main repo

TypeScript is trasversal to many concerns in a project and is difficult to integrate if it's not done at creation time in the main repo.

The AE should serve as a migration tool for already existing projects.

If you choose not to rename files then quasar conf options can be wrong

The install adds:

sourceFiles: {
      router: 'src/router/index.ts',
      store: 'src/store/index.ts'
    }

But if you select no to the file conversion, it'll omit the .ts and can potentially break the build.

This should either be accounted for (i.e check if route/index is js or ts) or at least warn the users in the docs.