TypeScript–Surprisingly Simple, Extraordinarily Powerful– Part 3

FUNDAMENTALS

Before we start with the fundamentals I would like to reiterate that TypeScript is just an extension of JavaScript, it does not provide any specific new features but it helps in writing JavaScript code in a more maintainable and robust manner. It provides developers with features that resonate with OOPs and helps them writing JavaScript code.

Basic things to note about TypeScript

• {} code blocks, end of statement as ;
• Uses keywords like Class, constructor, interface, implements, module, public/private similar to OOPs languages like JAVA, C#
• Other keywords which provide extensions like export (Export a member from a module), extends (Extend a class or interface), imports (Import a module), <typeName> (< > characters use to cast/convert between types) and “:” (Separator between variable/parameter names and types)

Code Hierarchy in TypeScript is :

Modules act as a naming container that can export different members, inside modules you have class. Classes can implement Interfaces, extend other classes.

Interfaces are exactly like .Net which provides a signature for classes that implement them and provide developers with compile-time errors that are not done properly. For interfaces, there is no JavaScript that is emitted. TypeScript interfaces can in turn extend other interfaces.

In classes, we can define functions and variables and also provide scope for them as public/private. Functions are also like .Net methods that accept arguments and return typed value or void. TypeScript also does type checking here to make sure we are calling functions that correct signature.

Now we will look at Types, Declarations available in TypeScript

var car;      This is how we define a variable in JavaScript. Now, we can assign anything to a car-like integer, string or any CAR object, JavaScript will not say anything. But, if we assign car value of integer and then try to use it as string-like substring then JavaScript will throw an error but not at compile time. This is because JavaScript is a dynamic language.

Now, in TypeScript, we can define it as shown below. Here we see that we can provide the data type of a variable in TypeScript like a number in this case. And now if we try to assign a string to that variable, compile lets us know that this is incorrect.

TypeScript Variable definition

Though if you look at the JavaScript which gets generated, it doesn’t mind at all.

it appears in JavaScript

As you can see above in TypeScript example declaring a variable is similar to JavaScript except for the fact that we can assign a type at the time of declaration.

If you assign a value at the time of declaration, TypeScript automatically infers the type from the assignment and use it for type checking.

There are multiple types available in TypeScript (none of these types will be seen in JavaScript generated) namely, Number, String, boolean, any.

In TypeScript if we declare a variable without assigning any type, the compiler takes it as “any”. Any is similar to “dynamic” type in C# which allows any possible value assigned to the variable

TypeScript also allows us to use DOM and JavaScript implicitly in our development like the example below

TypeScript:   

Corresponding JavaScript: 

Arrays:  TypeScript also supports advanced types like arrays which are declared by adding a square bracket to the type declaration.

var arrayEg: string [] = [];  or it can be used as 

Here we have defined an array of strings and then used index to get the first element. Below is the JavaScript generated

Null and Undefined: TypeScript allows developers to assign “null” or “undefined” to any variable.

TypeScript also allows developers to define object types. TypeScript infers the members of the object type and provides IntelliSense as well.

Functions:

This type of checking is not only available for variable declaration but can be used in functions to make sure every function call has the correct type for the parameters passed and also the caller knows what type of data function will return.

Here we have defined a function in TypeScript which takes 3 parameters and returns nothing. Anyone calling this function will now have IntelliSense as well as type support to make sure that correct data is passed.

JavaScript it produces is shown below, we can see that there is no indication of any type for any of the parameters.

There is another way to define and create a function as shown below. TypeScript helps us to do static type checking at the time of function declaration also.

We can also pass custom objects to functions and make sure TypeScript checks those for the same data type.

Here we have created a function fun which takes a parameter named rec which itself is an object having 2 properties h and b. We can now call fun in 2 possible ways as shown. The var “temp” is showing a compile-time error because we have defined a return type as a number for function fun which does not match the signature of the function.

Optional Parameters(?): As seen in the above example we can make sure we make one or more parameters as optional like “b” in case of function fun. This is done by suffixing the parameter with “?”.  Now in this case function fun can work fine by accepting just one parameter “h”.

Next Up: Classes, Interfaces including encapsulation, inheritance