Typescript

druppy

Hi … first, what a nice project Quasar is, really nice work ! I really like the Mobil first approach, that is really a god idea for have that as a main focus !

But, I really need to understand how this framework would work together with things like typescript, as this is one of my main tools for developing app’s at work. Will there be included typings in future npm packages, or is the idea to only support “globally” defined components ?

rstoenescu

You can use whatever technology you like with the framework. Typescript, Coffeescript, SASS/SCSS, … It’s just a matter of adding Webpack loaders to the configuration.

druppy

I understand, typescript can integrate with all js and Quasar is no exception, but in order to take advantage of things like completion and type checking, it at least need a typing file.

Normally this was maintained by a separate typings repos, but as of typescript 2.0 it is now possible to have these typings in the same npm package as the library. All vue2 core elements now has this, and it makes using these a very pleasant experience.

see this

druppy

There is nothing like holidays to dive into new things, like Quasar and my goal to use it along with typescript

I used 0.12 and took a cli version and made it typescript able, and if any other would like to try this out this is what i did :

I added, to include the proper loaders and the System JS definitions (System.* not included in TS) :

npm i --save-dev @types/systemjs
npm i --save-dev ts-loader
npm i --save-dev typescript

The I added the following to build/webpack.base.conf.js:

module: {
    rules: [
       ...
       {
          test: /\.ts$/, 
          loader: 'ts-loader',
          include: projectRoot,
          exclude: /node_modules/,
          options: {
              appendTsSuffixTo: [/\.vue$/]
         }
    },
    ...

This instruct webpack to use typescript on all *.ts files, and a funny hack to make is work inside vue files

Add the file tsconfig.conf holding something like this, primary to make it understand promises and use System include (now that we are using WebPack2) :

{
    "compilerOptions": {
        "module": "es2015",
        "moduleResolution": "node",
        "target": "es5",
        "lib": [
            "dom", 
            "es5", 
            "es2015.promise"
        ],
        "experimentalDecorators": true,
        "noImplicitAny": true,
        "noImplicitThis": true,
        "strictNullChecks": true,
        "removeComments": false
    },
    "exclude": [
        "node_modules"
    ]
}

Now we can rename main.js-> main.ts and change includes to

import * as Vue from 'vue'
import * as Quasar from 'quasar'

and rename 'router.js` -> ‘router.ts’, and change the imports to :

import * as Vue from 'vue'
import * as VueRouter from 'vue-router'

The problem here is that the default exports has a different syntax when using pure System import, we could use this syntax in pure javascript, but this is really up to the template.

Last but not leased, add the following file src/index.d.ts holding the following content :

declare module "quasar"

declare module "*.vue" {
    const content: any;
    export default content;
}

// Defined in webpack DefinePlugin
declare var PROD: boolean;
declare var DEV: boolean;
declare var __THEME: string;

declare function require(deps: string): any
declare function require(deps: string[], cb: any): any

Some of these i hope will end up inside the quasar module as types, but until now this is a nice start.

After all this work I have a base template that act like the one created by the cli but in pure typescript.

Hope this will be helpful for others, happy typescript hacking.

rstoenescu

@druppy Hey,

Nice work right here. Haven’t used Typescript myself, but seems that you’re off with a pretty good start with Quasar and Typescript. Would you like me to create a starter kit for typescript repo so you could port current starter kit? This would allow people to install the typescript version through the CLI.

What do you say?

druppy

Thanks … I can warmly recommend typescript, it is very powerful for large projects Typescript is a moving target, and at the moment I am able to use both, pure ts files, vue files with lang='ts' inside and when using the next typescript version 2.2 we are able to use tsx syntax (comments with the jsxFactory option).

That is a attractive combination, if you ask me

If you make me a repo, I will gladly setup the changes I just described there.

rstoenescu

@druppy Great. This is the first thing I’ll do in the new year. Happy new year, btw!! Thanks for helping on this!

druppy

@rstoenescu Thanks, same to you. I think 2017 will contain a bit more Quasar that this year Just let me know, where to put it

rstoenescu

@druppy Created a “typescript” branch on app-template-default repo: https://github.com/quasarframework/app-template-default/tree/typescript
Please work on this one. Thanks for your help!

druppy

@rstoenescu Ok, there is a first time for everything i quess, so it is time to make a PR

druppy

@rstoenescu You now have a PR, my first ever

Vertygo

This is not included in latest quasar cli?

rstoenescu

@druppy saw it. will take a look, but not too soon unfortunately. focusing on v0.13.2 and v0.14. Need to release these as soon as possible.

druppy

I am also working on a d.ts definition file, and I even have a more clean single webpack2 setup. But lets see what how it all looks when 0.14 is released, and then we may use all this in the next template, and maybe even get the definition file in quasar itself

icfr

i have do a PR to add typescript definition to quasar here

druppy

That looks very good, I am looking forward to test this out when it enters edge, as soon as it is in dev branch we can start using an hammer on it.

rstoenescu

@druppy what’s your Gitter id? Seems like we could use your skills as a TS developer in the team to deal with Typescript (be a maintainer).

druppy

@rstoenescu I thinks its the same id as here, I just use my github account, just not much of a gitter chat guy (I am very bad at multitasking) But besides that, it would be really nice to make sure quasar has a god definition file for typescript, as I use these anyway.

rstoenescu

Added. Please leave it open in the background. We need a fast way to communicate.

druppy

Ok, I will, as long as it is low traffic

No More Posting New Topics!

Typescript