Ionic 2 with typescript?

I installed and created an Ionic2 project (sidebar template) using the usual commands as given in Ionic2’s getting started. I was hoping that Ionic 2 would give me typescript files(.ts), however I got .js files for the components like list.js, grid.js, app.js. Now if I need to code a service module, should I use ts file or js file. I am using Visual studio IDE, which doesn’t give me intellisense if I use js file. And if I use a .ts file for service module, then while using the service module in a js component like list.js, I don’t get intellisense there.
Am I missing something?

1 Like

This is a decision the Ionic team has changed a couple of times. Since they don’t want to confuse people who don’t want to use TypeScript they kept the .js extensions instead of .ts (however, you could still use TypeScript within the .js files). Recently they swapped the files to be .ts, but have now changed back to .js again with the option to choose whether you want to use .js or .ts as the extension.

To grab the latest version of the Ionic CLI you should do:

npm install -g ionic@beta

rather than alpha. I’m not sure what the latest version uses currently (.js or .ts) but basically, you can use either extension.

1 Like

Thanks Josh for explaining. :smile:

The latest version of the CLI is beta 11 and it is using JS as the default for all starters. Each starter and the conference app have typescript branches if you would like to use typescript. There are some config changes that need to happen so make sure you either copy from that branch or compare your existing code.

The way the starters work is you insert the www/ folder from the starter you want to use into the “ionic2-app-base” folder.

https://github.com/driftyco/ionic2-app-base/tree/typescript?files=1

https://github.com/driftyco/ionic2-starter-blank/tree/typescript?files=1

Hi,
Does Ionic Team have a plan to add option for Ionic CLI to start a project with a specific language ?

Something like: ionic start newApp -ts --v2

At the moment, yes, we plan on adding a flag.

1 Like

Great! I’m waiting for the change of Ionic2 everyday. Hopefully it will go stable in some weeks.

thanks, it worked, :). I got the typescript version from the links provided and now I get intellisense for my ts code.

1 Like

The latest version of the Ionic CLI beta (2.0.0-beta.12) has the TypeScript flag:

ionic start myApp --v2 --ts
8 Likes

Is there an example project that uses JSPM instead of WebPack?

Hi, everyone!

Yeah, this is another one useless topic about Ionic2 and TypeScript integration in application.
But… I have question about typedefinitions *.d.ts files for Ionic2.

I wanted to create a simple ToDoApp a month ago. And I stucked. The reason to drop continue developing of app was lack of definitions. Almost everything used type any. I thought “They will fix definition in a few weeks”. Few days ago I tried to continue my app, and went to GitHub repo for Ionic2. There I saw TypeScript in source …almost. There were exesive usage of type any, even in obvious cases, such as

export class Toggle {
  private _checked: any = false;
...

I know that Ionic team work hard to give us such a great framework. I have an ony question: are strict types and interfaces, what maybe the most valueble features of TS, in the roadmap.

… Oh, another one question: how to get TS debug with webpack in chrome? devtool: 'sourcemap' - doesn’t work.

P.S. I am sorry for my possible impoliteness in this question, but I love TS and Ion and wat to use V2 for my apps =)

1 Like

This is great, just checking this out now. One question I have is about the native plugin interfaces. For example you have a commented out section of app.ts:

  // First, let's hide the keyboard accessory bar (only works natively) since
  // that's a better default:
  //
  // Keyboard.setAccessoryBarVisible(false);
  //
  // For example, we might change the StatusBar color. This one below is
  // good for dark backgrounds and light text:
  // StatusBar.setStyle(StatusBar.LIGHT_CONTENT)

If I comment out the Keyboard and StatusBar code I get type checking errors of course. Now I can just declare them, but is there an import statement or typings I should have for these?

Also rootPage: Type = TabsPage can just be written as rootPage: TabsPage. It will infer the type where it can. Same change can be made on the tabs.ts file where any is used.

1 Like

Helped me! :slight_smile: