Types

As the name implies, TypeScript is all about types. This is considered the main advantage in TypeScript. If you are a .Net developer or a developer who writes code in other languages like C#, C++, Java, ..etc, you may know the benefits of types and you may find it uncomfortable to program in a world where types do not exist as in JavaScript.

The main advantage of types is type safety which means the compiler and the development supporting tools can catch potential problems in your application during development rather than running into exceptions at the runtime.

TypeScript is a strongly typed superset of JavaScript. It is a compiled rather than an interpreted language; which means errors can be caught and fixed before the code runs. This is a huge advantage not found in JavaScript even to catch type mismatch issues which many times JavaScript fails to catch until the code is executed.

For example:

// in JavaScript

function add(x, y){ return x + y; }

In the above function declaration, we are not using types for the function parameters, the reader can't tell if this is an arithmetic function that is supposed to add two numbers and return the summation, or if it is a function that adds two words to each other and return a concatenation of two strings. in this case both of the following calls may work in JavaScript:

add (1, 4); // result: 5

add("Birth", "day"); // result: 'Birthday'

add("1", "day"); // result: '1day'

However, think of cases when things go wrong and a string value is passed to the function while the application is supposed to add numbers, although this may work in the application, it may result in different behavior than what the application is supposed to do in the first place and eventually runtime exceptions happen because the rest of the application is assuming numeric values as result. Similarly, calling the function add(1, "day") is also acceptable in JavaScript but will result in unexpected behavior in runtime.

// in TypeScript

function add(x: number, y: number) { return x + y; }

In the above function declaration, the developer is giving consent that the add function is an arithmetic function that is supposed to take two numbers and return the summation result. in that case passing anything else other than a number value will result in an error. For example calling the function add("sun", "shine") will result in a compilation error and the code cannot be executed until the error is fixed.

// in TypeScript

function add(x: string, y: string) { return x + y; }

Similarly, in the above function declaration, the developer is giving consent that the add function is a function that operates on text and is supposed to take two words and return a new word that is the combination of the two input words. In that case passing anything else other than a string value will result in an error. For example calling the function add(1, 3) will result in a compilation error and the code can not be executed until the error is fixed.

By using types here you can save a lot of time debugging and trying to trace down and fix a problem when using no types as in JavaScript.

Another advantage when using types is the semantics you give to your code which allows other developers who might be working on your code to understand your intentions and understand how the code is supposed to work.

let and const are two relatively new types of variable declarations in JavaScript which TypeScript supports.

let variableName: variableType = value;

// or

let variableName: variableType;

let x: number = 5;

// or

let x: number;

let is a keyword which tells the compiler here comes a new declaration of a variable. let is similar to var, which has been the keyword to declare variables in JavaScript. However, let was introduced to allow users to avoid some of the common issues that users run into when using var in JavaScript. It is then highly recommended to use let.

variableName is any name that you would like to give to your variable. any name can be used as a variable name except the language reserved words like names of types, the word if, while, ...etc. As a best practice, it is recommended to use meaningful names for your variables.

the colon : is a separator between the variable name and the variable type. The colon tells the compiler that the following keyword is the type of the variable whose name was just given before the colon.

variableType this is the type of the variable. it can be any of the types keywords in TypeScript like number, string, boolean, ...etc. Types will be covered in more details in the upcoming lessons.

the equal sign = is the assignment symbol. Use the assignment symbol if you are going to assign a value for the variable at the time of declaration. otherwose, this can be leftout until it is time to assign a value for the variable.

value this is the value that you want to assign to the variable. It has to fit in the declared variable type or else the TypeScript compiler will give an error.

semicolons ; are used in TypeScript at the end of a complete code sentence. Semicolons are optional in both JavaScript and TypeScript. However, using semicolon is recommended for many reasons of which code readability is the most important. there are rules regulating when a semicolon is used and when not. Semicolons are not used with loop definitions or if statements definitions for example. As we get more hands on coding in the course you will learn when to use a semicolon and when not and the compiler will be a good guide too.

const declarations are another way of declaring variables. They are like let declarations but, as their name implies, their value cannot be changed once they are bound which means you can't reassign them.

const pi = 3.14;

1. Using the TypeScript playground define a const variable and assign it a value.
2. On the next line, try to reassign the variable with a new value and check if TypeScript errors out.
3. You should see a red line under your variable name where you are trying to do the reassignment. This means the compiler is complaining about your code.
4. Hover over the red line and check the error message.

it should say something like:

Cannot assign to x because it is a constant or a read-only property.

JavaScript uses dynamic types while TypeScript uses static types which is also referred to as strongly typed types.

JavaScript uses types like numbers, string, dates, ..etc. However, when you use variables in JavaScript you are not explicit about the type of the variable, in fact you do not explicitly mention the type of the variable using a type keyword. However, the type of the variable is just inferred from the value you assign to the variable. This also means there is no enforcement on the variable to stay in that type or to hold values that are compatible with that type. This is referred to as dynamic types. In JavaScript, the type of the variable is given from the value the variable holds. If the value changes, the type of the variable also changes to fit the new value. It is therefore considered a dynamic type.

TypeScript is different - variables are explicit about their types and the value assigned to a variable has to comply with the variable type or an error is given during compilation. Once defined with a type, a variable cannot change its type in TypeScript, it is therefore considered strongly typed. For example:

let x: number; // x is explicitly declared of type number

x = 3; // correct assignment

x = "hi"; // incorrect assignment

In TypeScript, if a variable is not explicitly assigned a type when it is defined, then the type is inferred from the first assignment or the initialization of the variable and then it is then considered a strongly typed variable with the inferred type. For example:

let y = 10; //y is now a strongly typed as number due to type inference

y = "hello"; // incorrect because y should hold only numbers

In TypeScript, this is an error, because the first assignment of the number 3 to x makes TypeScript compiler considered x a strongly typed variable with type number which can not accept a string value as in "hi".

Note that in JavaScript, this is ok because types are dynamic and can change based on the value the variable holds in each assignment.

We will cover type inference in more detail in a later lesson in this module.

types are classified into two main classes in TypeScript

1. boolean
2. number
3. string
4. array
5. tuple
6. enum
7. null
8. undefined
9. any
10. void: exists purely to indicate the absence of a value, such as in a function with no return value.

1. class
2. interface