Writing Code

Write Code in a Way Comfortable to You

by

Josoroma

Interfaces

Anyway, long story short: An interface is very helpful for given shape to Our JavaScript Objects. Generally speaking, an interface is just a complex type definition with a Public Contract that an implementation “conforms” to.

"use strict";

interface Warrior {
    // Required Properties.
    name: string;
    email: string;
    // Optional Properties.
    avatar?: Object;

    // API
    log(): void;
}

Contracts

That being said any external Class can consume or stablish a Contract without caring about how it’s implemented.

Without Optional ParameterS

class Clan implements Warrior {

    public name: string;
    public email: string;

    public constructor(name, email) {
        this.name = name;
        this.email = email;
    }

    public log(): void {
        console.log(`
            Name:     ${this.name}
            Email:    ${this.email}
        `);
    }
}

Ab-using Optional ParameterS

class ClanHelper implements Warrior {
    // Required Properties
    public name: string;
    public email: string;

    // Optional Properties
    public avatar: Object;

    public constructor(name, email, avatar) {
        this.name = name;
        this.email = email;
        this.avatar = avatar;
    }

    public get getAvatar () : Object {
        return this.avatar;
    }

    public set setAvatar (avatar: Object) : Object {
        this.avatar = avatar;
    }

    public log(): void {
        console.log(`
            Name: ${this.name}
            Email: ${this.email}

            Avatar: ${this.avatar}
        `);
    }

}

A Couple of Things About Getters and Setters

Are useful shortcuts for accessing and mutating data within an object. –John Resig.

Please keep in mind:

  • Declare variables private and expose them via a getter, but please don’t provide a setter.
  • Is a good idea to generally handle our objects as close to immutable as possible.

New Clan Results

// Conforms.
const clanWarrior = new Clan('NinjaDev', 'no_reply@ninjadevs.io');

clanWarrior.log();
Name:     NinjaDev
Email:    no_reply@ninjadevs.io

clanHelperOne

// Conforms.
const avatar = {
    src: 'avatar.png'
};

const clanHelperOne = new ClanHelper('NinjaDev', 'no_reply@ninjadevs.io', avatar);

clanHelperOne.log();
console.log(clanHelperOne.getAvatar);

Result:

Name:     NinjaDev
Email:    no_reply@ninjadevs.io

Avatar: [object Object]
        
Object
  src: "avatar.png"
  __proto__: Object

clanHelperTwo

// Not Conforms: Supplied parameters do not match any signature of call target.
const clanHelperTwo = new ClanHelper('NinjaDev', 'no_reply@ninjadevs.io');

clanHelperTwo.log();
console.log(clanHelperTwo.getAvatar);

Result:

Name:     NinjaDev
Email:    no_reply@ninjadevs.io

Avatar: undefined
        
undefined

clanHelperThree

// Not Conforms: Supplied parameters do not match any signature of call target.
const clanHelperThree = new ClanHelper('NinjaDev', 'no_reply@ninjadevs.io');

clanHelperThree.setAvatar = avatar;
clanHelperThree.log();
console.log(clanHelperThree.avatar);

Result:

Name:     NinjaDev
Email:    no_reply@ninjadevs.io

Avatar: [object Object]
        
Object
  src: "avatar.png"
  __proto__: Object

clanHelperFour

// Conforms.
const logo = {
    src: 'logo.png'
};

const clanHelperFour = new ClanHelper('NinjaDev', 'no_reply@ninjadevs.io', avatar);

clanHelperFour.log();
console.log(clanHelperFour.getAvatar);

clanHelperFour.setAvatar = logo;
console.log(clanHelperFour.getAvatar);

Result:

Name:     NinjaDev
Email:    no_reply@ninjadevs.io

Avatar: [object Object]
        
Object
  src: "avatar.png
  __proto__: Object

Object
  src: "logo.png"
  __proto__: Object

Summary

We can make use of JavaScript Object-Oriented Programming patterns without classes. It happens that JavaScript Objects implement state/properties and behavior/methods, so We don’t generally need classes at all.

But if you ever feel fanatic about the new class syntax, just go ahead and ab-use it. Please let us know your findings.

Comments

comments

Powered by Facebook Comments