I will be good to have angular 2 and typescript support in Visual Studio as it will give developer seamless experience while developing ASP.NET Core applications and avoiding switching between editors like Visual Studio and Visual Studio Code.

Hi!

I've known about TypeScript for a long time, but had not decided to give it a try until I spent hours finding a bug which would probably not occur if I was using TS. So I started to dig in and learn the basics and I really liked it so I started on setting up an editor to work with.

I know TS has great support in Microsoft tools, but that's not an option since I'm a mac user and I also tend to avoid IDEs. My current workflow is just fine with sublime and I'm currently trying to learn vim where in sublime I got some basic functionality to work after trying 3 or 4 packages. But in vim, I can't setup a basic workflow, although it would be nice, I don't need all the autocomplete visual studio is offering, I just want automatic error reporting on save, something similar to error tab in VS.

If anyone has experience with this, I'd love to hear how it's done and see your .vimrc (if using vim).

• TypeScript Tutorial

• TypeScript Useful Resources

• Selected Reading

JavaScript was introduced as a language for the client side. The development of Node.js has marked JavaScript as an emerging server-side technology too. However, as JavaScript code grows, it tends to get messier, making it difficult to maintain and reuse the code. Moreover, its failure to embrace the features of Object Orientation, strong type checking and compile-time error checks prevents JavaScript from succeeding at the enterprise level as a full-fledged server-side technology. TypeScript was presented to bridge this gap.

What is TypeScript?

By definition, “TypeScript is JavaScript for application-scale development.”

TypeScript is a strongly typed, object oriented, compiled language. It was designed by Anders Hejlsberg (designer of C#) at Microsoft. TypeScript is both a language and a set of tools. TypeScript is a typed superset of JavaScript compiled to JavaScript. In other words, TypeScript is JavaScript plus some additional features.

Features of TypeScript

TypeScript is just JavaScript. TypeScript starts with JavaScript and ends with JavaScript. Typescript adopts the basic building blocks of your program from JavaScript. Hence, you only need to know JavaScript to use TypeScript. All TypeScript code is converted into its JavaScript equivalent for the purpose of execution.

TypeScript supports other JS libraries. Compiled TypeScript can be consumed from any JavaScript code. TypeScript-generated JavaScript can reuse all of the existing JavaScript frameworks, tools, and libraries.

JavaScript is TypeScript. This means that any valid .js file can be renamed to .ts and compiled with other TypeScript files.

TypeScript is portable. TypeScript is portable across browsers, devices, and operating systems. It can run on any environment that JavaScript runs on. Unlike its counterparts, TypeScript doesn’t need a dedicated VM or a specific runtime environment to execute.

TypeScript and ECMAScript

The ECMAScript specification is a standardized specification of a scripting language. There are six editions of ECMA-262 published. Version 6 of the standard is codenamed 'Harmony'. TypeScript is aligned with the ECMAScript6 specification.

TypeScript adopts its basic language features from the ECMAScript5 specification, i.e., the official specification for JavaScript. TypeScript language features like Modules and class-based orientation are in line with the EcmaScript 6 specification. Additionally, TypeScript also embraces features like generics and type annotations that aren’t a part of the EcmaScript6 specification.

Why Use TypeScript?

TypeScript is superior to its other counterparts like CoffeeScript and Dart programming languages in a way that TypeScript is extended JavaScript. In contrast, languages like Dart, CoffeeScript are new languages in themselves and require language-specific execution environment.

The benefits of TypeScript include −

• Compilation − JavaScript is an interpreted language. Hence, it needs to be run to test that it is valid. It means you write all the codes just to find no output, in case there is an error. Hence, you have to spend hours trying to find bugs in the code. The TypeScript transpiler provides the error-checking feature. TypeScript will compile the code and generate compilation errors, if it finds some sort of syntax errors. This helps to highlight errors before the script is run.

• Strong Static Typing − JavaScript is not strongly typed. TypeScript comes with an optional static typing and type inference system through the TLS (TypeScript Language Service). The type of a variable, declared with no type, may be inferred by the TLS based on its value.

• TypeScript supports type definitions for existing JavaScript libraries. TypeScript Definition file (with .d.ts extension) provides definition for external JavaScript libraries. Hence, TypeScript code can contain these libraries.

• TypeScript supports Object Oriented Programming concepts like classes, interfaces, inheritance, etc.

Components of TypeScript

At its heart, TypeScript has the following three components −

• Language − It comprises of the syntax, keywords, and type annotations.

• The TypeScript Compiler − The TypeScript compiler (tsc) converts the instructions written in TypeScript to its JavaScript equivalent.

• The TypeScript Language Service − The 'Language Service' exposes an additional layer around the core compiler pipeline that are editor-like applications. The language service supports the common set of a typical editor operations like statement completions, signature help, code formatting and outlining, colorization, etc.

Declaration Files

When a TypeScript script gets compiled, there is an option to generate a declaration file (with the extension .d.ts) that functions as an interface to the components in the compiled JavaScript. The concept of declaration files is analogous to the concept of header files found in C/C++. The declaration files (files with .d.ts extension) provide intellisense for types, function calls, and variable support for JavaScript libraries like jQuery, MooTools, etc.

Try it Option Online

We already have set up TypeScript programming online, so that you can execute all the available examples online at the same time when you are doing your theory work. This gives you confidence in what you are reading and to check the result with different options. Feel free to modify any example and execute it online.

Try the following example using our online compiler option available at CodingGround

On compiling, it will generate following JavaScript code.

For most of the examples given in this tutorial, you will find a Try it option in our website code sections at the top right corner, that will take you to the online compiler. So just make use of it and enjoy your learning.

In this chapter, we will discuss how to install TypeScript on Windows platform. We will also explain how to install the Brackets IDE.

TypeScript ─ Try it Option Online

You may test your scripts online by using The TypeScript at www.typescriptlang.org/Playground. The online editor shows the corresponding JavaScript emitted by the compiler.

You may try the following example using Playground.

On compiling , it will generate following JavaScript code.

The output of the above program is given below −

Local Environment Setup

Typescript is an Open Source technology. It can run on any browser, any host, and any OS. You will need the following tools to write and test a Typescript program −

A Text Editor

The text editor helps you to write your source code. Examples of a few editors include Windows Notepad, Notepad++, Emacs, vim or vi, etc. Editors used may vary with Operating Systems.

The source files are typically named with the extension .ts

The TypeScript Compiler

The TypeScript compiler is itself a .ts file compiled down to JavaScript (.js) file. The TSC (TypeScript Compiler) is a source-to-source compiler (transcompiler / transpiler).

The TSC generates a JavaScript version of the .ts file passed to it. In other words, the TSC produces an equivalent JavaScript source code from the Typescript file given as an input to it. This process is termed as transpilation.

However, the compiler rejects any raw JavaScript file passed to it. The compiler deals with only .ts or .d.ts files.

Installing Node.js

Node.js is an open source, cross-platform runtime environment for server-side JavaScript. Node.js is required to run JavaScript without a browser support. It uses Google V8 JavaScript engine to execute code. You may download Node.js source code or a pre-built installer for your platform. Node is available here − https://nodejs.org/en/download

Installation on Windows

Follow the steps given below to install Node.js in Windows environment.

Step 1 − Download and run the .msi installer for Node.

Step 2 − To verify if the installation was successful, enter the command node –v in the terminal window.

Step 3 − Type the following command in the terminal window to install TypeScript.

Installation on Mac OS X

To install node.js on Mac OS X, you can download a pre-compiled binary package which makes a nice and easy installation. Head over to http://nodejs.org/ and click the install button to download the latest package.

Install the package from the .dmg by following the install wizard which will install both node and npm. npm is Node Package Manager which facilitates installation of additional packages for node.js.

Installation on Linux

You need to install a number of dependencies before you can install Node.js and NPM.

• Ruby and GCC. You’ll need Ruby 1.8.6 or newer and GCC 4.2 or newer.

• Homebrew. Homebrew is a package manager originally designed for Mac, but it’s been ported to Linux as Linuxbrew. You can learn more about Homebrew at http://brew.sh/ and Linuxbrew at http://brew.sh/linuxbrew

Once these dependencies are installed, you may install Node.js by using the following command on the terminal −

IDE Support

Typescript can be built on a plethora of development environments like Visual Studio, Sublime Text 2, WebStorm/PHPStorm, Eclipse, Brackets, etc. Visual Studio Code and Brackets IDEs are discussed here. The development environment used here is Visual Studio Code (Windows platform).

Visual Studio Code

This is an open source IDE from Visual Studio. It is available for Mac OS X, Linux and Windows platforms. VScode is available at − https://code.visualstudio.com/

Installation on Windows

Step 1 − Download Visual Studio Code for Windows.

Step 2 − Double-click on VSCodeSetup.exe to launch the setup process. This will only take a minute.

Step 3 − A screenshot of the IDE is given below.

Step 4 − You may directly traverse to the file’s path by right clicking on the file → open in command prompt. Similarly, the Reveal in Explorer option shows the file in the File Explorer.

Installation on Mac OS X

Visual Studio Code’s Mac OS X specific installation guide can be found at

Installation on Linux

Linux specific installation guide for Visual Studio Code can be found at

Brackets

Brackets is a free open-source editor for web development, created by Adobe Systems. It is available for Linux, Windows and Mac OS X. Brackets is available at http://brackets.io/

Typescript For Windows

TypeScript Extensions for Brackets

Brackets supports extensions for adding extra functionality via the Extension Manager. The following steps explain installing TypeScript extensions using the same.

• Post installation, click on the extension manager icon on the right-hand side of the editor. Enter typescript in the search box.

• Install the Brackets TSLint and Brackets TypeScript plugins.

You can run DOS prompt / shell within Brackets itself by adding one more extension Brackets Shell.

Upon installation, you will find an icon of shell on the right-hand side of the editor . Once you click on the icon, you will see the shell window as shown below −

Note − Typescript is also available as a plugin for Visual Studio 2012 and 2013 environments (https://www.typescriptlang.org/#Download).VS 2015 and above includes Typescript plugin by default.

Now, you are all set!!!

Syntax defines a set of rules for writing programs. Every language specification defines its own syntax. A TypeScript program is composed of −

• Modules
• Functions
• Variables
• Statements and Expressions
• Comments

Your First TypeScript Code

Let us start with the traditional “Hello World” example −

On compiling, it will generate following JavaScript code.

• Line 1 declares a variable by the name message. Variables are a mechanism to store values in a program.

• Line 2 prints the variable’s value to the prompt. Here, console refers to the terminal window. The function log () is used to display text on the screen.

Compile and Execute a TypeScript Program

Let us see how to compile and execute a TypeScript program using Visual Studio Code. Follow the steps given below −

Step 1 − Save the file with .ts extension. We shall save the file as Test.ts. The code editor marks errors in the code, if any, while you save it.

Step 2 − Right-click the TypeScript file under the Working Files option in VS Code’s Explore Pane. Select Open in Command Prompt option.

Step 3 − To compile the file use the following command on the terminal window.

Step 4 − The file is compiled to Test.js. To run the program written, type the following in the terminal.

Compiler Flags

Compiler flags enable you to change the behavior of the compiler during compilation. Each compiler flag exposes a setting that allows you to change how the compiler behaves.

The following table lists some common flags associated with the TSC compiler. A typical command-line usage uses some or all switches.

Note − Multiple files can be compiled at once.

Identifiers in TypeScript

Identifiers are names given to elements in a program like variables, functions etc. The rules for identifiers are −

• Identifiers can include both, characters and digits. However, the identifier cannot begin with a digit.

• Identifiers cannot include special symbols except for underscore (_) or a dollar sign ($).

• Identifiers cannot be keywords.

• They must be unique.

• Identifiers are case-sensitive.

• Identifiers cannot contain spaces.

The following tables lists a few examples of valid and invalid identifiers −

TypeScript ─ Keywords

Keywords have a special meaning in the context of a language. The following table lists some keywords in TypeScript.

Whitespace and Line Breaks

TypeScript ignores spaces, tabs, and newlines that appear in programs. You can use spaces, tabs, and newlines freely in your program and you are free to format and indent your programs in a neat and consistent way that makes the code easy to read and understand.

TypeScript is Case-sensitive

TypeScript is case-sensitive. This means that TypeScript differentiates between uppercase and lowercase characters.

Semicolons are optional

Each line of instruction is called a statement. Semicolons are optional in TypeScript.

Example

A single line can contain multiple statements. However, these statements must be separated by a semicolon.

Comments in TypeScript

Comments are a way to improve the readability of a program. Comments can be used to include additional information about a program like author of the code, hints about a function/ construct etc. Comments are ignored by the compiler.

TypeScript supports the following types of comments −

• Single-line comments ( // ) − Any text between a // and the end of a line is treated as a comment

• Multi-line comments (/* */) − These comments may span multiple lines.

Example

TypeScript and Object Orientation

TypeScript is Object-Oriented JavaScript. Object Orientation is a software development paradigm that follows real-world modelling. Object Orientation considers a program as a collection of objects that communicate with each other via mechanism called methods. TypeScript supports these object oriented components too.

• Object − An object is a real time representation of any entity. According to Grady Brooch, every object must have three features −

  • State − described by the attributes of an object

  • Behavior − describes how the object will act

  • Identity − a unique value that distinguishes an object from a set of similar such objects.

• Class − A class in terms of OOP is a blueprint for creating objects. A class encapsulates data for the object.

• Method − Methods facilitate communication between objects.

Example: TypeScript and Object Orientation

The above example defines a class Greeting. The class has a method greet (). The method prints the string “Hello World” on the terminal. The new keyword creates an object of the class (obj). The object invokes the method greet ().

On compiling, it will generate following JavaScript code.

The output of the above program is given below −

The Type System represents the different types of values supported by the language. The Type System checks the validity of the supplied values, before they are stored or manipulated by the program. This ensures that the code behaves as expected. The Type System further allows for richer code hinting and automated documentation too.

TypeScript provides data types as a part of its optional Type System. The data type classification is as given below −

The Any type

The any data type is the super type of all types in TypeScript. It denotes a dynamic type. Using the any type is equivalent to opting out of type checking for a variable.

Built-in types

The following table illustrates all the built-in types in TypeScript −

Note − There is no integer type in TypeScript and JavaScript.

Null and undefined ─ Are they the same?

The null and the undefined datatypes are often a source of confusion. The null and undefined cannot be used to reference the data type of a variable. They can only be assigned as values to a variable.

However, null and undefined are not the same. A variable initialized with undefined means that the variable has no value or object assigned to it while null means that the variable has been set to an object whose value is undefined.

User-defined Types

User-defined types include Enumerations (enums), classes, interfaces, arrays, and tuple. These are discussed in detail in the later chapters.

A variable, by definition, is “a named space in the memory” that stores values. In other words, it acts as a container for values in a program. TypeScript variables must follow the JavaScript naming rules −

• Variable names can contain alphabets and numeric digits.

• They cannot contain spaces and special characters, except the underscore (_) and the dollar ($) sign.

• Variable names cannot begin with a digit.

A variable must be declared before it is used. Use the var keyword to declare variables.

Variable Declaration in TypeScript

The type syntax for declaring a variable in TypeScript is to include a colon (:) after the variable name, followed by its type. Just as in JavaScript, we use the var keyword to declare a variable.

When you declare a variable, you have four options −

• Declare its type and value in one statement.

• Declare its type but no value. In this case, the variable will be set to undefined.

• Declare its value but no type. The variable type will be set to the data type of the assigned value.

• Declare neither value not type. In this case, the data type of the variable will be any and will be initialized to undefined.

The following table illustrates the valid syntax for variable declaration as discussed above −

Example: Variables in TypeScript

On compiling, it will generate following JavaScript code.

The output of the above program is given below −

The TypeScript compiler will generate errors, if we attempt to assign a value to a variable that is not of the same type. Hence, TypeScript follows Strong Typing. The Strong typing syntax ensures that the types specified on either side of the assignment operator (=) are the same. This is why the following code will result in a compilation error −

Type Assertion in TypeScript

TypeScript allows changing a variable from one type to another. TypeScript refers to this process as Type Assertion. The syntax is to put the target type between < > symbols and place it in front of the variable or expression. The following example explains this concept −

Example

If you hover the mouse pointer over the type assertion statement in Visual Studio Code, it displays the change in the variable’s data type. Basically it allows the assertion from type S to T succeed if either S is a subtype of T or T is a subtype of S.

The reason why it's not called 'type casting' is that casting generally implies some sort of runtime support while, “type assertions” are purely a compile time construct and a way for you to provide hints to the compiler on how you want your code to be analyzed.

On compiling, it will generate following JavaScript code.

It will produce the following output −

Inferred Typing in TypeScript

Given the fact that, Typescript is strongly typed, this feature is optional. TypeScript also encourages dynamic typing of variables. This means that, TypeScript encourages declaring a variable without a type. In such cases, the compiler will determine the type of the variable on the basis of the value assigned to it. TypeScript will find the first usage of the variable within the code, determine the type to which it has been initially set and then assume the same type for this variable in the rest of your code block.

The same is explained in the following code snippet −

Example: Inferred Typing

In the above code snippet −

• The code declares a variable and sets its value to 2. Note that the variable declaration doesn’t specify the data type. Hence, the program uses inferred typing to determine the data type of the variable, i.e., it assigns the type of the first value that the variable is set to. In this case, num is set to the type number.

• When the code tries to set the variable’s value to string. The compiler throws an error as the variable’s type is already set to number.

It will produce the following output −

TypeScript Variable Scope

The scope of a variable specifies where the variable is defined. The availability of a variable within a program is determined by its scope. TypeScript variables can be of the following scopes −

• Global Scope − Global variables are declared outside the programming constructs. These variables can be accessed from anywhere within your code.

• Class Scope − These variables are also called fields. Fields or class variables are declared within the class but outside the methods. These variables can be accessed using the object of the class. Fields can also be static. Static fields can be accessed using the class name.

• Local Scope − Local variables, as the name suggests, are declared within the constructs like methods, loops etc. Local variables are accessible only within the construct where they are declared.

The following example illustrates variable scopes in TypeScript.

Example: Variable Scope

On transpiling, the following JavaScript code is generated −

It will produce the following output −

If you try accessing the local variable outside the method, it results in a compilation error.

What is an Operator?

An operator defines some function that will be performed on the data. The data on which operators work are called operands. Consider the following expression −

7 + 5 = 12

Here, the values 7, 5, and 12 are operands, while + and = are operators.

The major operators in TypeScript can be classified as −

• Arithmetic operators
• Logical operators
• Relational operators
• Bitwise operators
• Assignment operators
• Ternary/conditional operator
• String operator
• Type Operator

Arithmetic Operators

Assume the values in variables a and b are 10 and 5 respectively.

Relational Operators

Relational Operators test or define the kind of relationship between two entities. Relational operators return a Boolean value, i.e., true/ false.

Assume the value of A is 10 and B is 20.

Logical Operators

Logical Operators are used to combine two or more conditions. Logical operators too return a Boolean value. Assume the value of variable A is 10 and B is 20.

Bitwise Operators

Assume variable A = 2 and B = 3

Assignment Operators

Free Video Editor For Mac

Note − Same logic applies to Bitwise operators, so they will become <<=, >>=, >>=, &=, |= and ^=.

Miscellaneous Operators

The negation operator (-)

Changes the sign of a value. Let’s take an example.

On compiling, it will generate following JavaScript code.

It will produce the following output −

String Operators: Concatenation operator (+)

The + operator when applied to strings appends the second string to the first. The following example helps us to understand this concept.

On compiling, it will generate following JavaScript code.

It will produce the following output −

The concatenation operation doesn’t add a space between strings. Multiple strings can be concatenated in a single statement.

Conditional Operator (?)

This operator is used to represent a conditional expression. The conditional operator is also sometimes referred to as the ternary operator. The syntax is as given below −

• Test − refers to the conditional expression

• expr1 − value returned if the condition is true

• expr2 − value returned if the condition is false

Let’s take a look at the following code −

Line 2 checks whether the value in the variable num is greater than zero. If num is set to a value greater than zero, it returns the string “positive” else the string “non-positive” is returned.

On compiling, it will generate following JavaScript code.

The above code snippet will produce the following output −

Type Operators

typeof operator

It is a unary operator. This operator returns the data type of the operand. Take a look at the following example −

On compiling, it will generate following JavaScript code.

It will produce the following output −

instanceof

This operator can be used to test if an object is of a specified type or not. The use of instanceof operator is discussed in the chapter classes.

Decision-making structures require that the programmer specifies one or more conditions to be evaluated or tested by the program, along with a statement or statements to be executed if the condition is determined to be true, and optionally, other statements to be executed if the condition is determined to be false.

Shown below is the general form of a typical decision-making structure found in most of the programming languages −

A decision-making construct evaluates a condition before the instructions are executed. Decision-making constructs in TypeScript are classified as follows −

You may encounter situations, when a block of code needs to be executed several number of times. In general, statements are executed sequentially: The first statement in a function is executed first, followed by the second, and so on.

Programming languages provide various control structures that allow for more complicated execution paths.

A loop statement allows us to execute a statement or group of statements multiple times. Given below is the general form of a loop statement in most of the programming languages.

TypeScript provides different types of loops to handle looping requirements. The following figure illustrates the classification of loops −

Definite Loop

A loop whose number of iterations are definite/fixed is termed as a definite loop. The for loop is an implementation of a definite loop.

Indefinite Loop

An indefinite loop is used when the number of iterations in a loop is indeterminate or unknown.

Indefinite loops can be implemented using −

Example: while versus do.while

The example initially declares a while loop. The loop is entered only if the expression passed to while evaluates to true. In this example, the value of n is not greater than zero, hence the expression returns false and the loop is skipped.

On the other hand, the do…while loop executes statement once. This is because the initial iteration does not consider the Boolean expression. However, for the subsequent iteration, the while checks the condition and takes the control out of the loop.

On compiling, it will generate following JavaScript code −

The above code will produce the following output −

The break Statement

The break statement is used to take the control out of a construct. Using break in a loop causes the program to exit the loop. Its syntax is as follows − Roland gr-55 floorboard editor for mac.

Syntax

Flow diagram

Example

Now, take a look at the following example code −

On compiling, it will generate the following JavaScript code −

It will produce the following output −

The continue Statement

The continue statement skips the subsequent statements in the current iteration and takes the control back to the beginning of the loop. Unlike the break statement, the continue doesn’t exit the loop. It terminates the current iteration and starts the subsequent iteration.

Syntax

Flowchart

Example

An example of the continue statement is given below −

The above example displays the number of even values between 0 and 20. The loop exits the current iteration if the number is even. This is achieved using the continue statement.

On compiling, it will generate following JavaScript code.

Output

The Infinite Loop

An infinite loop is a loop that runs endlessly. The for loop and the while loop can be used to make an endless loop.

Syntax: Infinite Loop using for loop

Example: Infinite loop using for loop

Syntax: Infinite loop using while loop

Example: Infinite loop using while loop

Functions are the building blocks of readable, maintainable, and reusable code. A function is a set of statements to perform a specific task. Functions organize the program into logical blocks of code. Once defined, functions may be called to access code. This makes the code reusable. Moreover, functions make it easy to read and maintain the program’s code.

A function declaration tells the compiler about a function's name, return type, and parameters. A function definition provides the actual body of the function.

Optional Parameters

Optional parameters can be used when arguments need not be compulsorily passed for a function’s execution. A parameter can be marked optional by appending a question mark to its name. The optional parameter should be set as the last argument in a function. The syntax to declare a function with optional parameter is as given below −

Example: Optional Parameters

• The above example declares a parameterized function. Here, the third parameter, i.e., mail_id is an optional parameter.

• If an optional parameter is not passed a value during the function call, the parameter’s value is set to undefined.

• The function prints the value of mail_id only if the argument is passed a value.

On compiling, it will generate following JavaScript code −

The above code will produce the following output −

Rest Parameters

Rest parameters are similar to variable arguments in Java. Rest parameters don’t restrict the number of values that you can pass to a function. However, the values passed must all be of the same type. In other words, rest parameters act as placeholders for multiple arguments of the same type.

To declare a rest parameter, the parameter name is prefixed with three periods. Any nonrest parameter should come before the rest parameter.

Example: Rest Parameters

• The function addNumbers() declaration, accepts a rest parameter nums. The rest parameter’s data type must be set to an array. Moreover, a function can have at the most one rest parameter.

• The function is invoked twice, by passing three and six values, respectively.

• The for loop iterates through the argument list, passed to the function and calculates their sum.

On compiling, it will generate following JavaScript code −

The output of the above code is as follows −

Default Parameters

Function parameters can also be assigned values by default. However, such parameters can also be explicitly passed values.

Syntax

Note − A parameter cannot be declared optional and default at the same time.

Example: Default parameters

On compiling, it will generate following JavaScript code −

Its output is as follows −

• The example declares the function, calculate_discount. The function has two parameters - price and rate.

• The value of the parameter rate is set to 0.50 by default.

• The program invokes the function, passing to it only the value of the parameter price. Here, the value of rate is 0.50 (default)

• The same function is invoked, but with two arguments. The default value of rate is overwritten and is set to the value explicitly passed.

  Easy to use image editor for mac. Of course, a $30 image editor isn’t going to compete with the best Adobe has to offer, and there are several areas where Pixelmator will let you down. There’s no support for editing RAW images for starters, which will be a big disappointment to photographers looking for an Adobe Camera RAW replacement.

Anonymous Function

Functions that are not bound to an identifier (function name) are called as anonymous functions. These functions are dynamically declared at runtime. Anonymous functions can accept inputs and return outputs, just as standard functions do. An anonymous function is usually not accessible after its initial creation.

Variables can be assigned an anonymous function. Such an expression is called a function expression.

Syntax

Example ─ A Simple Anonymous function

On compiling, it will generate the same code in JavaScript.

It will produce the following output −

Example ─ Anonymous function with parameters

The anonymous function returns the product of the values passed to it.

On compiling, it will generate following JavaScript code −

The output of the above code is as follows −

Function Expression and Function Declaration ─ Are they synonymous?

Function expression and function declaration are not synonymous. Unlike a function expression, a function declaration is bound by the function name.

The fundamental difference between the two is that, function declarations are parsed before their execution. On the other hand, function expressions are parsed only when the script engine encounters it during execution.

When the JavaScript parser sees a function in the main code flow, it assumes Function Declaration. When a function comes as a part of a statement, it is a Function Expression.

The Function Constructor

TypeScript also supports defining a function with the built-in JavaScript constructor called Function ().

Syntax

Example

The new Function() is a call to the constructor which in turn creates and returns a function reference.

On compiling, it will generate the same code in JavaScript.

The output of the above example code is as follows −

Recursion and TypeScript Functions

Recursion is a technique for iterating over an operation by having a function call to itself repeatedly until it arrives at a result. Recursion is best applied when you need to call the same function repeatedly with different parameters from within a loop.

Example – Recursion

On compiling, it will generate the same code in JavaScript.

Here is its output −

Example: Anonymous Recursive Function

On compiling, it will generate the same code in JavaScript.

Its output is as follows −

Lambda Functions

Lambda refers to anonymous functions in programming. Lambda functions are a concise mechanism to represent anonymous functions. These functions are also called as Arrow functions.

Lambda Function - Anatomy

There are 3 parts to a Lambda function −

• Parameters − A function may optionally have parameters

• The fat arrow notation/lambda notation (=>) − It is also called as the goes to operator

• Statements − represent the function’s instruction set

Tip − By convention, the use of single letter parameter is encouraged for a compact and precise function declaration.

Lambda Expression

It is an anonymous function expression that points to a single line of code. Its syntax is as follows −

Example: Lambda Expression

The program declares a lambda expression function. The function returns the sum of 10 and the argument passed.

On compiling, it will generate following JavaScript code.

Here is the output of the above code −

Lambda Statement

Lambda statement is an anonymous function declaration that points to a block of code. This syntax is used when the function body spans multiple lines. Its syntax is as follows −

Example: Lambda statement

The function’s reference is returned and stored in the variable foo.

On compiling, it will generate following JavaScript code −

The output of the above program is as follows −

Syntactic Variations

Parameter type Inference

It is not mandatory to specify the data type of a parameter. In such a case the data type of the parameter is any. Let us take a look at the following code snippet −

On compiling, it will generate the following JavaScript code −

Its output is as follows −

Optional parentheses for a single parameter

On compiling, it will generate following JavaScript code −

Its output is as follows −

Optional braces for a single statement, Empty parentheses for no parameter

The following example shows these two Syntactic variations.

On compiling, it will generate following JavaScript code −

Its output is as follows −

Function Overloads

Functions have the capability to operate differently on the basis of the input provided to them. In other words, a program can have multiple methods with the same name with different implementation. This mechanism is termed as Function Overloading. TypeScript provides support for function overloading.

To overload a function in TypeScript, you need to follow the steps given below −

Step 1 − Declare multiple functions with the same name but different function signature. Function signature includes the following.

• The data type of the parameter

• The number of parameters

• The sequence of parameters

Note − The function signature doesn’t include the function’s return type.

Step 2 − The declaration must be followed by the function definition. The parameter types should be set to any if the parameter types differ during overload. Additionally, for case b explained above, you may consider marking one or more parameters as optional during the function definition.

Step 3 − Finally, you must invoke the function to make it functional.

Example

Let us now take a look at the following example code −

• The first two lines depict the function overload declaration. The function has two overloads −

  • Function that accepts a single string parameter.

  • Function that accepts two values of type number and string respectively.

• The third line defines the function. The data type of the parameters are set to any. Moreover, the second parameter is optional here.

• The overloaded function is invoked by the last two statements.

On compiling, it will generate following JavaScript code −

The above code will produce the following output −

TypeScript like JavaScript supports numeric values as Number objects. A number object converts numeric literal to an instance of the number class. The Number class acts as a wrapper and enables manipulation of numeric literals as they were objects.

Syntax

In case a non-numeric argument is passed as an argument to the Number’s constructor, it returns NaN (Not–a–Number)

The following table lists a set of properties of the Number object −

Example

On compiling, it will generate the same code in JavaScript.

Its output is as follows −

Example: NaN

On compiling, it will generate the same code in JavaScript.

Its output is as follows −

Example: prototye

On compiling, it will generate the following JavaScript code −

Its output is as follows −

Number Methods

The Number object contains only the default methods that are a part of every object's definition. Some of the commonly used methods are listed below −

The String object lets you work with a series of characters. It wraps the string primitive data type with a number of helper methods.

Syntax

A list of the methods available in String object along with their description is given below −

String Methods

A list of the methods available in String object along with their description is given below −

The use of variables to store values poses the following limitations −

• Variables are scalar in nature. In other words, a variable declaration can only contain a single at a time. This means that to store n values in a program n variable declarations will be needed. Hence, the use of variables is not feasible when one needs to store a larger collection of values.

• Variables in a program are allocated memory in random order, thereby making it difficult to retrieve/read the values in the order of their declaration.

TypeScript introduces the concept of arrays to tackle the same. An array is a homogenous collection of values. To simplify, an array is a collection of values of the same data type. It is a user defined type.

Features of an Array

Here is a list of the features of an array −

• An array declaration allocates sequential memory blocks.

• Arrays are static. This means that an array once initialized cannot be resized.

• Each memory block represents an array element.

• Array elements are identified by a unique integer called as the subscript / index of the element.

• Like variables, arrays too, should be declared before they are used. Use the var keyword to declare an array.

• Array initialization refers to populating the array elements.

• Array element values can be updated or modified but cannot be deleted.

Declaring and Initializing Arrays

To declare an initialize an array in Typescript use the following syntax −

Syntax

An array declaration without the data type is deemed to be of the type any. The type of such an array is inferred from the data type of the array’s first element during initialization.

For example, a declaration like − var numlist:number[] = [2,4,6,8] will create an array as given below −

The array pointer refers to the first element by default.

Arrays may be declared and initialized in a single statement. The syntax for the same is −

Note − The pair of [] is called the dimension of the array.

Accessing Array Elements

The array name followed by the subscript is used refer to an array element. Its syntax is as follows −

Example: Simple Array

On compiling, it will generate following JavaScript code −

The output of the above code is as follows −

Example: Single statement declaration and initialization

On compiling, it will generate following JavaScript code −

Its output is as follows −

Array Object

An array can also be created using the Array object. The Array constructor can be passed.

• A numeric value that represents the size of the array or

• A list of comma separated values.

The following example shows how to create an array using this method.

Example

On compiling, it will generate following JavaScript code.

Its output is as follows −

Example: Array Constructor accepts comma separated values

On compiling, it will generate following JavaScript code −

Its output is as follows −

Array Methods

A list of the methods of the Array object along with their description is given below.

Array Destructuring

Refers to breaking up the structure of an entity. TypeScript supports destructuring when used in the context of an array.

Example

On compiling, it will generate following JavaScript code.

Its output is as follows −

Array Traversal using for…in loop

One can use the for…in loop to traverse through an array.

The loop performs an index based array traversal.

On compiling, it will generate following JavaScript code.

The output of the above code is given below −

Arrays in TypeScript

TypeScript supports the following concepts in arrays −

At times, there might be a need to store a collection of values of varied types. Arrays will not serve this purpose. TypeScript gives us a data type called tuple that helps to achieve such a purpose.

It represents a heterogeneous collection of values. In other words, tuples enable storing multiple fields of different types. Tuples can also be passed as parameters to functions.

Syntax

For Example

You can also declare an empty tuple in Typescript and choose to initialize it later.

Accessing values in Tuples

Tuple values are individually called items. Tuples are index based. This means that items in a tuple can be accessed using their corresponding numeric index. Tuple item’s index starts from zero and extends up to n-1(where n is the tuple’s size).

Syntax

Example: Simple Tuple

In the above example, a tuple, mytuple, is declared. The tuple contains values of numeric and string types respectively.

On compiling, it will generate the same code in JavaScript.

Its output is as follows −

Example: Empty Tuple

On compiling, it will generate the same code in JavaScript.

Its output is as follows −

Tuple Operations

Tuples in TypeScript supports various operations like pushing a new item, removing an item from the tuple, etc.

Example

• The push() appends an item to the tuple

• The pop() removes and returns the last value in the tuple

On compiling, it will generate the same code in JavaScript.

The output of the above code is as follows −

Updating Tuples

Tuples are mutable which means you can update or change the values of tuple elements.

Example

On compiling, it will generate the same code in JavaScript.

The output of the above code is as follows −

Destructuring a Tuple

Destructuring refers to breaking up the structure of an entity. TypeScript supports destructuring when used in the context of a tuple.

Example

On compiling, it will generate following JavaScript code.

Its output is as follows −

TypeScript 1.4 gives programs the ability to combine one or two types. Union types are a powerful way to express a value that can be one of the several types. Two or more data types are combined using the pipe symbol (|) to denote a Union Type. In other words, a union type is written as a sequence of types separated by vertical bars.

Syntax: Union literal

Example: Union Type Variable

In the above example, the variable’s type is union. It means that the variable can contain either a number or a string as its value.

On compiling, it will generate following JavaScript code.

Its output is as follows −

Example: Union Type and function parameter

The function disp() can accept argument either of the type string or a string array.

On compiling, it will generate following JavaScript code.

The output is as follows −

Union Type and Arrays

Union types can also be applied to arrays, properties and interfaces. The following illustrates the use of union type with an array.

Example: Union Type and Array

The program declares an array. The array can represent either a numeric collection or a string collection.

On compiling, it will generate following JavaScript code.

Its output is as follows −

An interface is a syntactical contract that an entity should conform to. In other words, an interface defines the syntax that any entity must adhere to.

Interfaces define properties, methods, and events, which are the members of the interface. Interfaces contain only the declaration of the members. It is the responsibility of the deriving class to define the members. It often helps in providing a standard structure that the deriving classes would follow.

Let’s consider an object −

If we consider the signature of the object, it could be −

To reuse the signature across objects we can define it as an interface.

Declaring Interfaces

The interface keyword is used to declare an interface. Here is the syntax to declare an interface −

Syntax

Example: Interface and Objects

The example defines an interface. The customer object is of the type IPerson. Hence, it will now be binding on the object to define all properties as specified by the interface.

Another object with following signature, is still considered as IPerson because that object is treated by its size or signature.

On compiling, it will generate following JavaScript code.

The output of the above example code is as follows −

Interfaces are not to be converted to JavaScript. It’s just part of TypeScript. If you see the screen shot of TS Playground tool there is no java script emitted when you declare an interface unlike a class. So interfaces have zero runtime JavaScript impact.

Union Type and Interface

The following example shows the use of Union Type and Interface −

On compiling, it will generate following JavaScript code.

Its output is as follows −

Interfaces and Arrays

Interface can define both the kind of key an array uses and the type of entry it contains. Index can be of type string or type number.

Example

Interfaces and Inheritance

An interface can be extended by other interfaces. In other words, an interface can inherit from other interface. Typescript allows an interface to inherit from multiple interfaces.

Use the extends keyword to implement inheritance among interfaces.

Syntax: Single Interface Inheritance

Syntax: Multiple Interface Inheritance

Example: Simple Interface Inheritance

On compiling, it will generate following JavaScript code.

Its output is as follows −

Example: Multiple Interface Inheritance

The object Iobj is of the type interface leaf. The interface leaf by the virtue of inheritance now has two attributes- v1 and v2 respectively. Hence, the object Iobj must now contain these attributes.

On compiling, it will generate following JavaScript code.

The output of the above code is as follows −

TypeScript is object oriented JavaScript. TypeScript supports object-oriented programming features like classes, interfaces, etc. A class in terms of OOP is a blueprint for creating objects. A class encapsulates data for the object. Typescript gives built in support for this concept called class. JavaScript ES5 or earlier didn’t support classes. Typescript gets this feature from ES6.

Creating classes

Use the class keyword to declare a class in TypeScript. The syntax for the same is given below −

Syntax

The class keyword is followed by the class name. The rules for identifiers must be considered while naming a class.

A class definition can include the following −

• Fields − A field is any variable declared in a class. Fields represent data pertaining to objects

• Constructors − Responsible for allocating memory for the objects of the class

• Functions − Functions represent actions an object can take. They are also at times referred to as methods

These components put together are termed as the data members of the class.

Consider a class Person in typescript.

On compiling, it will generate following JavaScript code.

Example: Declaring a class

The example declares a class Car. The class has a field named engine. The var keyword is not used while declaring a field. The example above declares a constructor for the class.

A constructor is a special function of the class that is responsible for initializing the variables of the class. TypeScript defines a constructor using the constructor keyword. A constructor is a function and hence can be parameterized.

The this keyword refers to the current instance of the class. Here, the parameter name and the name of the class’s field are the same. Hence to avoid ambiguity, the class’s field is prefixed with the this keyword.

disp() is a simple function definition. Note that the function keyword is not used here.

On compiling, it will generate following JavaScript code.

Creating Instance objects

To create an instance of the class, use the new keyword followed by the class name. The syntax for the same is given below −

Syntax

• The new keyword is responsible for instantiation.

• The right-hand side of the expression invokes the constructor. The constructor should be passed values if it is parameterized.

Example: Instantiating a class

Accessing Attributes and Functions

A class’s attributes and functions can be accessed through the object. Use the ‘ . ’ dot notation (called as the period) to access the data members of a class.

Example: Putting them together

On compiling, it will generate following JavaScript code.

The output of the above code is as follows −

Class Inheritance

TypeScript supports the concept of Inheritance. Inheritance is the ability of a program to create new classes from an existing class. The class that is extended to create newer classes is called the parent class/super class. The newly created classes are called the child/sub classes.

A class inherits from another class using the ‘extends’ keyword. Child classes inherit all properties and methods except private members and constructors from the parent class.

Syntax

However, TypeScript doesn’t support multiple inheritance.

Example: Class Inheritance

On compiling, it will generate following JavaScript code.

The output of the above code is as follows −

The above example declares a class Shape. The class is extended by the Circle class. Since there is an inheritance relationship between the classes, the child class i.e. the class Car gets an implicit access to its parent class attribute i.e. area.

Inheritance can be classified as −

• Single − Every class can at the most extend from one parent class

• Multiple − A class can inherit from multiple classes. TypeScript doesn’t support multiple inheritance.

• Multi-level − The following example shows how multi-level inheritance works.

Example

The class Leaf derives the attributes from Root and Child classes by virtue of multi-level inheritance.

On compiling, it will generate following JavaScript code.

Its output is as follows −

Output

TypeScript ─ Class inheritance and Method Overriding

Method Overriding is a mechanism by which the child class redefines the superclass’s method. The following example illustrates the same −

The super keyword is used to refer to the immediate parent of a class. The keyword can be used to refer to the super class version of a variable, property or method. Line 13 invokes the super class version of the doWork() function.

On compiling, it will generate following JavaScript code.

The output of the above code is as follows −

The static Keyword

The static keyword can be applied to the data members of a class. A static variable retains its values till the program finishes execution. Static members are referenced by the class name.

Example

On compiling, it will generate following JavaScript code.

The output of the above code is as follows −

The instanceof operator

The instanceof operator returns true if the object belongs to the specified type.

Example

On compiling, it will generate following JavaScript code.

The output of the above code is as follows −

Data Hiding

A class can control the visibility of its data members to members of other classes. This capability is termed as Data Hiding or Encapsulation.

Object Orientation uses the concept of access modifiers or access specifiers to implement the concept of Encapsulation. The access specifiers/modifiers define the visibility of a class’s data members outside its defining class.

The access modifiers supported by TypeScript are −

Example

Let us now take an example to see how data hiding works −

The class has two string attributes, str1 and str2, which are public and private members respectively. The class is instantiated. The example returns a compile time error, as the private attribute str2 is accessed outside the class that declares it.

Classes and Interfaces

Classes can also implement interfaces.

The class AgriLoan implements the interface Loan. Hence, it is now binding on the class to include the property interest as its member.

On compiling, it will generate following JavaScript code.

The output of the above code is as follows −

An object is an instance which contains set of key value pairs. The values can be scalar values or functions or even array of other objects. The syntax is given below −

Syntax

As shown above, an object can contain scalar values, functions and structures like arrays and tuples.

Example: Object Literal Notation

On compiling, it will generate the same code in JavaScript.

The output of the above code is as follows −

TypeScript Type Template

Let’s say you created an object literal in JavaScript as −

In case you want to add some value to an object, JavaScript allows you to make the necessary modification. Suppose we need to add a function to the person object later this is the way you can do this.

If you use the same code in Typescript the compiler gives an error. This is because in Typescript, concrete objects should have a type template. Objects in Typescript must be an instance of a particular type.

You can solve this by using a method template in declaration.

Example: Typescript Type template

On compiling, it will generate the same code in JavaScript.

The output of the above code is as follows −

Objects can also be passed as parameters to function.

Example: Objects as function parameters

The example declares an object literal. The function expression is invoked passing person object.

On compiling, it will generate following JavaScript code.

Its output is as follows −

You can create and pass an anonymous object on the fly.

Example: Anonymous Object

On compiling, it will generate following JavaScript code.

Its output is as follows −

Duck-typing

In duck-typing, two objects are considered to be of the same type if both share the same set of properties. Duck-typing verifies the presence of certain properties in the objects, rather than their actual type, to check their suitability. The concept is generally explained by the following phrase −

“When I see a bird that walks like a duck and swims like a duck and quacks like a duck, I call that bird a duck.”

The TypeScript compiler implements the duck-typing system that allows object creation on the fly while keeping type safety. The following example shows how we can pass objects that don’t explicitly implement an interface but contain all of the required members to a function.

Example

A namespace is a way to logically group related code. This is inbuilt into TypeScript unlike in JavaScript where variables declarations go into a global scope and if multiple JavaScript files are used within same project there will be possibility of overwriting or misconstruing the same variables, which will lead to the “global namespace pollution problem” in JavaScript.

Defining a Namespace

A namespace definition begins with the keyword namespace followed by the namespace name as follows −

The classes or interfaces which should be accessed outside the namespace should be marked with keyword export.

To access the class or interface in another namespace, the syntax will be namespaceName.className

If the first namespace is in separate TypeScript file, then it should be referenced using triple slash reference syntax.

The following program demonstrates use of namespaces −

The above code can be compiled and executed using the following command −

On compiling, it will generate following JavaScript code(app.js).

When the above code is compiled and executed, it produces the following result −

Nested Namespaces

You can define one namespace inside another namespace as follows −

You can access members of nested namespace by using the dot (.) operator as follows −

The above code can be compiled and executed using the following command −

On compiling, it will generate following JavaScript code(app.js).

When the above code is compiled and executed, it produces the following result −

A module is designed with the idea to organize code written in TypeScript. Modules are broadly divided into −

• Internal Modules
• External Modules

Internal Module

Internal modules came in earlier version of Typescript. This was used to logically group classes, interfaces, functions into one unit and can be exported in another module. This logical grouping is named namespace in latest version of TypeScript. So internal modules are obsolete instead we can use namespace. Internal modules are still supported, but its recommended to use namespace over internal modules.

Internal Module Syntax (Old)

Namespace Syntax (New)

JavaScript generated in both cases are same

External Module

External modules in TypeScript exists to specify and load dependencies between multiple external js files. If there is only one js file used, then external modules are not relevant. Traditionally dependency management between JavaScript files was done using browser script tags (<script></script>). But that’s not extendable, as its very linear while loading modules. That means instead of loading files one after other there is no asynchronous option to load modules. When you are programming js for the server for example NodeJs you don’t even have script tags.

There are two scenarios for loading dependents js files from a single main JavaScript file.

• Client Side - RequireJs
• Server Side - NodeJs

Selecting a Module Loader

To support loading external JavaScript files, we need a module loader. This will be another js library. For browser the most common library used is RequieJS. This is an implementation of AMD (Asynchronous Module Definition) specification. Instead of loading files one after the other, AMD can load them all separately, even when they are dependent on each other.

Defining External Module

When defining external module in TypeScript targeting CommonJS or AMD, each file is considered as a module. So it’s optional to use internal module with in external module.

If you are migrating TypeScript from AMD to CommonJs module systems, then there is no additional work needed. The only thing you need to change is just the compiler flag Unlike in JavaScript there is an overhead in migrating from CommonJs to AMD or vice versa.

The syntax for declaring an external module is using keyword ‘export’ and ‘import’.

Syntax

To use the declared module in another file, an import keyword is used as given below. The file name is only specified no extension used.

Example

Let’s understand this using an example.

The command to compile the main TypeScript file for AMD systems is −

On compiling, it will generate following JavaScript code for AMD.

File:IShape.js

File:Circle.js

File:Triangle.js

File:TestShape.js

The command to compile the main TypeScript file for Commonjs systems is

On compiling, it will generate following JavaScript code for Commonjs.

File:Circle.js

File:Triangle.js

File:TestShape.js

Output

Ambient declarations are a way of telling the TypeScript compiler that the actual source code exists elsewhere. When you are consuming a bunch of third party js libraries like jquery/angularjs/nodejs you can’t rewrite it in TypeScript. Ensuring typesafety and intellisense while using these libraries will be challenging for a TypeScript programmer. Ambient declarations help to seamlessly integrate other js libraries into TypeScript.

Defining Ambients

Ambient declarations are by convention kept in a type declaration file with following extension (d.ts)

The above file will not be transcompiled to JavaScript. It will be used for type safety and intellisense.

The syntax for declaring ambient variables or modules will be as following −

Syntax

The ambient files should be referenced in the client TypeScript file as shown −

Example

Let’s understand this with help of an example. Assume you been given a third party javascript library which contains code similar to this.

As a typescript programmer you will not have time to rewrite this library to typescript. But still you need to use the doSum() method with type safety. What you could do is ambient declaration file. Let us create an ambient declaration file Calc.d.ts

Ambient files will not contain the implementations, it is just type declarations. Declarations now need to be included in the typescript file as follows.

The following line of code will show a compiler error. This is because in the declaration file we specified the input parameter will be number.

Comment the above line and compile the program using the following syntax −

On compiling, it will generate following JavaScript code(CalcTest.js).

In order to execute the code, let us add an html page with script tags as given below. Add the compiled CalcTest.js file and the third party library file CalcThirdPartyJsLib.js.

It will display the following page −

On the console, you can see the following output −

Similarly, you can integrate jquery.d.ts or angular.d.ts into a project, based on your requirement.