Typescript Features in Angular 2
Angular 2+ Essentials: https://goo.gl/yjQPIu
Typescript provides a number of awesome features making it easier to code javascript applications.
Now that we’ve made the decision to code using the Typescript language, lets take a brief look at some of the core language characteristics as it relates to Angular 2.
Typescript is a superset of Javascript. This means that we can write valid javascript in a typescript file and it will get compiled and work just the same as javascript.
This diagram represents the all encompassing features that Typescript includes. So you can write typescript code using all the features of Ecmascript 5, which is the current version of javascript. You can also use all of the new features of ES2015 which include arrow functions, module loading, classes, inheritance, let and const variable definition. And you can also write typescript code using special features suggested to be included in a future version of javascript called ES7 which includes type annotations, type checking, interfaces, generics and decorators. We’ll be covering each one of these using examples as we get to them while building our Angular application.
The most heralded feature of Typescript is that of type annotations which creates what’s called Strong Typing. Strong typing involves giving everything a data type. So every variable, function and function parameter has a declared data type. We define our data type by using a colon and then the type we want to declare. And these types are the same basic data types your already familiar with such as: strings, booleans, arrays and numbers.
Here are a few examples of strong typing. In the first example we declare a class property of pageTitle that has a type of string and is being set equal to the string Welcome. The function and function parameter examples show how you how we’re able to define our types by placing this colon directly after the declared function and function parameter. Then what we’re returning must match the declared data type or we get thrown an error. We can also set our function data type to void when not returning anything.
This may seem like a hassle at first, and it certainly did for me, but the benefits far outweigh the costs.
There’s 2 main benefits to strong typing. The first is syntax checking which happens before code execution. This has a big impact on helping us to find bugs in our code that would otherwise be very difficult to track down.
The second main benefit to strong typing is it helps to create advanced development tools in editors like Visual Studio and Sublime text. Some examples include code completion suggestions, syntax highlighting and command line error checking.
To quickly summarize the main benefits of typescript: Number 1: enhanced javascript language features, Number 2: better support for syntax checking using strong typing, Number 3: additional editor tooling such as auto completions and code highlighting.
Typescript was created by the people at Microsoft. There is a very useful website called typescriptlang.org. Here you can find a sample section that provides plenty of code examples as well as a playground section where you can play around writing code in javascript and seeing how it compiles into typescript.
To summarize the main benefits of typescript: Number 1: enhanced javascript language features, Number 2: better support for syntax checking using strong typing, Number 3: additional editor tooling such as auto completions and code highlighting.