These are chat archives for TypeStrong/atom-typescript

22nd
May 2015
kpgarrod
@kpgarrod
May 22 2015 06:25
I'm having problems with the type definitions for angularFire (https://github.com/borisyankov/DefinitelyTyped/blob/master/angularfire/angularfire.d.ts). I know it's a bit off-topic but I would really appreciate some help. I have a service which returns an AngularFireObject. AngularFireObject extends AngularFireSimpleObject. AngularFireSimpleObject contains my data. I understand that to be handled by [key: string]: any; in AngularFireSimpleObject. The problem is, when I try to access one of my own property x on that object, I get a ts error: Property x does not exist on type AngularFireObject.
Basarat Ali Syed
@basarat
May 22 2015 07:59
[key:string] will only work if you access like foo['x'] not foo.x
@kpgarrod ^
kpgarrod
@kpgarrod
May 22 2015 08:16
@basarat: aha! Thanks for your support as usual.
kpgarrod
@kpgarrod
May 22 2015 08:22
@basarat: I don't know if you had a look at the angularFire tsd, but I think the implementation is poor. It doesn't seem to give any type protection to user data. I would like AngularFireObject/AngularArrayObject to be generic, so that I can pass the type of my user object and get type-checking on the returned user data. I just can't get my head around how to do that :(
I tried extending the defs with my own interfaces but I couldn't get that to work
Nelo Mitranim
@Mitranim
May 22 2015 08:30
@kpgarrod I started with AngularFire and quickly rolled back to the vanilla Firebase library with Fireproof for promises
suggest trying the same
AngularFire is just not productive to use, as it turns out
You'll have to include scope.$applyAsync() into callbacks but that's a small price
kpgarrod
@kpgarrod
May 22 2015 09:12
@mitranim thanks. I gave up on angulaFire for a long time, but have had a good experience with 1.0, until now!
Nelo Mitranim
@Mitranim
May 22 2015 09:17

It's convenient to have base viewmodel methods to shorter data sync declaration. For example:

constructor() {
  super()

  this.sync({
    langVal: this.lang,
    wordsVal: this.words
  })
}

Would be equivalent to:

constructor() {
  super()

  this.lang.on('value', snap => {
    this.langVal = snap.val()
  })
  this.words.on('value', snap => {
    this.wordsVal = snap.val()
  })
}
And when using Fireproof, you can $q.all the first complete sync
It's also easy to make directives to three-way-sync data on inputs
kpgarrod
@kpgarrod
May 22 2015 09:28
@mitranim thank. I have a big bunch of AngularFire models (70-ish) and I'm quite happy with the way they work apart from type-checking. If I could fix the angularFire typedefs to be generic I would be smiling!
Nelo Mitranim
@Mitranim
May 22 2015 09:42
Oh nice to hear it works for you
kpgarrod
@kpgarrod
May 22 2015 09:50
thanks for the tip about fireproof. I also use native Firebase in some places and usually wrap it in my own $q resolve/reject. Fireproof could save me a few lines of code!
Nelo Mitranim
@Mitranim
May 22 2015 09:52
If you're using ES6 modules and run your code outside angular factories, you might have to do angular.injector(['ng']).get('$q') initially to bless Fireproof, then re-bless it with an instance of $q from your application's injector after the application bootstrap
De Lille Felix
@flieks
May 22 2015 14:36

@Mitranim I puted <reference paths in a tsconfig.json in the /src folder but it's not picked up in a ts file
the code

/// <reference path="../typings/aurelia/aurelia-framework.d.ts" />
/// <reference path="../typings/breeze/breeze.d.ts" />
/// <reference path="../typings/aurelia/aurelia-http-client.d.ts" />
/// <reference path="../typings/aurelia/aurelia-router.d.ts" />
/// <reference path="../typings/es6-promise/es6-promise.d.ts" />

{

    "version": "1.5.0",
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "noImplicitAny": false
    }

}

So then in a ts file (without any references) with a Promise type it fails now (it succeeded before)

Nelo Mitranim
@Mitranim
May 22 2015 14:36
Huh no that's not what I meant :D
If no "files" property is present in a tsconfig.json, the compiler defaults to including
all files in the containing directory and subdirectories. When a "files" property is
specified, only those files are included.
De Lille Felix
@flieks
May 22 2015 14:38
yes, but the typings folder is one folder up in the chain
Nelo Mitranim
@Mitranim
May 22 2015 14:38
Yeah that's why I suggested you move it inside the project
Most painless setup ever
no ///reference, no extra paths for the compiler, no files, nothing
De Lille Felix
@flieks
May 22 2015 14:39
so 1 up
Nelo Mitranim
@Mitranim
May 22 2015 14:40
./═╦═ dist
   ╚═ src
      ╚═ app
         ╠═ typings
         ╠═ stuff
         ╚═ utils
