Ionic 2 not recognize typescript gramma


#1

Hi. I’m using Ionic 2.0.0-beta.25. I created my app using ionic start abc --v2.

I want to create a modal as the example in doc.
But there is a syntax error at

constructor(nav: NavController) {
               ^

I guess this is because my app doesn’t support typescript.

I don’t want to recreate the app using ionic start newApp -ts --v2.
Is it possible to add typescript feature now?

Thanks!


#2

Yes, but you have to make some updates to the project and the build process:


#3

So a few things

ionic 2.0.0-beta.25 is the version of the ionic CLI

You could add necessary build steps needed for an typescript app:

# add build task 
npm install ionic-gulp-browserify-typescript --save-dev

Replace

var buildBrowserify = require('ionic-gulp-browserify-es2015');

with

var buildBrowserify = require('ionic-gulp-browserify-typescript');

And add a tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true
  },
  "filesGlob": [
    "**/*.ts",
    "!node_modules/**/*"
  ],
  "exclude": [
    "node_modules",
    "typings/main",
    "typings/main.d.ts"
  ],
  "compileOnSave": false,
  "atom": {
    "rewriteTsconfig": false
  }
}

Finally, add this to your ionic.config.json

{
  "name": "<yourappname",
  "app_id": "",
  "v2": true,
   // add this 
  "typescript": true
}

From there, you could rename all your files to .ts and you should be good.


Some stuff are not found, like filter()
Cannot find module generated with "Ionic g provider"
ionic2 build, want to add typescript
Unexpected token
#4

Thanks for your replay.
I did as you said and got the following error message.

Caught exception:
Error: ENOENT: no such file or directory, lstat '/Users/…/myproject/typings’
at Error (native)
at Object.fs.lstatSync (fs.js:839:18)
at Object.realpathSync (fs.js:1439:21)
at /Users/…/myproject/typings/node_modules/ionic-gulp-browserify-typescript/node_modules/tsify/index.js:58:38
at Array.map (native)
at DestroyableTransform.flush [as _flush] (/Users/…/myproject/typings/node_modules/ionic-gulp-browserify-typescript/node_modules/tsify/index.js:58:6)
at DestroyableTransform. (/Users/…/myproject/typings/node_modules/ionic-gulp-browserify-typescript/node_modules/tsify/node_modules/through2/node_modules/readable-stream/lib/_stream_transform.js:115:49)
at DestroyableTransform.g (events.js:260:16)
at emitNone (events.js:67:13)
at DestroyableTransform.emit (events.js:166:7)

I tried to npm install -g typescript and npm install -g typings but it didn’t work.
What should I do?


#5

looks like you jsut need to install the proper typings.

you’ll notice in the typescript branch of the starter base, we have a typings directory and a typings.json

https://github.com/driftyco/ionic2-app-base/tree/typescript

You’ll want copy those.


#6

Thanks! That solved my problem. :slight_smile: