[Interfaces] #typescript

README.md

Interfaces

interfaces.ts

interface color {
    // readonly
    readonly name: string;
    value: string;
    // optional property
    date?: string;
    [propName: string]: any;
}

function printColor(colorObj: color): void {
    colorObj.date = colorObj.date || new Date().toLocaleDateString()
    console.log(`Name - ${colorObj.name}, color - ${colorObj.value}. Created ${colorObj.date}`)
}

// OK
const colorObj1 = {
    name: 'Blue',
    value: '#0000FF'
}

// BAD
// It will fail if varible does not have any common object property
const colorObj2 = {
    name: 'Green',
    // val not value
    val: '#435FF3'
}

printColor(colorObj1)

// Function Types
interface SearchFunc { 
    (source: string, subString: string): boolean
}


const searchValue: SearchFunc = (src, sub) => src.search(sub) > -1

/*******************/
/* Indexable Types */
/*******************/
interface StringArray { 
    // states that StringArray is indexed with a number, it will return a string
    [index: number]: string
}

const arr: StringArray = ["bob", "jon"] // ok

interface NumberDictionary { 
    [index: string]: number
    length: number
    // ?
    // name: string; // error
}

interface ReadonlyStringArray { 
    readonly [index: number]: string
}

let myArray: ReadonlyStringArray = ["Alice", "Bob"]
// myArray[2] = "Mallory"; // error!

/////////////////
// Class Types //
/////////////////

// Imlementing interface
// Interfaces describe the public side of the class, rather than both the public and private side
interface ClockInterface1 { 
    currentTime: Date
    setTime(d: Date): void
}

// when a class implements an interface, only the instance side of the class is checked
// constructor sits in the static side
class Clock1 implements ClockInterface1 { 
    currentTime: Date = new Date()
    setTime(d: Date) { 
        this.currentTime = d
    }
    constructor(h: number, m: number) { }
}

// Difference between the static and instance sides of classes
interface ClockConstructor2 { 
    new (hour: number, minute: number)
}

interface ClockInterface2 { 
    tick(): void
}

const Clock2: ClockConstructor2 = class Clock2 implements ClockInterface2 {
    constructor(h, m) {}
    tick() { 
        console.log('tick-tick')
    }
}

new Clock2(10, 20).tick()

//////////////////////////
// Extending Interfaces //
//////////////////////////

interface Shape { 
    color: string
}

interface Square extends Shape { 
    sideLength: number
}

const square: Square = {
    color: 'Blue',
    sideLength: 8
}

console.log(square)