Typescript 3 – Interface & Generic

Interface

interface IsPerson {
name : string;
age: number;
speak(a: string): void;
spend(a: number): number;
}

const me: IsPerson = {
	name: 'shaun',
	age: 30,
	speak(text: string): void {
		console.log(text);
	},
	spend(amount: number): number {
		return amount
	}
}

ex : const greetPerson = (person: IsPerson) => {
	console.log('hello', person.name)
}

greetPerson(me)

const addUID = (obj: object) => {
	let uid = Math.floor(Math.random()*100);
	return {...obj, uid};
}

const addUID = (obj: T) => {
	let uid = Math.floor(Math.random()*100);
	return {...obj, uid};
}
let docOne = addUID({name: 'yoshi', age: 40});

const addUID = <T extends object>(obj: T) => {
	let uid = Math.floor(Math.random()*100);
	return {...obj, uid};
}

let docOne = addUID({name: 'yoshi', age: 40});
let docTwo = addUID('hello') [X]

const addUID = <T extends {name: string}>(obj: T) => {
	let uid = Math.floor(Math.random()*100);
	return {...obj, uid};
}

let docOne = addUID({name: 'yoshi', age: 40}); [|]
let docOne = addUID({name: 20, age: 40});[X]
let docTwo = addUID('hello') [X]

// with interfaces

//Syntax
interface Resource<T> {
	uid: number;
	resourceName: string;
	data: T
}

interface Resource {
	uid: number;
	resourceName: string;
	data: object
}

const docThree : Resource = {
	uid: 1;
	resourceName: 'person',
	data: { name : 'shaun' }
}

# but if it was like below it will be erro :

const docThree : Resource = {
	uid: 1;
	resourceName: 'person',
	data: 'sahun'
}

# This is where the generic come into play :

interface Resource<T> {
	uid: number;
	resourceName: string;
	data: T;
}

const docThree: Resource = {
	uid: 1,
	resourceName: 'person',
	data: 'shaun'
}

# 1. if we want to show object

const docThree: Resource<object> = {
	uid: 1,
	resourceName: 'person',
	data: { name: 'shaun' }
}

# 2. if we want to show string array

const docThree: Resource<string[]> = {
	uid: 1,
	resourceName: 'person',
	data: ['bread','milk']
}

Part – II

Typescript with Map & Set

let map = new Map();
let set = new Set();
let map1 = new Map();
map1.set('hello', 6)

let map2 = new Map ([ ["hello", 1], ["hello2",2] ])

Object & object in Typescript

let x : Object = 'c'
let x1 : Object = true
let x2 : Object = {}
let x3 : Object = new Object();
let x3 : Object = Object.create({});

let y : object = {};
let y1 : object = new Date();
let y2 : object = Object.create({});
let y3 : object = [1,3,4,5];

Ex2 :

let obj1: Object = {};
let obj2: object = {};
let obj3: {} = {};
let obj4: any = {};


obj2.test = "3" [X]
obj3.test = "3" [X]
obj4.test = "3" [X]

Object creation in typescript
let x : {y: number} = {y:8}
console.log(x.y) //OUTPUT : 8

Type Cast

classs classToCoonstruct{
	constructor(){}
}
const obj = new classToCoonstruct();

//Javascript Objects 
function sayHello() {}
sayHello["someValue"] = 3;
console.log(sayHello.someValue);

const fnObj = new sayHello();
fnObj["vl"] = 5;
console.log(fnObj.vl);

INTERFACE

// INTERFACE
interface MyObject {
  a: number;
  b: string;
}
//Implicit Casting
const myObj: MyObject = { a: 1, b: "hello" };

//Explicit Casting
const newObj1 = { a: 7, b: "sayHi" } as MyObject;

//if interface condition satisfied, we can add new properties also.
const newObj2 = { a: 8, b: "SayHello", c: "M" } as MyObject;

//Note : explicit casting is not much safe, bcz even if we mentioned in interface , if we missed the property it will not through error :

const newObj3 = { a: 10 } as MyObject;

Combining Types – Union | , Intersection &&

interface TypeA {
	a: string,
	b: string
}
interface TypeB {
	a: string,
	c: string
}

Union :

function sayHi(param: TypeA | TypeB) : void {
	
}

Intersection :

type TypeC = TypeA & TypeB
const m : TypeC = {
	a: "A",
	b: "B",
	c: "C" 
}

if we want we can make it optional attribute :

c?:string , so 

const m: TypeC = {
	a: "A",
	b: "B"
}

Generics in Typescript

interface MyCustomTypeA {
	test: string
}

interface MyCustomTypeB {
	anything: string
}

interface resusableInterface<T>{
	entity: T
}

const r1: reusableInterface<MyCustomTypeA> = {entity: {test:"yes"}}
const r2: reusableInterface<MyCustomTypeB> = {entity: {anything:"yes"}}

const r3: reusableInterface<number> = {entity: 1}

------------
interface  MyInterface <t1field, t2field> {
	entity1 : t1field
	entity2() : t2field
}

class myClass <T> {
	public list: T[] = [];
	public DisplayFirst() : void {
		const first: T = this.list[0];
		console.log(first)
	}
}

Reference

Learn Typescript in Depth – Code Labs
Net Ninja
TypeScript: Generic Function-Parameter Types
tutorialsteacher
Understanding Generics in TypeScript
How to declare a function type variable in Typescript?
How to do generic type transferring with jsx in TypeScript