TypeScript... what is it?
Published: 2020-05-28 06:15:18

### What is TypeScript?
It is a programming language that can be used as an alternative to Javascript. It is basically a superset of Javascript, meaning it extends the features of Javascript and syntax.
- by default, browsers do not understand typescript. Meaning when we write typescript, we have to compile it into javascript in order for browsers to understand it.
- Typescript speeds up your development experience by catching errors and providing fixes before you even run your code
- Types provide a way to describe the shape of an object, providing better documentation, and allowing TypeScript to validate that your code is working correctly
- It is entirely Open Source

*What are some interesting features of typescript?*
* Allows use of **strict types** - once variables are declared to be a certain type, they cannot be changed later on in that variable. This makes error checking and debugging easy. Contrary Javascript uses **dynamic types**
* Supports modern es6 features such as *arrow functions*, *let*, *const*, *destructuring* etc...
* Includes extra features that don't appear in Javascript such as *generics*, *interfaces*, *tuples* and more

*What should I know before diving into TypeScript?*
It is recommended that you have a basic understanding:
- Javascript
- Asynchronous functions
- javascript classes
- DOM and DOM tree

*Some other tools you may need:*
- nodeJS
- a text editor. Personally I use VsCode(has built-in typescript support).
- typescript compiler installed.
- some patience. Typescript may take a while to grasp.

______________________________________________________________________
*How to install TypeScript*
> You can install TypeScript via *npm*
```
npm install -g typescript
```

> To compile typescript we use
```
npx tsc <file-name>
```

______________
## A little about typescript

*Declaring primitive types in TypeScript*

```
// explicit types
let character: string;
let age: number;
let isLoggedIn: boolean;
```
*Declaring arrays*
```
// arrays
let avengers: string[];
```
when initializing empty arrays, it is necessary to use ``= []`` if we intend to use array methods like *push*
```
let avengers: string[] = [];
// this should work
avengers.push('Captain America');

```
*Union types* - using union types, we basically define that a variable may have one of two or three types.
> We initialize types like:
```
// union types
let mixed: (string | number | boolean)[] = [];
// any of these should work
mixed.push('hello');
mixed.push(20);
mixed.push(false);
```
> we can also initialize primitive union types. notice that we dont place the parantheses like we did for the array.
```
let uid: string | number;
```
*objects*
```
// objects
let firstAvenger: object;
// you could declare an object
firstAvenger = { name: 'Steve Rogers', alias: 'Captain America', age: 102 };
// or you could declare an array
firstAvenger = [];
```
> You can further define properties types
```
let secondAvenger: {
    name: string,
    alias: string,
    age: number,
}
```
*Dynamic types* - we define dynamic types using "any". This may be useful when you don't know what type a variable will be. (not recommended, could lead to bugs)

```
// Dynamic types
let userAge: any = 25;

// this could also work
userAge = true;
console.log(userAge);
// this too
userAge = 'Kiki';
console.log(userAge);

let hero: { name: any, home: any };
hero = { name: 'kharioki', home: 'westlands' };
```
*Functions* - 
```
// Functions
let greet: Function;

// then
greet = () => console.log('Waaaaassssuuuppp!!!');
```
> you can define a function that takes optional parameters- you add the ``?`` symbol after the parameter that is optional. *(remember to always put the required parameters first and optional parameters last)*.

```
const add = (a: number, b: number, c?: number| string) => console.log(a+b);

add(5, 10);
```
> A function in typescript returns void when we do not have a return value, e.g.
```
const add = (a: number, b: number, c?: number | string): void => console.log(a + b);
```
*Aliases*
> when we need to reuse type definitions, we can use aliases to avoid repetition
> you can define aliases as shown below:

```
// aliases
type StringOrNum = string | number;
type objWithName = { name: string, uid: StringOrNum };
```
> and then use the aliases like so:
```
// using the alias
const deets = (uid: StringOrNum, item: string) => console.log(`${item} has a uid of ${uid}`);

const sayHi = (user: objWithName) => console.log(`${user.name} says hello`);
```
*Function signatures*
> basically describes the general structure of a function i.e. what arguements it takes in and what type of data it returns.

```
// Function signatures
let holla: (a: string, b: string) => void;
let calc: (a: number, b: number, c?: string) => number;
```
> using function signatures
```
holla = (name: string, msg: string) => console.log(`${name} says ${msg}`);
calc = (num1: number, num2: number, action: string) => {
  if(action === 'add'){
    return num1 + num2;
  } else {
    return num1 - num2;
  }
}
```

___________

Okay, this is getting quite long, so let's end it here.
If you'd like to check out more implementation of Typescript, specifically DOM manipulation, *Type casting*, *modules*, *interfaces*, make sure to check out this [repo](https://github.com/kharioki/Finance_logger). It shows a simple implementation of TypeScript in a web app.