Typings for json-api-store

[kdart]

Would like to use the json-api-store library from typescript. I'll take a stab at creating one, but it's not clear how to do that yet.

[blakeembrey]

Sure, we can definitely help. Here's a start:

Reference: https://github.com/haydn/json-api-store

declare class Store {
  define (names: string | string[], definition: Object): void;
}

export = Store; 

I found some types on http://particlesystem.com/json-api-store/docs/v0.7.0/class/src/store.js~Store.html, but as a large library with less documentation you may need to jump into some source code to type it correctly. Otherwise, you're welcome to create an issue and get pieces working as you go - just ping me on things you need a hand with :smile:

[kdart]

Thanks for the help! I think I have a complete definition, but it still doesn't work. It seems the package imports a function, and not a module object. So (using es6) it can't be imported. Is there a way to declare a "disconnected" definition that doesn't import the original module? I'll arrange to have the json-api loaded beforehand in the browser withe a script tag in the header. Perhaps write a wrapper?

[kdart]

@haydn Any insight on this?

[blakeembrey]

@kdart Oh, are you using the global API (not using import)? If so, you might be able to do:

declare global {
  // Stuff here..
}

[kdart]

No, but using this is a guide: http://www.typescriptlang.org/Handbook#writing-dts-files I came up with the following. At least it compiles.

json-api-files.d.ts

// Declarations for json-api-store

interface AjaxAdapter {
    create(store: any, type: any, partial: any, options: any): any;
    destroy(store: any, type: any, id: any, options: any): any;
    load(store: any, type: any, id: any, options: any): any;
    update(store: any, type: any, id: any, partial: any, options: any): any;
}
interface AjaxAdapterFactory {
    new(options: Object): AjaxAdapter;
}


declare function Store(adapter?: AjaxAdapter): void;
declare module Store {
    var AjaxAdapter: AjaxAdapterFactory;
    var observable: any;
    function attr(name?: string, options?: Object): any;
    function hasMany(name?: string, options?: Object): any;
    function hasOne(name?: string, options?: Object): any;
    function add(object: Object): void;
    function convert(type: string, id: string, partial: any): any;
    function create(type: string, partial: Object, options: Object): any;
    function define(names: string | string[], definition: Object): void;
    function destroy(type: string, id: string, options: Object): any;
    function find(type: string, id: string): any;
    function findAll(type: string): any[];
    function load(type: string, id: string, options: any): any;
    function loadAll(type: string, options: Object): any;
    function push(root: Object): void;
    function remove(type: string, id: string): void;
    function update(type: string, id: string, partial: Object, options: Object): any;
}
interface Store {
    new(adapter?: AjaxAdapter): Store;
    attr(name?: string, options?: Object): any;
    hasMany(name?: string, options?: Object): any;
    hasOne(name?: string, options?: Object): any;
    add(object: Object): void;
    convert(type: string, id: string, partial: any): any;
    create(type: string, partial: Object, options: Object): any;
    define(names: string | string[], definition: Object): void;
    destroy(type: string, id: string, options: Object): any;
    find(type: string, id: string): any;
    findAll(type: string): any[];
    load(type: string, id: string, options: any): any;
    loadAll(type: string, options: Object): any;
    push(root: Object): void;
    remove(type: string, id: string): void;
    update(type: string, id: string, partial: Object, options: Object): any;
}

declare function ajax(settings: Object): any;

export {Store, AjaxAdapter, ajax}

Used from models.tsx.

// Models and storage access

import {Store, AjaxAdapter} from './json-api-store'

var adapter = new Store.AjaxAdapter({ base: "/api1" }) as AjaxAdapter;
var store = new Store(adapter) as Store;


store.define(['equipmentmodels', 'equipmentmodel'], {
    name: Store.attr(),
    manufacturer: Store.attr()
});


store.define(['equipment', 'equipment'], {
    name: Store.attr(),
    model: Store.hasOne()
});


export {store}

Not sure if it actually works yet.

BTW, yes I am attempting the impossible.

Typescript+React+JSX using ES6 syntax. Tool chain tsc -> babel -> webpack (with bootstrap 4 alpha).

Exceedingly aggravating to get working, but I hope it will be worth it in the future.

[blakeembrey]

I see. Looking at the implementation, it's a default export and not a named export like what you've got, so you'll need to change that.

export default Store;

Aside from that, you can use a class (it's basically sugar for trying to combine an interface and module like you have, that implementation is very TS 1.4ish :smile:), but first let's get it working for you.

[ieugen]

Any more updates on this?