14 Typescript: Online Class

TypeScript

By: Sahosoft Solutions Presented by : Chandan Kumar

Typescript Variable

TypeScript follows the same rules as JavaScript for variable declarations. Variables can be declared
using: var, let, and const.

var Declaration
Variables in TypeScript can be declared using var keyword, same as in JavaScript. The scoping rules
remains the same as in JavaScript.

let Declaration
To solve problems with var declarations, ES6 introduced two new types of variable declarations in
JavaScript, using the keywords let and const. TypeScript, being a superset of JavaScript, also supports
these new types of variable declarations.

Example: Variable Declaration using let

let employeeName = "John";// or let employeeName:string = "John";

The let declarations follow the same syntax as var declarations. Unlike variables declared with var,
variables declared with let have a block-scope. This means that the scope of let variables is limited to
their containing block, e.g. function, if else block or loop block.
Typescript Variable

Advantages of using let over var

variables declared using let minimize the possibilities of runtime errors, as the compiler give compile-time
errors. This increases the code readability and maintainability.

1) Block-scoped let variables cannot be read or written to before they are declared.
2) Let variables cannot be re-declared
The TypeScript compiler will give an error when variables with the same name (case sensitive) are
declared multiple times in the same block using let.

• Variables with the same name and case can be declared in different blocks,
• The compiler will give an error if we declare a variable that was already passed in as an argument to
the function
• variables declared using let minimize the possibilities of runtime errors, as the compiler give compile-
time errors. This increases the code readability and maintainability.
Typescript Variable

Const Declaration

• Variables can be declared using const similar to var or let declarations. The const makes a variable a
constant where its value cannot be changed. Const variables have the same scoping rules as let
variables.
• Const variables must be declared and initialized in a single statement. Separate declaration and
initialization is not supported.
• Const variables allow an object sub-properties to be changed but not the object structure.
• Even if you try to change the object structure, the compiler will point this error out.
Typescript Data Type
The TypeScript language supports different types of values.

It provides data types for the JavaScript to transform it into a strongly typed programing language.
JavaScript doesn't support data types, but with the help of TypeScript, we can use the data types feature in JavaScript.

TypeScript plays an important role when the object-oriented programmer wants to use the type feature in any scripting
language or object-oriented programming language.
The Type System checks the validity of the given values before the program uses them. It ensures that the code behaves
as expected.

TypeScript provides data types as an optional Type System. We can classify the TypeScript data type as following.
Typescript Data Type
Static Types

In the context of type systems, static types mean "at compile time" or "without running a program."

In a statically typed language, variables, parameters, and objects have types that the compiler knows at
compile time. The compiler used this information to perform the type checking.

Static types can be further divided into two sub-categories:

1. Built-in or Primitive Type

2. User-Defined DataType
Typescript Data Type
Built-in or Primitive Type

The TypeScript has five built-in data types, which are given below.
Typescript Data Type
User-Defined DataType

TypeScript supports the following user-defined data types:

Built-in or Primitive Type
Number
Like JavaScript, all the numbers in TypeScript are stored as floating-point values.
These numeric values are treated like a number data type. The numeric data type can be used to
represents both integers and fractions.

Syntax:
let identifier: number = value;

String
We will use the string data type to represents the text in TypeScript. String type work with textual data. We
include string literals in our scripts by enclosing them in single or double quotation marks. It also represents
a sequence of Unicode characters. It embedded the expressions in the form of $ {expr}.

Syntax
let identifier: string = " ";
Or
let identifier: string = ' ';
Built-in or Primitive Type
Boolean
The string and numeric data types can have an unlimited number of different values, whereas the Boolean
data type can have only two values. They are "true" and "false." A Boolean value is a truth value which
specifies whether the condition is true or not.

Syntax
let identifier: boolean = Boolean value;

Void
A void is a return type of the functions which do not return any type of value. It is used where no data type
is available.
A variable of type void is not useful because we can only assign undefined or null to them.

Syntax
let unusable: void = undefined;
Built-in or Primitive Type
Any Type
It is the "super type" of all data type in TypeScript. It is used to represents any JavaScript value. It allows us
to opt-in and opt-out of type-checking during compilation. If a variable cannot be represented in any of the
basic data types, then it can be declared using "Any" data type. Any type is useful when we do not know
about the type of value (which might come from an API or 3rd party library), and we want to skip the type-
checking on compile time.

