Typescript



  • 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 ?


  • Admin

    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.



  • 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



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


  • Admin

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



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


  • Admin

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



  • @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 :-)


  • Admin

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



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



  • @rstoenescu You now have a PR, my first ever :-)



  • This is not included in latest quasar cli?


  • Admin

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



  • 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 :-)


Log in to reply
 

Looks like your connection to Quasar Framework was lost, please wait while we try to reconnect.