TypeScript (TS) is an open source programming language developed by Microsoft. It's a superset of JavaScript and adds optional static typing and classes.
If you've written anything in .NET and used the Visual Studio IDE you'll feel right at home. With Visual Studio and TS you can easily refactor your code and you get intellisense with auto-completion. All though you don't have to have Visual Studio to use it. Their are plugins for Atom, Webstorm, Eclipse and Sublime to name a few. You can add it to your gulp or grunt files or just manually compile it from your command line.
You can start working with TS right away with your existing projects if you like. All you need to do is take your existing JavaScript files and rename them to .ts. You can then install the compiler via NPM or download the plugin for your IDE and you are ready to go.
$ npm install -g typescript
That's it.
Example
Here is a simple HelloWorld example in TS.
// HelloWorld.ts
class Student {
fullname : string;
constructor(public firstname, public middleinitial, public lastname) {
this.fullname = firstname + " " + middleinitial + " " + lastname;
}
}
interface Person {
firstname: string;
lastname: string;
}
function greeter(person : Person) {
return "Hello, " + person.firstname + " " + person.lastname;
}
var user = new Student("Jane", "M.", "User");
document.body.innerHTML = greeter(user);
Above is a simple example using an ES6 class with a TS Interface. An interface is a way of defining a contract in our code. In this example above we see that firstname and lastname are both strings of the interface Person. We can then use that in our greeter.
TS offers a number of basic types. Including boolean, number, string, array, enum, any and void. Essentially this adds static types to JavaScript. This is important because static usually means "at compile time" or "without running a program". While normally dynamic is at runtime. This means that your IDE can catch errors at compile time, and it usually help with auto-completion. We describe TS as a strongly typed language . We'll come back to this later.
Compile
After we are done writing our program we can easily compile our code.
$ tsc HelloWorld.ts
This should generate for us our JavaScript below.
// HelloWorld.js after compiled from TypeScript
var Student = (function () {
function Student(firstname, middleinitial, lastname) {
this.firstname = firstname;
this.middleinitial = middleinitial;
this.lastname = lastname;
this.fullname = firstname + " " + middleinitial + " " + lastname;
}
return Student;
})();
function greeter(person) {
return "Hello, " + person.firstname + " " + person.lastname;
}
var user = new Student("Jane", "M.", "User");
document.body.innerHTML = greeter(user);
If we want we can use the TS playground website, which will do the same exact things.
IDE
One of the major benefits of TS is that our IDE can catch a lot more errors, as we mentioned before with static typing. Of course this is no replacement for solid unit tests, it does help though. For example in Visual Studio you'll get a compiler error when things are wrong. Let's say you tried to assign a string to an int.
// TypeScript wrong
var x: number = '5'
The IDE will show an error indicated by a red squiggly line under the x. You can then mouse over the error and see what the problem was. This can help with debugging.
Major Features
So what are the major features? I won't get into these but here they are.
- Classes
- Interface
- Generics
- Modules
- Type Definitions
- Compiles to JavaScript
- ES6 Features
Can I use this with Ember, Aurelia, React, Angular..
The short answer is YES. The longer answer is that you can however certain languages have embraced it while others have not. Aurelia, and Angular have certainly embraced TS. Angular 2 earlier this year announced they were writing their framework using TypeScript. Aurelia earlier this month released a getting started guide with TypeScript. Ember on the other hand hasn't embraced it. Ember uses Babel to transform code from ES6 to ES5. Babel is great unfortunately it doesn't support the tooling and some of the other features TS has.
With all that said you can still get Ember working with TS. I've seen a few Github repos with projects written in TS with Ember, but I haven't seen any tutorials. Your mileage might vary getting everything working.
React seems to have embrace something called Flow, which is another static type checker for JavaScript. This might be something I'll look into for the future.
Future
I think TypeScript is here to stay. It's backed by Microsoft and used heavily in Angular and it has a lot of buzz. I'll keep an eye out on it, and try to come up with a few more tutorials soon.
Questions? Leave a comment below
Image Credit TypeScript