Syntax
let identifier: any = value;
User-Defined DataType
Array
An array is a collection of elements of the same data type. Like JavaScript, TypeScript also allows us to
work with arrays of values. An array can be written in two ways:

1. Use the type of the elements followed by [] to denote an array of that element type:
var list : number[] = [1, 3, 5];
2. The second way uses a generic array type:
var list : Array<number> = [1, 3, 5];

Tuple
The Tuple is a data type which includes min two sets of values of same or different data types.
It allows us to express an array where the type of a fixed number of elements is known, but they are not
the same.

TypeScript introduced a new data type called Tuple. There are other data types such as number, string,
boolean etc. in TypeScript which only store a value of that particular data type. Tuple is a new data type
which includes min two set of values of same or different data types.

For example, if we want to represent a value as a pair of a number and a string.

User-Defined DataType
Interface
An Interface is a structure which acts as a contract in our application. It defines the syntax for classes to
follow, means a class which implements an interface is bound to implement all its members. It cannot be
instantiated but can be referenced by the class which implements it.

Class
Classes are used to create reusable components and acts as a template for creating objects.
It is a logical entity which store variables and functions to perform operations.
TypeScript gets support for classes from ES6. It is different from the interface which has an implementation
inside it, whereas an interface does not have any implementation inside it.

Enums
Enums define a set of named constant. TypeScript provides both string-based and numeric-based enums.
By default, enums begin numbering their elements starting from 0, but we can also change this by manually
setting the value to one of its elements.
TypeScript gets support for enums from ES6.
User-Defined DataType
Functions
A function is the logical blocks of code to organize the program. Like JavaScript, TypeScript can also be used
to create functions either as a named function or as an anonymous function. Functions ensure that our
program is readable, maintainable, and reusable. A function declaration has a function's name, return type,
and parameters.
Generic DataType
Generic
When writing programs, one of the most important aspects is to build reusable components. This ensures
that the program is flexible as well as scalable in the long-term.
Generics offer a way to create reusable components. Generics provide a way to make components work
with any data type and not restrict to one data type. So, components can be called or used with a variety of
data types. Generics in TypeScript is almost similar to C# generics.

Generic is used to create a component which can work with a variety of data type rather than a single one.
It allows a way to create reusable components. It ensures that the program is flexible as well as scalable in
the long term.
TypeScript uses generics with the type variable <T> that denotes types. The type of generic functions is just
like non-generic functions, with the type parameters listed first, similarly to function declarations.

Decorators
A decorator is a special of data type which can be attached to a class declaration, method, property,
accessor, and parameter. It provides a way to add both annotations and a meta-programing syntax for
classes and functions. It is used with "@" symbol.
Typescript - if
An if statement can include one or more expressions which return boolean.
If the boolean expression evaluates to true, a set of statements is then executed.

Example: if

if (true)
{
console.log('This will always executed.');
}

if (false) {
console.log('This will never executed.');
}
Typescript - if else Condition
An if else condition includes two blocks - if block and an else block.
If the if condition evaluates to true, then the if block is executed. Otherwise, the else block is executed.

Example: if

if (true)
{
console.log(“”);
}
else{
console.log(“”);
}

Remember: else cannot include any condition and it must follow if or else if conditions.
Typescript - else if Condition
The else if statement can be used after the if statement.

Example: if

if (true)
{
console.log(“”);
}
Else if (false)
{
console.log(“”);
}
Else {
console.log(“”);
}
Typescript - switch
The switch statement is used to check for multiple values and executes sets of statements for each of those
values. A switch statement has one block of code corresponding to each value and can have any number of
such blocks. When the match to a value is found, the corresponding block of code is executed.

Syntax:
switch(expression) {
case constant-expression1: {
//statements;
break;
}
case constant_expression2: {
//statements;
break;
}
default: {
//statements;
break;
}
}
TypeScript - switch
The following rules are applied on the switch statement:

1. The switch statement can include constant or variable expression which can return a value of any data
type.
2. There can be any number of case statements within a switch. The case can include a constant or an
expression.
3. We must use break keyword at the end of each case block to stop the execution of the case block.
4. The return type of the switch expression and case expression must match.
5. The default block is optional.