Localforage in Typescript

Ionic Framework ionic-v3
1

Hello guys!

After reading around about Typescript and continuously getting the impression that there’s more documentation about it than ES6, I’m trying to move my project to Typescript - now that it’s in the very initial stages.

I’m having issues with localforage however.

In ES6 I initialized it with
var localForage = require('localforage');
and it worked fine.

In Typescript, I’m getting an error on the require keyword (it cannot be found).
I’ve tried different things and always end up getting require not found or localforage not found.

Any help would be greatly appreciated.

2

I’m not sure if this works with Browserify (I use webpack), but I use this polyfill as require.d.ts and put it at the same level as app.ts:

declare var require: {
  <T>(path: string): T;
  (paths: string[], callback: (...modules: any[]) => void): void;
  ensure: (paths: string[], callback: (require: <T>(path: string) => T) => void) => void;
};

There are probably several ways of triggering it; I put it in the files stanza of my tsconfig.json. Then, you can load LF like so:

this.lf = require<LocalForage>('localforage');

In order for that LocalForage typing to work, you will need to install localforage typings (currently I believe only available as ambient):

$ typings i -G --save dt~localforage
1 Like
3

Just add localforage definition and use it like TS syntax.

BTW I don’t understand why you need to use localforage…

1 Like
4

I managed to get it work after some attempts with TSD and typings - I still get error messages at the CLI but the codes runs… :confused:

@xr0master how should I add the definition and what would be the TS syntax?
I use localforage to store some data as from what I understood it’s the best and most flexible option to store & load simple data. Would you suggest something else?

Thanks!

5

Personally I think this is a mistake. I realize it’s the default, but I don’t understand the purpose of crippling TypeScript like this. IMHO, both noImplicitAny and noEmitOnError should always be set.

1 Like
6

Yes, it’s flexible for a web apps but you don’t need it for a mobile apps, you could just use Ionic’s SqlStorage.

TS syntax: import {} from 'localforage'. I recommend you read about the typescript type definition.

1 Like
7

To be honest since I’m an absolute beginner I got the input from here: http://www.joshmorony.com/a-summary-of-local-storage-options-for-phonegap-applications/ (which btw so far has been the only place I’ve found sufficient material on Ionic 2 :confused:

I understand you mean SqlStorage and not SQLite plugn @xr0master, right?

@rapropos I’m sorry but I kinda lost you there :smile:

Thanks for taking the time to answer guys!

8

Hey @Dimitrios,

If you’re still trying to figure out localForage, I did a writeup on how to use it for Ionic 2. It is one of many good ways to store data in an Ionic 2 app.

Hopefully it helps you or someone else looking for the same topic :slight_smile:

Best,

3 Likes
9

Thanks for this great write up Nic. We’re evaluating adding localforage into Ionic 2 out of the box, especially as we look toward supporting indexeddb for PWAs. This helped us :smile: