TypeScript - JavaScripts Superset.

Document Content and Description Below

Introduction to TypeScript Typescript is a superset of Javascript. It acts like icing on the cake enhancing the power of JavaScript. It can be used for safer coding of large applications. TypeScrip... t is superset of JavaScript. •When a TypeScript code is compiled, it results in a JavaScript code and thus it can run at all instances where JavaScript can run. •TypeScript can be visualized as a syntactic add-on for JavaScript. •The syntax includes all features of ECMAScript 2015 as well as classes and modules, hence it is object oriented. •TypeScript is centralized around the experience of static typing for JavaScript development. TypeScript vs ES6 vs ES5 • In ES5, finding bugs at the time of development converts into nightmare sometimes. • Plethora of functionality like arrow functions, classes, template strings, destructuring, parameters, iterators, generators, modules, map, set, symbols and promises are added to Javascript by ES6. These are discussed in detail in ECMAScript2015. • The proverb Prevention is better than cure suits for TypeScript as it tries to recognize the bugs at an early stage of typing. • It is better to write safe codes rather than focusing on less code. This is what TypeScript is circumscribed to. • The value of ES6 is in writing Less Code, whereas the value of Typescript is in writing Safe code. *********------------------*****************--------------- TypeScript is Object Oriented The value of TypeScript is writing Safer code Typescript compiler tsc converts code to JavaScript We can rename a .js file to .ts file generally true TypeScript is superset of JavaScript. TypeScript was made public by Microsoft ***********-----------------------**************------------- Static vs Dynamic Type Checking A Type System is a set of rules that assign a property called type to various construct a computer program consists of, such as variables, expressions,functions or modules. Type checker is responsible for Type checking. It is a kind of program analyzer verifying the types that are being used in the code. The sole purpose is to recognize the bugs before the execution of the code. There are two types of type checking: •Static Type Checking •Dynamic Type Checking Static Type Checking is done at compile time. The type of variable should be declared before using them. Examples of programming languages using Static Type Checking are C, C++, JAVA, C#, Fortran, Pascal, Scala etc. var n: number; // declaration - required in static type checking n=5; // definition - can be done later or in declaration var m=6; Static vs Dynamic type Checking Dynamic Type Checking is done at run time. We do not have to declare the type of variables. The compiler automatically detects the type. Examples are JavaScript, Python, VBScript etc. /* JavaScript code */ n=5; m=6; sum=n+m; TypeScript has a distinctive feature of supporting the static typing. It concludes that we can declare the type of variable/ parameter/ function return. Static typing finds its use only within TypeScript. When converted to a .js file, it has no more role there. The main motive is to use it to compile time checking that ensures the right values are passed to each variable, making sure that the program behavior is same as expected. In TypeScript, we define a type by just appending the variable name with colon followed by the type name as shown in below examples: Defining Variables var num: number = 3;TypeScript infers the type with the value with which we would have initialized the variable. If we do not initialize the variable nor define a type when declaring a variable, TypeScript assigns “any” type to the variable. var num = 3; // variable num is of type "number" var num; // variable num is of type "any" Defining Arrays let list: number[] = [1, 2, 3]; Defining Functions let myAdd = ( x: number , y: number): number => { return x+y; }; // first two "number" defines type for parameters 'x' and 'y' // third "number" defines `return type` of function •We can define optional parameter by adding “?” so that anyone calling that function may or may not pass value for that variable. Optional parameters do not exist in JavaScript and hence those will not be handled. var addFunction = (n1: number, n2: number, n3?: number) : number => { //observe "?" in parameter n3 //Optional parameter ha [Show More]

Last updated: 1 year ago

Preview 1 out of 16 pages