From JavaScript to TypeScript Crash Course/CheatSheet : Basics
Tags: typescript, javascript, codenewbie, programming
Published: 2021-06-19 07:51:25

### TypeScript Compiler
#### Install 
```
sudo npm install typescript -g
```
or

```
brew install typescript
```

#### Run the Compiler
```
tsc <fileName.ts>
```
If I have a file named "index.ts"
```
tsc index.ts
```
The TypeScript compiler essentially converts a TypeScript File to a JavaScript File. It produces a new .js file.
```
index.ts -> index.js (a new file, doesn't overwrite .ts file)
```
It also checks for errors in your code

#### tsconfig.json File
 It helps you configure your compiler.
To create a sample tsconfig.json fil 
```
tsc -init
```
You can configure the root to all your typescript files and the destination where you'd like the converted javascript files to be stored
```
// tsconfig.json 
{
   "src" : "path to root folder with typescript files",
   "dist": "path to the folder where you want converted javascript files to be stored"
}
```

If you get errors while importing JS Modules, add the following to tsconfig.json
```
  "compilerOptions": {
    ...
    "allowJs": true,
    "checkJs": false,
    ...
  }
```

---
### Declaring Variable Types

```typescript
var variableName : type = value
```
#### Example
```typescript
var myNumber : number = 1
var myString : string = "Hello World"
```
---
### Basic Supported types
- number  (Includes integers, float, and double)
- string
- boolean
- undefined
- null 

```typescript
var myString : string = 'Hello World';
 
myString = 1337; 
// Error: Type 'number' is not assignable to type 'string'
```
Unlike JavaScript, it performs type checking and returns an error if we try to assign a value that has a different datatype than the one initially assigned.

---
### The "Any" Tyoe
Any is like a wild card type. When you set a variable's type to any, it is more or less JavaScript since no type check is performed
```typescript
var randomVariable : any = 10
randomVariable = false // TypeScript doesn't give an error
```
---
### Function Parameter Types
```typescript
function myFunction (param1 : number, param2: boolean)
{
  
}
```
It follows a similar syntax to declaring types for variables. If you declare the types of the parameters, type checking will be performed when you invoke the function

```typescript
myFunction(1,false) // Works Fine

myFunction("1",true)
// ERROR: Argument of type 'string' is not 
// assignable to parameter of type 'number'.
```

#### Arrow functions
```typescript
const myFunction  = (param1 : number, param2: boolean) => {}
```
---
### Optional Parameters
```typeScript
function funcOptional(param1: number, optionalParam ?: string){

}

funcOptional(20) // Works Fine
funcOptional(20,"Hello") //Works Fine
```
Put a question mark before the colon to denote an optional parameter

#### Arrow Functions
```typeScript
const funcOptional = (param1: number, optionalParam ?: string) => {}
```

>> RULE: Non-Optional/Required Parameters CAN NOT follow Optional Parameters

```typescript
function funcOptional(param1: number, 
optionalParam ?: string, requiredParam : string) 
{

}

//ERROR: A required parameter cannot follow an optional parameter.
```
---
### Default Parameters
```typeScript
function funcDefault(param1: number, defaultParam: number = 10) 
{

}

funcDefault(10)
funcDefault(10,20)
```
A default parameter makes the parameter optional, you don't need a question mark if you are setting a default value for the parameter.

#### Arrow Function
```typescript
const funcDefault = (param1: number, defaultParam: number = 10) => {}
```
---
### Function Return Type
```typescript
function myFunction() : number{
  return 1
}
```

#### Void Return Type
Use this when your function doesn't return anything
```typescript
function voidFunction(): void{
  console.log("Hello World")
}
```
#### Arrow Functions
```typescript
 const myFunction = () : number => {
  return 1
}

const voidFunction = (): void => {
  console.log("Hello World")
}
```
---
### Functions Comments
```typescript
/**
* Statement 1
* Statement 2 
*/
```

It supports the syntax for JavaScript Comments as well

---
### Type Inference

In some cases, the type doesn't have to be explicitly specified. TypeScript can infer the type
```typescript
function myFunc(num1: number, num2: number){
  return num1 + num2
}
```

We do not need to specify the return type of the function above, TypeScript can infer that the return type is a number since the addition of two numbers will always return a number.

```typescript
var someNum = myFunc(10,20)
```
In the above case as well, we do not need to specify the type of the variable. The type of the variable can be inferred by TypeScript based on the return type of the function. The myFunc functions return a number type therefore the type of the variable someNum is also a number.

---
### Declaring an Array Type Variable
We need to put a ' []' after the datatype
```typescript
let numArr : number[] = [1,2,3,4,9.81]
// Array of numbers, if you try to insert any non-number value, 
// it will give an error

let strArr : string[] = ["Hello" , "World" , "TypeScript"]
// Array of string values


let mixedArr : any[] = [1 , 2 ,'Hello' , 'World', false]
// Array of mixed data types
```
---
### Multi-Dimensional Array
Simply add another ' [] ' to the data type.
```typescript
let multiArr : number[][] = [
  [1,2],
  [2,3],
  [3,4]
]

// number[] [] can also be writtedn as 
// (number[])[]


let threeDimArr : number[][][] = [
  [
    [1,2] , [2,3]
  ],
  [
    [1] , [2]
  ]
]

// Similary number[][][] can be written as 
// ((number[])[])[]
```
---
### Interfaces
Interfaces let you combine multiple data types or variables. Below are a couple of examples
```typescript
interface Coordinate{
  x : number,
  y: number
}


interface Student{
  fname: string ,
  lname: string,
  age?: number,
  ID?: string
}
```

We can also set some variables as optional. Eg: in Student, the age and ID are optional.
>> We can not initialize the variables.

Below is how we could use the above interfaces
```typescript
const func = (
  student: Student,
  coordinate: Coordinate
) => {
  console.log(`${student.fname} stays at (${coordinate.x},${coordinate.y})`)
}


func(
  {fname: "Rahul", lname: "Banerjee", age: 21},
  {x: 10, y :20}
)

```
---
### Import and Export in TypeScript

#### Export

We can use the export keyword

```typescript
//index.ts

export interface Coordinate{
  x : number ,
  y: number
}

const func = ( 
  p1: Coordinate,
  p2: Coordinate
): Coordinate => {
    return {
      x: p1.x + p2.x,
      y: p1.y + p2.y
    }
}

export {func as func_add_points}
```

#### Import
```typescript
import {Coordinate} from './index'
import index = require("./index")
import * as fs from 'fs'


const p1: Coordinate = {
  x: 1,
  y: 2
}

const p2: Coordinate = {
  x: 5,
  y: 6
}

console.log(
index.func_add_points(p1,p2)
)
```