[0.15.10] Typescript support

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.

feech

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

paul

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

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…

Install packages: typescript and ts-loader
Use the extendWebpack code I posted above in quasar.conf.js
Add tsconfig.json in the project root. Here’s a sample that I use, but obviously customize to how you like it.
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:

No typings for quasar plugins, components, etc. so I write a lot of .d.ts definitions as I go.
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.

paul

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

nothingismagick

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

feech

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!

nothingismagick

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

Emptyless

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

mesqueeb

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

No More Posting New Topics!

[0.15.10] Typescript support