Basics

Challenges

Classes

Cookies

Debugging

Events

External Files

Flow Control

Forms

Functions

Html Elements

Installation

Interfaces

Keywords

Modules

Namespaces

Operators

Reference Files

String

Types

TypeScript - Employee Interface Demo

This is a good example of how to use an interface. Like c#, it helps establish a contract. Notice that:

  • All employees, which implement (defined by)IEmployee, have Name, Title, and Type.
  • IManager extends (inherits)IEmployee so managers have everything an Employee has but can also schedule meetings.
  • BossMan implements (defined by)IManager so when you instantiate a new BossMan, he will have all the IManager powers



namespace TypeScriptDemos.Interfaces
{
    // If I ever want to use employee, here's what it looks like:
    interface IEmployee
    {
        Name: string;
        Title: string;
        Type: string;
    }

    // If I ever want to use manager, here's what it looks like:
    interface IManager extends IEmployee
    {
        Department: string;
        NumberOfEmployees: number;

        ScheduleMeeting: (topic: string) => void;
    }

    class Employee implements IEmployee
    {
        Name: string;
        Title: string;
        Type: string
    }

    class BossMan implements IManager
    {
        Name: string;
        Title: string;
        Type: string

        Department: string;
        NumberOfEmployees: number;

        ScheduleMeeting(topic: string): void
        {
        // code that does stuff
        }
    }

    window.onload = function ()
    {
        let bossMan = new BossMan();
        bossMan.Name = "Boss Man";
        bossMan.Title = "Boss"
        bossMan.Type = "FTE";
        bossMan.Department = "Service"
        bossMan.NumberOfEmployees = 10;
        bossMan.ScheduleMeeting("My Meeting")
        let bossManLabel: HTMLElement = <HTMLElement>document.getElementById("boss-label");
        bossManLabel.innerHTML = `${bossMan.Name} ${bossMan.Title} of ${bossMan.Department}`

        let employee = new Employee();
        employee.Name = "Nameless Employee";
        employee.Title = "Pee On"
        employee.Type = "PTE"
        let employeeLabel: HTMLElement = <HTMLElement>document.getElementById("employee-label");
        employeeLabel.innerHTML = `${employee.Name} ${employee.Title} : ${employee.Type}`
    };
}