TypeScript Tutorial(Part2)

This article is a continued version of my previous article on getting started with typescript. If you are a newbie or still getting started with typescript, I will advise you to check my previous article because it introduces you to the typescript programming language. After going through it, you can now visit this article and continue.
Click on the link to check the previous article out
[https://dev.to/bralexsvg/getting-started-with-typescript-5a9k]

In the previous article, I ended by going through setting up typescript on one's computer. In this article, we will complete the setup process and write some code.

Now let's begin action

Navigate into any directorate on your computer and create a new folder. In the nearly created folder, create a new file and add .ts. The extension name .ts means the file is a typescript file.

I am going to name my file as app.ts. You can name it anyhow you want.
This how mine looks like👇

After installing the typescript compiler globally on your computer, very to see if the installation is succesfully by executing the below command.
tsc -v

The next step is to compile typescript. So now we are going to compile our newly created file called app.ts
But first, lets write some javaScript code inside the app.ts file

Now open your command prompt and navigate into the directorate you have the app.ts file. Execute the below command
tsc app. After compiling, check back on your text editor and you will see another file by the name app.js added. Suprise to see that? Remember typescript compiles down to javascript so browser engines can understand the code. Click on the app.js file and you will realize the codes you have in the app.ts file are the same as in the app.js file.

If you want TSC to compile your code automatically, whenever you make a change, add the "watch" flag:
tsc index.ts -w
An interesting thing about TypeScript is that it reports errors in your text editor whilst you are coding, but it will always compile your code – whether there are errors or not.
For example, the following causes TypeScript to immediately report an error:

var sport = 'football';
var id = 5;

id = '5'; // Error: Type 'string' is not assignable to 
type 'number'.

But if we try to compile this code with tsc app, the code will still compile, despite the error.
This is an important property of TypeScript: it assumes that the developer knows more. Even though there's a TypeScript error, it doesn't get in your way of compiling the code. It tells you there's an error, but it's up to you whether you do anything about it.

Congratulations for getting here. 🎉
Now lets delve into working with typescript properly.

Basic types in typescript

• Type Annotation

• String

• Number

• Boolean

• Array

• Any type

• Object type

• Type inference

• Union type

• Void type

and many more...

Now we going to learn more about each of the types mentioned above. But not everything in this particular article.

Type Annotation

TypeScript uses type annotations to explicitly specify types for identifiers such variables, functions, objects, etc.
TypeScript uses the syntax : type after an identifier as the type annotation, where type can be any valid type.
Once an identifier is annotated with a type, it can be used as that type only. If the identifier is used as a different type, the TypeScript compiler will issue an error.
Lets take a look at how we can use type annotation in variables and constants.

let variableName: type; //declares the variable
let variableName: type = value; // declares and initialise the variable with a value
const constantName: type = value;

In this syntax, the type annotation comes after the variable or constant name and is preceded by a colon (:).
The below code uses number annotation for a variable.

let age: number;

After this, you can only assign a number to the age variable:

 age = 23;

If you assign a string or any type to the age variable, you’ll get an error:

let age: number;
age = 'Thousand'; // compile error 

Type '"Thousand"' is not assignable to type 'number'.

The following shows other examples of primitive type annotations:

let name: string = 'Alex';
let age: number = 25;
let active: boolean = true;

In this example, the name variable gets the string type, the age variable gets the number type, and the active variable gets the boolean type.

Arrays

To annotate an array type you use use a specific type followed by a square bracket : type[] :

For example, the following declares an array of strings:

let names: string[] = ['Alex', 'Adam', 'Christy', 'Mercy', 'Sumaya'];

Objects

To specify a type for an object, you use the object type annotation. For example:

let person: {
   name: string;
   age: number
};

person = {
   name: 'Alex',
   age: 23
}; // valid

In this example, the person object only accepts an object that has two properties: name with the string type and age with the number type.

Function arguments & return types

The following shows a function annotation with parameter type annotation and return type annotation:

let greeting : (name: string) => string;

In this example, you can assign any function that accepts a string and returns a string to the greeting variable:

greeting = function (name: string) {
    return `Hi ${name}`;
};

The following causes an error because the function that is assigned to the greeting variable doesn’t match with its function type.

greeting = function () {
    console.log('Hello');
};

*ERROR:
*

Type '() => void' is not assignable to type '(name: string) => string'. Type 'void' is not assignable to type 'string'.

There will be a part three of this article which will feature the rest of the types.