No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    [0.15.10] Typescript support

    Framework
    7
    12
    3469
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • D
      dkr88 last edited by dkr88

      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.

      1 Reply Last reply Reply Quote 1
      • feech
        feech last edited by

        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

        D 1 Reply Last reply Reply Quote 1
        • P
          paul last edited by

          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 🙂

          1 Reply Last reply Reply Quote 0
          • D
            dkr88 @feech last edited by dkr88

            @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.
            E 1 Reply Last reply Reply Quote 3
            • P
              paul last edited by

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

              1 Reply Last reply Reply Quote 0
              • nothingismagick
                nothingismagick last edited by

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

                1 Reply Last reply Reply Quote 0
                • feech
                  feech last edited by

                  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!

                  1 Reply Last reply Reply Quote 0
                  • nothingismagick
                    nothingismagick last edited by

                    @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.

                    1 Reply Last reply Reply Quote 0
                    • E
                      Emptyless @dkr88 last edited by

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

                      1 Reply Last reply Reply Quote 0
                      • mesqueeb
                        mesqueeb last edited by

                        @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.

                        1 Reply Last reply Reply Quote 1
                        • First post
                          Last post