TypeScript Jump Start

Hi All,

I had the pleasure to present "Type Script jump start" to one of our local communities. In this session i covered why do we need TypeScript? and how to integrate it in existing projects using different text editors such as: Sublime and VisualStudio Code.

The presentation covered the most needed benefits/features of TypeScript in creating: classes, interfaces, inheritance, generics, modules and compile time checking.

If you have not had a chance to use TypeScript in Sublime, i have posted a blog post on how to get this setup on your machine:
http://www.mostafaelzoghbi.com/2016/03/how-to-use-typescript-in-sublime-text.html 

Channel 9 video:



Here is my presentation for this talk:

TypeScript Jump Start from Mostafa Elzoghbi

Enjoy.

How to use TypeScript in Sublime Text Editor

Hi All,


If you are trying to use TypeScript features in Sublime Text 3. This blog post describes step by step on how to start coding and utilize TypeScript features including intelliSense, compile time checking, validation...etc in Sublime.

Follow this walkthrough:

1) You need to have Package Control in Sublime, if you do not have it follow below steps. otherwise, continue reading step 2.

• Open sublime text console by clicking on the top menu: View --> Show Console

• Upon opening the console, you will see the console shows at the bottom of sublime

• Copy this text in the console

import urllib.request,os,hashlib; h = '2915d1851351e5ee549c20394736b442' + '8bc59f460fa1548d1514676163dafc88'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)

• Close and re-open sublime text 3

2) We need to install TypeScript from Package Control by searching for this package. To open package control, We need to open Command Palette from tools menu.

3) Then type Install Package in the popup window.

4) Package Control will popup and then search for TypeScript plugin by writing: TypeScript and then select the package.

Note: you will notice i do not have typescript screenshot since it is already installed on sublime

5) Now, try to add any TypeScript file (with .ts extension) and you will be able to use TS features while writing code in Sublime Text!

Enjoy!

What is TypeScript? Why would i strongly recommend to use it in your next project

As all of us know, Building large applications in JavaScript is hard! It gets messy and hard to manage and test.

The Problem
Because of the nature of JavaScript, it is not "favorable & easy practice" for non JavaScript developers to write classes, modules, OOP code in an easy, clean and straight forward way.

This was the reason of the rising & popularity of JS libraries and frameworks such as: jQuery, Angular, Knockout and much more amazing js libraries.

Recently, I have been thinking to build a Hyprid mobile application using Cordova, and this open source platform helps developers to build cross platform native apps using standard web technologies in JS and HTML.

I was thinking what is the right and best approach to start structuring my project in an organized pattern such as MVC, so i have bunch of views and controllers and my code is clean to build robust solution!

The Solution
You have different ways to implement this, One is to use Angular JS library that helps you strcture your code in a MVC patterns and design your views that are linked to models and js files that have all your controllers implementations.

Another approach, is to use TypeScript which gives your the ability to write clean client scripting and it generates JS code for your and it works in all browsers!

If you are using any OOP programming language such as: C# or Java. It will so easy for you to add TypeScript (*.ts) file in your project and start writing classes, interfaces and all OOP code with IntelliSense and type casting capabilities within VS IDE.

So, you write C# Like code in TypeScript file, it generates JS code and it works in al browsers.

Here is a play ground site to test it some code and see generated code:
http://www.typescriptlang.org/Playground

The same site has tons of materials to learn, samples and get started:
http://www.typescriptlang.org/Tutorial


TypeScript is available and supported if you use VS 2013 (update 2) or VS 2015!

Hope this helps!