Typescript is a language created by Microsoft and released under an open-source (
Which problems does Typescript solves?
Typescript solves a lot of problems, especially in the following areas:
- Prototypal inheritance:Typescript solves this problem by adding classes, modules, and iterfaces. This allows programmers to transfer their existing knowledge of OOP;
- Equality and type juggling:Typescript introduces type checking which can provide warnings at design and compile time to pick up potential unintended juggling;
- Management of modules: Typescript makes module loaders to the normal way of working and allows your modules to be compiled to suit the two most prevalent module loading styles without requiring changes to your code;
- Scope: Typescript warning you about implicit global variabiles;
Another alternative is Google’s Dart language. Dart has much more in common with Typerscript, you can find more information here.
I also recommend you to read this presentation written by Neil Green, it compares Typescript, CoffeeScript and ES6.
Why use TypeScript?
Obviously, typescript is 100% integrated with Visual studio , but it also can be integrated with other tools such as Webstorm, Eclipse, Sublime Text, Visual Studio Code and Atom; Typescript can be compiled using Node.js.
Getting started: Typescript and Grunt
Typescript can be combined with GruntJS: it watch changes performed on Typescript files and compile typescript files into JS files. The following demo shows how to setup the enviroment to develop Typescript applications.
GruntJS and Typescript run on NodeJS, You can install node from here.
Firstly, let’s create a new folder, which will contain the project and type the following command:
It will create the package.json file which will contains all informations about installed packages and dependencies.
Here’s the final package.json, it declares all devDependencies required by Typescript:
You can copy the devDependencies section inside your package.json and launch the following command to solves all typescript dependencies:
- Scripts/ts will contain all .ts files used by project;
- Scripts/compiled will contain the main.js which is the result of *.ts files compiling;
index.html simply includes the main.js file, here’s the source code:
Next step is configure grunt’s tasks using the GruntFile.js. The following snippets shows grunt configurations:
The ‘typescript’ section (line 20) tells grunt the path of typescript files and the destination file (main.js), it also specifies the folder to watch for changes(line 30).
To run gunt tasks let’s type
inside the project folder.
Demo source code
Here’s the source code used or main.ts file, it will compiled into main.js file and included by index.html page:
The post simple introducing Typescript, there is the complete references guide on official site, all code used in this demo is shared on Github.