Understanding Typescript

I have met a lot of great developers in my life and weirdly i have noted most of them shun Javascript. I think they have a reason to, have you ever read the source code of a jquery plugin?

I once had someone ask me who the f*** writes this plugins? And i think most of us ask ourselves the same. The number one reason why we find JavaScript so difficult to read is because its a dynamic weakly typed language.

Different languages can be described as Statically/Dynamically typed or strongly/weakly typed.

• Statically typed languages: do type checking, this is the process of verifying and enforcing the constraints of types on values at compile-time. Examples: C, C++, Java
• Dynamically typed languages: are languages that do type checks at runtime, E.g erl, Ruby, Python, PHP, JavaScript.
• Weakly-typed languages make conversions between unrelated types implicitly; whereas, strongly-typed languages don’t allow implicit conversions between unrelated types.

For example Python is a strongly typed language.Try running this code in a python environment.

var = 1;            
var = var + "one";  
print(var)
//TypeError: unsupported operand type(s) for +: 'int' and 'str'

Try doing the same in Javascript:

var one = 1
var onePlusOne = one +" plus one"
console.log(onePlusOne)
//consoles  1 plus one

JavaScript is dynamic and weakly typed and that is where typescript comes in. Typescript is a JavaScript superset, that builds up on the JavaScript language, it seeks to solve the limitations of Javascript by enforcing the constraints of types on values at compile-time and also helps us specify how we want to control conversions between unrelated types.

Typescript can't run in the browser or even in NodeJS therefore it has a compiler that compiles typescript to JavaScript. Added features in typescript include the use of types.

Lets look at two code snippets one with plain Javascript and another in Typescript.

*****Plain Javascript

  let inputA = 1
  let inputB = 2
  function sum(inputA, inputB){
     console.log(inputA + inputB)
  }
  sum(inputA,inputB)
  //this will return 3

  //Now what if we change the inputs to be
  inputA = 1
  inputB = "2"
  sum(inputA,inputB)
 //this will return 12

Despite the second answer being wrong, we dont get an error notification at runtime. Here is where Typescript comes in with its additional type feature that guarantees we get the correct answer or an error .In typescript this would be written as(you can test this code in the TS playground):

    let inputA = 1
    let inputB = 2
    funtion sum(inputA: number,inputB: number){
     console.log(inputA + inputB)
    }
    sum(inputA,inputB)
    //prints 3
    //Now what if we change the inputs to be
    inputA = "1"
    inputB = "2"
    sum(inputA,inputB)
    //script.ts(6,9): error TS2345: Argument of type 'string' is not assignable to parameter of type 'number'.

Through the introduction of types in typescript, it easier to write more intuitive code. I will be writing a series of tutorial on typescript.

I will cover:

1. Typescript Basics
2. Typescript compiler
3. Classes & Interfaces
4. Advanced Typescript features such as Generics & Decorators

Stay tuned !!