TypeScript Basics
Tags: typescript, javascript, beginners
Published: 2022-01-31 22:09:31

TypeScript is superset to JavaScript. TypeScript adds optional types to JavaScript that support tools for large-scale JavaScript applications. TypeScript compiles to readable and standard-based JavaScript. Angular embraces TS.

## Installing TypeScript

If we want to be able to install TypeScript globally, there is a CLI command:

```console
npm install -g typescript
```

If we want to be able to use TypeScript as dependency on specific project there is also command. When we run it, it will create json files and node modules.

```console
npm install typescript --save-dev
```

## Compiling TypeScript File

We create file with .ts extension. But it is not enough, we need to invoke TypeScript compiler. TypeScript code needs to be compiled to Vanilla JavaScript to be able to run in the browser. After successful compilation, we will get Vanilla JavaScript version of TS file. If there are errors, we will be notified in terminal. 

To be able to do it we need TypeScript configuration file to be able to compile all our TS files. Result is tsconfig.json file, where we have many options (like strict type checking mode). Angular has this file by default.

```console
npx tsc --init
```

To be able to watch for changes that we made and apply them immediately, there is watch mode:

```console
npx tsc --watch
```


## Primitive Types Examples

Add static types in TypeScript is not difficult. Bellow is syntax for variable with number, string and boolean type declaration. If we pass value of different type, TS will throw and error:

```typescript
let mark: number = 9;
let firstName: string = 'John';
let hasPassport: boolean; 
```

## Reference Types Examples

If we want to have array of string, we use square brackets:

```typescript
let cars: string[]; 
cars = ['Audi', 'Cadilac', 'Honda'];
```

We define which kind of type should be stored in object before adding values:

```typescript
let student: {
    name: string;
    gpa: number;
};

student = {
   name: 'John',
   gpa: 8
};
```

If we want to store an array of objects, TypeScript has syntax for that too:

```typescript
let students: {
   name: string;
   gpa: number;
}[];
```
But here we have next problem - we repeat our selves, code is not clean. We can fix this using type alias to avoid repeating. It is pure TypeScript feature.
First, we define Type alias:

```typescript
type Student = {
   name: string;
   gpa: number;
}
```
Next, we set object type and what value should it take:

```typescript
let student: Student;

student = {
    name: 'John',
    gpa: 8
};

let students: Student[];
```

## Union Types

You want to your variable be able to take multiple types? No worries, there are union types:

```typescript
let password: string | number | boolean = 'abc';
password = 999;
```

We can hold an array of strings too:

```typescript
let data: string | string[]; 
```


## Type Inference

TypeScript have important feature and that is Type Inference. It help us write less and more cleaner code. 

When we declare a variable TS sees which type we store and it will use that type as main type. So, if we try to declare another type it will throw an error. So, we don't need to add a type, we stich with type inference as much as possible.

## Functions

We can add types to function. Functions even have types for return values and we can define it.

```typescript
function add(a: number, b: number): number {
    return a + b;
}
```

There is possibility to use union type of function return type:

```typescript
function add(a: number, b: number): number | string {
    return a + b;
}
```

There is special type called void. Void means that function don't return anything. Any property means that any type is allowed.

```typescript
function printOut(something: any) { 
    console.log(something)
}
```


## TypeScript Classes

In the code example bellow is defined class, with reduced code:

```typescript
class Car {
    constructor(
        public model: string,
        public color: string,
        public seatsNumber: number,
        public features: string[]
    ) {}

    addFeature(feature: string) {
       this.features.push(feature);
   }
}

const car1 = new Car('BMW5', 'red', 4, ['Sunroof', 'Backup camera', 'Navigation system']);

car1.addFeature('Bluetooth');
```

## Interfaces

Interfaces are object typed definitions. They exists in most static typed programming languages. But they are not available in Vanilla JavaScript, so TypeScript is there to help. And is worth to mention that interfaces are not compiled.

First we define structure of any object that we wanna create. For methods (functions inside object) we just add type. Void type means that it returns nothing.

```typescript
interface Animal {
    breed: string;
    age: number;
    
    sayHello: () => void;
}

let rex: Animal;

rex = {
    breed: 'German Sharpeid',
    age: 3,
    sayHello() {
        console.log('AW AW');
   }
}
```

If we want our class to implement features from Interface, that class will be forced to use features defined in Interface correctly, so we are able to get certain advantage. We have to add all properties as we can see in example below:

```typescript
class WildAnimals implements Animal {
  breed: string;
  age: number;
  sayHello() {
      console.log('rrr');
  }
}
```