Adding TypeScript Support to Projects

Bits and Bytes: Adding TypeScript Support to an Existing Project

In the previous Bits and Bytes, we looked at Getting Started with TypeScriptnow we will see how we can add TypeScript support to existing projects.

Similar to getting up and running we are going to need to make sure Node.js and our TypeScript compiler is installed. Once that is complete we can add a tsconfig.json file to support our compiler options. For info on getting up and running check out Getting Started with TypeScript.

Once we have TypeScript support we can code away within our project. But most developers have third party JavaScript libraries to help with their website development. From jQuery support to full single page applications using React or Angular. In any of the cases, you still can create custom TypeScript libraries but the interaction with the third party libraries will be limited.

Here is how you can fix that.

channel-9-adding-typescript

Typings

In order for TypeScript to perform the type checking, the types of these libraries need to be defined somewhere. This is where type definition files help. They provide the compiler a definition file of the JavaScript code that is not typed a “definition” of how it should be. We can add each definition file in the typings directory under a library of choice (ie angular, jquery..etc.). and the file extension for such a file is .d.ts, where d stands for definition.

So where can we get these files? DefinitelyTyped.org or the GitHub repository. There are 1000’s of libraries out there and documentation on how you can create your own.

Once you find your .d.ts file, add it to your project and you should be able to enjoy the benefits from TypeScript from autocompletion, to syntax errors to member documentation.

Try it out and let me know what you think.

Building Cross Platform Apps with Visual Studio – Part 3

In part one we did the setup. Part two we did the coding. Now we will continue some of the coding but also start looking at some configuration options.

Step 1: More Services

Lets finish up the rest of the services. We are basically mimicking what we just did for the Occasions API call for the Results and Details. If we look at the API we find the endpoint to get all drinks by occasion is /drinks/for/occasion_id. We have a route that mimics that /drinks/:filter/:id We can use this route, controller and service over and over again by changing the filter based on what we want returned. (more…)

Building Cross Platform Apps with Visual Studio – Part 2

In part one we setup our development environment by downloading Visual Studio 2013 Community Edition. Installing Visual Studio Tools for Apache Cordova. And stubbing out our app. If you did not do any of those steps, no worries, head on over to part one and then make your way back here.

Lets reset a bit on our project. We are starting to look at building an app that will be able to run on iOS, Android and Windows. There are a couple of ways to doing this, natively or cross platform approach. If we were to build a native app for 3 platforms we would have to code in 3 different languages and use 3 different IDE’s. (Not counting a tool like Xamarin). We are also looking at the multiple stack developer who has a lot of “web” knowledge. They know how to build web apps and their skills can translate well to this cross platform development. We will be using HTML and JavaScript to build this app. Most importantly, we will be using Visual Studio to create our cross platform app.

The app can be anything, but in this example it is a drink recipe app. Categories -> Results -> Details. That is the flow of our app. We will be using a theme from Bootstrap to make it look pretty and responsive for multiple screen sizes. AngularJS will be our JavaScript MVC Framework for the back-end. We left off with a basic “barebones” app structure that we will build upon.

Lets Begin

(more…)

Building Cross Platform Apps with Visual Studio

If you don’t know it already, mobile apps are all the rage. From social networking to pictures and videos to gaming, the app ecosystem is where you want to be. But what if you are a “one-stack” developer? What if you only know HTML/JavaScript? What if your expertise lies in Web Development? Well, they all have their challenges but over the next few articles I will try to demystify the mobile development process especially when it comes to cross platform development. The “one-stack” developer has is a bit easier. They know what the hardware will be. They know the screen size and capabilities of the device. They can reuse code over and over again and create some high quality apps. The “multiple-stack” developer has an advantage as well. They know how to code for multiple platforms. They know what may or may not be possible for each of the platforms. Lets look at the “stacks” and define them a bit.

(more…)

Mix Master 2000: Intel Edison, NodeJS, Apache Cordova App

I got an Intel Edison with a breakout kit along with a SeeedStudio IoT kit. Getting the Edison up and running was straightfoward but once that was complete the next step was “what to build?”. How abut a temperature app? Or a sound sensor? Or a blinking light. None of those thrilled me. Plus I wanted to do something totally different. I am more of an “app” guy so I started thinking about ‘apps’ that can communicate with the Edison. What can I send over to the Edison? Hmmm.

So I started where I always start for brainstorming app ideas, Programmable Web and Mashery. I scoured their listing of API’s to find one that jumped out at me. I did find one. The Absolut Vodka Drink Recipe DB. I can get drink recipes and send them to the LCD screen. This could come in handy instead of fumbling through a recipe book, or even an app. Have the LCD attached to either the shaker or the base and scroll through the steps needed to make the drink.

(more…)