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.
    • feech
      feech last edited by

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

      1 Reply Last reply Reply Quote 0
      • 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