
### What is TypeScript ?

TypeScript is a language building up on JavaScript that adds features (like types) to JavaScript language ,which allows us to identify errors during compile time.The TypeScript compiler compiles our code to javascript because the browser can't run typescript.

###### TypeScript Advantages ?

- Types
- Features like interfaces or generics
- Meta-Programming features like decorators
- Rich configuration options

###### Core Types

- number - all number (integers or floats)
- string - all text values
- boolean - truthy or falsy value
- object - any js object
- Array - any js array,type can be flexible or strict
- Tuple - Added by TypeScript , fixed length array - Eg:[number,string]
- Enum - enum {NEW,OLD} - Added by TypeScript , automatically enumerate global constant identifiers - Eg: enum Role {ADMIN,AUTHOR}
- any - TypeScript compiler will not check for any types

###### Key difference between JavaScript and TypeScript

| JavaScript                             | TypeScript                               |
| -------------------------------------- | ---------------------------------------- |
| Uses dynamic types resolved at runtime | Uses static types set during development |

![TypeScript Runtime](https://media.makeameme.org/created/just-try-to-3cbd71d66a.jpg)

#### Type Assignments and Type Inference

In TypeScript, there are several places where type inference is used to provide type information when there is no explicit type annotation. For example, in this code

```js
let x = 3;
//x:number
```

The type of the x variable is inferred to be number. This kind of inference takes place when initializing variables and members, setting parameter default values, and determining function return types.

Lets take an example of inference in object types

```js
const person = {
  name: "jack",
  age: 24,
  hobbies: ["cricket", "movies"],
};
```

When we hover on person we get something like

```tsx
const person: { name: string; age: number; hobbies: string[] };
```

This is not an object but object type infered by typescript as you can see ";" between two key value pair just to be sure.

###### Union Type

Lets take a function and understand union type.
If we use just one type say number in our function we will find typescript yelling at us when we do combine("codered", "jack"). To solve this we use union types which makes accepting parameter with different types flexible.

```ts
function combine(input1: number | string, input2: number | string) {
  const res = input1 + input2;
  return res;
}

const combineAges = combine(20, 30);
console.log(combineAges);

const combineNames = combine("codered", "jack");
console.log(combineNames);
```

###### Literal Type

So in this function we want to convert our result based on the resultConvertion parameter provided.
The only thing is we have to memorize the resultConvertion and if we make any mistake with name our logic won't work.
To provide flexible typescript provides us with literal types as we can see we have added type "as-number" | "as-text" to resultConvertion . If we provide any parameter beside these two we will get an error.

```ts
function combine(
  input1: number | string,
  input2: number | string,
  resultConvertion: "as-number" | "as-text"
) {
  let result;

  if (typeof input1 == "number" && typeof input2 === "number") {
    result = input1 + input2;
  } else {
    result = input1.toString() + input2.toString();
  }

  if (resultConvertion === "as-number") {
    return +result;
  } else {
    return result.toString();
  }
}

const combineAges = combine(20, 30, "as-number");
console.log(combineAges); //50

const combineStringAges = combine("20", "30", "as-number");
console.log(combineStringAges); //2030

const combineNames = combine("codered", "jack", "as-text");
console.log(combineNames); //coderedjack
```

###### Type Alias

In order to avoid repeated assignment of types we can store multiple types under one shelter and use it everywhere.
We can use any name other than reserved keyword for aliases.

```ts
type Combinable = number | string;
type ConversionDescriptor = "as-number" | "as-text";
function combine(
  input1: Combinable,
  input2: Combinable,
  resultConvertion: ConversionDescriptor
) {}
```

![TypeCheck Function](https://pics.me.me/typescript-undefined-is-not-a-function-ts-be-like-66890487.png)

###### Function Retrn Types and void

We can assign a return type explicitly or let typescript infer the return type.
We also have void type if we don't have value to return.

```ts
function add(n1: number, n2: number): number {
  return n1 + n2;
}

function print(num: number): void {
  console.log("Result" + num);
}

print(add(1, 2));
```

###### Function as Types

```ts
let combineValues: Function;
combineValues = add;

console.log(combineValues(1, 2));
```

Looks cool but lets say we assign print function to combineValues instead of add function.
Works fine !!!, which is something we don't want RIGHT?

So to resolve this we do something like this where we declare types of parameter as well as return type.

```ts
let combineValues: (a: number, b: number) => number;
```

###### Function types and callbacks

```ts
function addAndCall(n1: number, n2: number, cb: (num: number) => void) {
  const result = n1 + n2;
  cb(result);
}

addAndCall(10, 20, (result) => {
  console.log(result);
});
```

###### Unknown Type

```ts
let userInput: unknown;
let userName: string;
//possible
userInput = 10;
userInput = "jack";
//not possible
userName = userInput; //error unknown type cannot be assigned to string , if we do any it will bypass error check
```

###### Never Type

Since the error is being thrown it cancels our script so this function will never return.
If that has not been the case we would have atleast got undefined.But if we console this function it doesn't return.

```ts
function generateError(message: string, code: number): never {
  throw { message: message, errorCode: code };
}

generate("An error occured", 500);
```

![Type Check](https://miro.medium.com/max/1400/1*YjEzt33urW72UNupDcj_bQ.jpeg)

#### Classes and Interface

Lets look at how a class is created using TypeScript.

```ts
class Department {
  name: string;

  constructor(n: string) {
    this.name = n;
  }

  describe() {
    console.log("Department: " + this.name);
  }
}

const accounting = new Department("Accounting");
accounting.describe();
```

Now when we run the following code,we get result as Department: undefined as the accountingCopy doesn't have any name property and we are calling describe function with accountingCopy object.

```ts
const accountingCopy = { describe: accounting.describe };
accountingCopy.describe();
```

So to keep a check on this weird call we add an extra type safety so that it doesn't allow a function to be called without the syntax of that particular class.

```ts
class Department {
  name: string;

  constructor(n: string) {
    this.name = n;
  }

  describe(this: Department) {
    console.log("Department: " + this.name);
  }
}

const accounting = new Department("Accounting");
accounting.describe();

//error
const accountingCopy = { describe: accounting.describe };
accountingCopy.describe(); //error

//solution
const accountingCopy = { name: "Sales", describe: accounting.describe };
accountingCopy.describe(); // no error
```

###### Public and Private access modifiers

With javascript it is possible to access and change class property from outside like _accounting.employees[2]='Tom'_
.But by adding **private** access modifiers before a property we can cut off this behaviour.

**public** is added to properties by default.

We also have a **protected** property which can be used by inherited class which extends the parent class.

```ts
class Department {
  public name: string;
  private employees: string[] = [];

  constructor(n: string) {
    this.name = n;
  }

  describe(this: Department) {
    console.log("Department: " + this.name);
  }

  addEmployee(employee: string) {
    this.employees.push(employee);
  }
}

const accounting = new Department("Accounting");

accounting.addEmployee("Sumit");
accounting.addEmployee("Jack");
```

**ShortHand**

We can add access modifiers in constructor itself to create property in class and at the same time get arguments in the constructor.

readonly property can only be assigned once during initialization and thereafter can't be changed.

```ts
class Department {
  //private id:string;
  //public name:string;
  private employees: string[] = [];

  constructor(private readonly id: string, public name: string) {
    this.id = id;
    this.name = name;
  }
}
```

###### Inheritance

```ts
class ITDepartment extends Department {
  constructor(id: string, public admins: string[]) {
    super(id, "IT");
    this.admins = admins;
  }
}

const it = new ITDepartment("a1", "Jill");
```

###### Getters and Setters

```ts
class AccountingDepartment extends Department {
  private lastReport: string;

  get mostRecentReport() {
    if (this.lastReport) {
      return this.lastReport;
    }
    throw new Error("Report not found");
  }

  set mostRecentReport(value: string) {
    this.addReport(value);
  }

  constructor(id: string, private reports: string[]) {
    super(id, "Accounting");
    this.lastReport = reports.slice(-1)[0];
  }

  addReport(text: string) {
    this.reports.push(text);
    this.lastReport = text;
  }
}

const accounting = new AccountingDepartment("d2", []);
accounting.addReport("Something went wrong!!!");
console.log(accounting.mostRecentReport); //get
accounting.mostRecentReport = "New Report"; //set
```

###### Static properties and methods

These properties and methods are directly accessed via class.We don't need to access this using instance.
Eg: Math.PI , Math.pow()

static properties cannot be accessed by class members and constructor methods using this.

```ts
class Department {
  //private id:string;
  //public name:string;
  private employees: string[] = [];

  static fiscalYear = 2021;
  static createEmployee(name: string) {
    return { name: name };
  }
  constructor(private readonly id: string, public name: string) {
    this.id = id;
    this.name = name;
  }
}

const emp1 = Department.createEmployee("Alice");
console.log(Department.fiscalYear);
```

###### Abstract Methods

When we want that children inheriting a class to override a cetain method we use abstract keyword.

An abstract method can only be present in an abstract class.

```ts
abstract class Department {
  abstract describe(this: Department): void;
}
```

Now we will have an error in the children class which has inherited from base class Department and have not implemented this abstract method.

To solve this issue lets implement this method in children too.

Other important thing is abstract class can't be instantiated.

```ts
class ITDepartment extends Department {
  describe() {
    console.log("IT says whats up!");
  }
}
```

###### Singleton and Private constructor

```ts
class AccountingDepartment extends Department {
  private lastReport: string;
  private static instance: AccountingDepartment;
  get mostRecentReport() {
    if (this.lastReport) {
      return this.lastReport;
    }
    throw new Error("Report not found");
  }

  set mostRecentReport(value: string) {
    this.addReport(value);
  }

  private constructor(id: string, private reports: string[]) {
    super(id, "Accounting");
    this.lastReport = reports.slice(-1)[0];
  }

  static getInstance() {
    if (AccountingDepartment.instance) {
      return this.instance;
    }
    this.instance = new AccountingDepartment("d2", []);
    return this.instance;
  }

  addReport(text: string) {
    this.reports.push(text);
    this.lastReport = text;
  }
}

const accounting = AccountingDepartment.getInstance();
```

#### Interfaces

An interface describe the structure of an object.
We can use interface to type check an object.

```ts
interface Person {
  name: string;
  age: number;

  greet(phrase: string): void;
}

let user1: Person;

user1 = {
  name: "Sumit",
  age: 24,
  greet(phrase: string) {
    console.log(phrase + " " + this.name);
  },
};

user1.greet("Hi there .I am ");
```

We can use user interface to share it among classes which implements this interface.
Every class that adheres to this interface must have property and methods corresponding to the interface.

We cannot set private and public in interface but we can set readonly , so as to ensure the property is only changed once during initialization and cannot be changed thereafter.

```ts
interface Greetable {
  readonly name: string;
  greet(phrase: string): void;
}

class Person implements Greetable {
  name: string;
  age = 24;
  constructor(n: string) {
    this.name = n;
  }

  greet(phrase: string) {
    console.log(phrase + "" + this.name);
  }
}
```

Interfaces can be extended
Also we can extend from multiple interfaces using "," , but for classes we can extend from only one.

```ts
interface Named {
  readonly name: string;
}

interface Greetable extends Named {
  greet(phrase: string): void;
}
```

###### Interface as function types

```ts
interface AddFn {
  (a: number, b: number): number;
}

let add: AddFn;

add = (n1: number, n2: number) => {
  return n1 + n2;
};
```

###### Optional property & parameters

We can also mark methods as optional Eg: method?(){...}.

Here even if we don't have outputName property, we don't get any error.

```ts
interface Named {
  readonly name: string;
  outputName?: string;
}
```

Next we will discuss about Advanced Types , Generics and Decorators and using webpack with TypeScript.

_Reference_ : Understanding TypeScript - Maximilian
