[0.15.10] Typescript support



  • Hi Quasar community team, could you please confirm that v0.15.10 support Typescript fully? I get the error:

    ERROR  Failed to compile with 1 errors                                                                                                                             09:58:20
    
     error  in ./src/pages/index.vue
    
    Module build failed:   Error: Could not find file: '/.../quasar-typescript-start/src/pages/index.vue'.
    
      - typescript.js:103163 getValidSourceFile
        [quasar-typescript-start]/[typescript]/lib/typescript.js:103163:23
    

    Note that I can setting Typescript with v0.14
    You can see my minimal project to check with Typescript here: https://github.com/dungla4/quasar-typescript-start
    Thank you very much



  • Did you ever get a working version? .15 or .16?



  • For .16, I think the webpack loader config needs to be tweaked a bit so that the ts-loader runs in the correct order, here’s what I use now:

          extendWebpack (cfg) {
            cfg.resolve.extensions.push('.ts')
            cfg.module.rules.splice(0, 0, {
              test: /\.(ts)$/,
              loader: 'ts-loader',
              exclude: /(node_modules|quasar)/,
              options: {
                appendTsSuffixTo: [/\.vue$/]
              }
            })
    

    Also of course important to note that you have to upgrade to the 4.x release of ts-loader to work with webpack 4.



  • Hi dkr88,

    Do you happen to have a sample Quasar 0.16 project with Typescript support working? Lack of out of the box support is killing us right now.

    thanks!
    jasen



  • The quasar creators doesn’t seem to estimate typescript as a major benefit.
    If that would be the case, it would be very interesting to learn why and to learn from it because he is a real guru 🙂



  • @feech said in [0.15.10] Typescript support:

    Hi dkr88,

    Do you happen to have a sample Quasar 0.16 project with Typescript support working? Lack of out of the box support is killing us right now.

    thanks!
    jasen

    It’s actually pretty straightforward…

    1. Install packages: typescript and ts-loader
    2. Use the extendWebpack code I posted above in quasar.conf.js
    3. Add tsconfig.json in the project root. Here’s a sample that I use, but obviously customize to how you like it.
    4. Add vue.d.ts in the src directory so that you can import .vue SFCs

    Now you can use <script lang="ts"> blocks in your .vue SFCs and you can rename your .js plugins, stores, etc. to .ts. Further you can tweak your setup as per https://vuejs.org/v2/guide/typescript.html.

    Main issues:

    1. No typings for quasar plugins, components, etc. so I write a lot of .d.ts definitions as I go.
    2. I use Visual Studio Code with Vetur, but the intellisense is not great in SFCs. Class component annotations (https://github.com/vuejs/vue-class-component) help but are not perfect. Same with vuex, although there are hacks like (https://github.com/istrib/vuex-typescript) that work ok.


  • @dkr88 Wow, thanks for this. Very interesting. When I see the main issues, what are for you the benefits?



  • @dkr88 - I believe @GastroGeek wrote some d.ts definitions recently…



  • It actually hasn’t been simple at all. We had it square-pegged/round-holed for Quasar 0.14 but Quasar 0.16 has been a bit tricky.

    I have managed to get it going though. Have a typescript project now with support for TS in .vue files, but also using external .ts files which I like a bit better.

    Thanks!



  • @paul - "The quasar creators doesn’t seem to estimate typescript as a major benefit."
    This just isn’t true. We are working on it, and would love some feedback from the community. 🙂

    https://github.com/GastroGeek/quasar/tree/typescript/%40types

    Right now, our priority is getting 1.0 shipped, and the feature that is receiving the most focus is SSR.



  • @dkr88 Thanks for the explanation, this helped me implement it!



  • @dkr88 Hi, I need to write a new dashboard for a project, but they requested my to use TS, but I still want to use Quasar!

    I have never written typescript, so I’m just doing some initial research on it, but I think just to do the initial setup I’ll follow your guide in the 5th post in this thread.

    My question: Is it only compatible with 0.15? or also 0.16?

    My reasoning is: if I just setup the base to be TS compatible I can start from the real simple things, and learn TS on the way while typing it.