De Lille Felix
@flieks
May 22 2015 14:41
ok what other folder are there in the app folder ?
Nelo Mitranim
@Mitranim
May 22 2015 14:41
echo "src/app/typings" >> .gitignore
De Lille Felix
@flieks
May 22 2015 14:41
i only had app.ts in there
and the navbar
Nelo Mitranim
@Mitranim
May 22 2015 14:42
tsd.json:
  "path": "src/app/typings",
  "bundle": "src/app/typings/tsd.d.ts",
De Lille Felix
@flieks
May 22 2015 14:42
i don't have a tsd.json
Nelo Mitranim
@Mitranim
May 22 2015 14:42
Then you're downloading typings by hand?
De Lille Felix
@flieks
May 22 2015 14:42
yes
Nelo Mitranim
@Mitranim
May 22 2015 14:42
npm i -g tsd
tsd init, then make the change I suggested
and run
tsd install <your dependencies> -r -s
except I'm not sure your dependencies actually exist on tsd, but you should set this up anyway
also run npm i tsd --save-dev so that it's always included with the project
also makes sense to add tsd update to postinstall in package.json -> scripts
Jonathan Park
@park9140
May 22 2015 14:44
tsd query <dependecy> --action install —save << pre 0.6 in case anyone reads this without the line below
Nelo Mitranim
@Mitranim
May 22 2015 14:44
@park9140 that's pre-0.6
Jonathan Park
@park9140
May 22 2015 14:45
wait
0.6 came out
!
De Lille Felix
@flieks
May 22 2015 14:45
tsd.json also put in /src folder ?
Nelo Mitranim
@Mitranim
May 22 2015 14:45
yep so you can use the new syntax I listed
Nah tsd.json can live in root
You run most CLI commands from the root so tsd.json needs to be there
De Lille Felix
@flieks
May 22 2015 14:47
ok this is my tsd at the root:
{
  "version": "v4",
  "repo": "borisyankov/DefinitelyTyped",
  "ref": "master",
  "path": "src/app/typings",
  "bundle": "src/app/typings/tsd.d.ts",
  "installed": {}
}
This message was deleted
Nelo Mitranim
@Mitranim
May 22 2015 14:47
yesh looks good
De Lille Felix
@flieks
May 22 2015 14:48
i did
tsd install aurelia-framework -r-s
Nelo Mitranim
@Mitranim
May 22 2015 14:48
if you run tsd install lodash -s, it'll install its typings into src/app/typings and save to tsd.json
De Lille Felix
@flieks
May 22 2015 14:48
it said zero result
Nelo Mitranim
@Mitranim
May 22 2015 14:49
yeah that's because aurelia is not on tsd, as I just discovered
unfortunate
Nevertheless this will help you with other definitions
De Lille Felix
@flieks
May 22 2015 14:49
true
what else i have to do to delete all references to definition files ?
Nelo Mitranim
@Mitranim
May 22 2015 14:53
with this setup you don't need them
De Lille Felix
@flieks
May 22 2015 14:54
blob
it complains : cannot find external module
Nelo Mitranim
@Mitranim
May 22 2015 15:07
check if you have declare module 'aurelia-framework' in those definition files
note the quotes
De Lille Felix
@flieks
May 22 2015 15:12
yes
declare module 'aurelia-framework' {
    export * from 'aurelia-framework/index';
}
inside the typings folder i have a tsd.d.ts file which is empty
Nelo Mitranim
@Mitranim
May 22 2015 15:19
tsd automatically writes references to installed lib.d.ts files into that file, this is pre-TS1.5 legacy, doesn't matter
anyway restart your editor
De Lille Felix
@flieks
May 22 2015 15:30
restarting worked again (for now) thanks :smile:
Nelo Mitranim
@Mitranim
May 22 2015 18:01
Have a TypeScript question, maybe someone could help. Is it possible to type-annotate a flat property in an object literal?
something like
export const defaults = {
  [module: ng.IModule]: null
}
^ This doesn't work, or I wouldn't have asked :D
You can annotate the return value of a getter, but I need it to be a flat value in this case
I could go herp derp mode and assign a value of the expected type first, then nullify it, but that's just grotesque
Jonathan Park
@park9140
May 22 2015 18:40
you could
export const defaults: { module: ng.IModule } = {
   module: null
}
This message was deleted
Nelo Mitranim
@Mitranim
May 22 2015 18:42
@park9140 Yes but that's not an option when you have a lot of other properties
Would have to basically duplicate the entire thing
Jonathan Park
@park9140
May 22 2015 18:43
what do you mean by lots of other properties?
you could also force cast null…
export const defaults = {
  module: <ng.IModule>null;
}
Nelo Mitranim
@Mitranim
May 22 2015 18:46
Oh gosh, haven't thought of that! Kudos
how could I forget
this solves the issue, thanks
Jonathan Park
@park9140
May 22 2015 18:47
Oh good :)