Typescript
Published: 2021-03-16 05:06:33

For this and all other upcoming blogposts, I wanted to cover topics that were most relevant to tech professionals right now. So I posted a question in my friend's dev-based discord for suggestions on topics and I got few different responses but the one consensus among them of a relevant topic was Typescript.

The first thing to know about typescript is that it IS javascript, or rather it's a superset of javascript, meaning that it is a language built on top of javascript and any javascript is a valid typescript. It was designed by Anders Hejlsberg at Microsoft and is maintained by Microsoft. its first version 0.8 was released in October 2012. In the following years a few more major updates were released leading all the way up to Typescript 4.0 which was released Aug 20th, 2020.

## FEATURES

**Compiling**
Typescript doesn't actually run anywhere. To execute typescript it needs to be compiled. The tsc command runs the typescript compiler. After installing typescript globally with the npm i -g command, you can create a .ts file which is where you can write your typescript code. Then you can write whatever typescript code you want in the file and when you want to compile you can run the tsc command on your index.ts file and the transpiler will compile it into javascript for you in a .js file of the same name. You can also create a config file and set up a few options there to automate some of the things the transpiler can do for you.

**Typing**

Typescript's biggest feature is that it is object-oriented and strongly-typed. Javascript is a loosely-typed, an interpreted language, which while providing much flexibility, can allow many bugs to go unnoticed until they wreak havoc at production time. 

```javascript
const sum = (num1, num2) => {
  return num1 + num2
}; /*javascript will allow any datatype to be passed as a parameter here*/

sum(3, 4); // returns 7
sum('A', 4); // will return 'A4'
```

With Typescript on the other hand you can declare the type a variable needs to be to narrow-down possible bugs that may arise from passing the wrong data-type into the arguments of a function.

There are two types of typing in typescript. Implicit typing and explicit typing. Implicit typing happens when you declare a variable and assign a datatype to it such as a string. Typescript will automatically note it as that specific data type so if it reassigned to another data type such as a number it will throw an error right there.

```typescript
let greeting = 'Hello world'

greeting = 27; //it will prevent you from reassigning greeting to //a number
```

You can also explicitly type variables and parameters with the colon. Right after the declaration of the variable, you can type the colon and then its data type as defined by javascript.

```typescript
const sum = (num1: number, num2: number) {
  return num1 + num2
};

sum(3, 4); //returns 7
sum('A', 4); //is highlighted an disallowed because num1 can only //be a number
```
To preserve javascript's flexibility if you choose to opt-out of the typing, you can use the <any> tag, or you can declare the variable by itself.

```typescript
let example;

let example2 : any = 14;

example = 'example';
example = true;   //these should all work.
example2 = 'example2';
```

Additionally, you can also create your own types.

```typescript
type Fourteen = 'fourteen' | 14;

let fourPlus10: Fourteen = 14;
let digitFourPlus10: Fourteen = 'fourteen';
```

Obviously, that is a very basic and redundant example of custom typing. With interface you can type an object, almost like a constructor. You can define an object and what its keys and value datatypes should be

```typescript
interface Car {
    color: string;
    year: number;
    automatic: boolean;
}

const camry: Car = {
    color: 'silver', //this will work
    year: 2021,      //if i try to add another prop it won't
    automatic: true;
}
```

Though you can circumvent this, just like the "any" type. 

```typescript
interface Animal {
    name: string;
    species: string;
    age: number;
    [key: string]: any
}

const pet: Animal = {
    name: 'jecko',
    species: 'cat',
    age: 2,
    idiot: true
}
```
With functions, you can type both the arguments that they take and the result that they return. Just like the variables you can type the parameters and then after the parameters and before the bracket you can type what the function should return. 

```typescript

function greet (timeOfDay: string, name: string) : string {
    return `good ${timeOfDay} ${name}!`
}`
```
If you don't want to type the function replace whichever type with void.

```typescript
 function laugh () : void {
  console.log('hahahahaha')
}
```

You can type arrays as well. This can be useful in a few different scenarios, such as if you want an array of just numbers or especially when dealing with an array of objects. 

```typescript
const numArray: number[] = [];

numArray.push(1); //works
numArray.push(2); //works
numArray.push('hello'); //throws error
```

You can also create touples, which are arrays with a fixed amount of indexes. Here you can declare an array that takes a specific amount of arguments each with its own specific type. But if you strongly type an array like this, when it's being declared it will demand that all the indices be present with their appropriate values. This can be circumvented with the "?" optional.

```typescript
type sixSidedDie = [number, number, number, number, number, number];

const dice: sixSidedDie = [1,2,3,4,5,'six']; //won't work
const dice: sixSidedDie = [1,2,3,4,5];//won't work

type sixSidedDie = [number, number, number, number, number, number?];

const dice: sixSidedDie = [1,2,3,4,5]//will work
```

**Third-party libraries**
Typescript supports almost all javascript libraries. Typescript also supports nearly all javascript libraries.