Class interface in typescript

Question

I am new to typescript and not that familiar.

I was reading this blog on web and trying to comprehend the code

Here the author have created a simple route

// /lib/routes/crmRoutes.ts

import {Request, Response} from "express";

export class Routes {
    public routes(app): void {
        app.route('/')
        .get((req: Request, res: Response) => {
            res.status(200).send({
                message: 'GET request successfulll!!!!'
            })
        })
    }
}

Which is he is using like this in a kind of main-entry point file

// /lib/app.ts

import * as express from "express";
import * as bodyParser from "body-parser";
import { Routes } from "./routes/crmRoutes";

class App {

    public app: express.Application;
    public routePrv: Routes = new Routes();

    constructor() {
        this.app = express();
        this.config();
        this.routePrv.routes(this.app);
    }

    private config(): void{
        this.app.use(bodyParser.json());
        this.app.use(bodyParser.urlencoded({ extended: false }));
    }
}

From the definition I read on web, Classes are also like interface in typescript, so this line

 public routePrv: Routes = new Routes(); 

Here, Routes is an interface for routePrv:? And from my vague understanding, interface usually looks like this

interface Person {
  name: string;
  age: number;
} 

So my question is that, How can a class be an interface and how will our interface look like in case of

public routePrv: Routes = new Routes();

Can someone please explain the same?

Answer 1

You are confusing Interfaces and Types.

An Interface (interface MyInterface {}) is used to express what an Object has to look like. After typescript transpilation, interfaces are removed. They are more like "hints" for typescript. An example of its usage is this:

interface MyInterface {
   myProp:number;
}

const myConst = {myProp: 0}; // implicitly implements MyInterface
const myConst2:MyInterface = {myProp: 0}; // Explicitly tells typescript the type of "myConst2" should be "MyInterface"
const myConst2:MyInterface = {}; // Error, does not implement "MyInterface" correctly

function myFunc(input:MyInterface) {/* Do something */}

myFunc(myConst); // Works
myFunc(myConst2); // Works
myFunc({}); // Fails

Classes (class MyClass {}) boil down to Constructor Functions. They are a way of constructing an Object. Since they describe how to construct an Object and thus describe the constructed Object's shape, they can also be used to describe the type of an Object. Since Classes are Constructor Functions, they do something during runtime. Hence, only their usages as types are removed.

// You can explicitly implement the interface or explicitly, doesn't matter for its usage.
// Explicitly just tells typescript that this class MUST implement the interface
class MyClass /* implements MyInterface */ {
   constructor(public myProp?:number = 0) {}
} 

const myClassConst = new MyClass(); // works
const myClassConst2:MyClass = new MyClass(); // works
const myClassConst3:MyInterface = new MyClass(); // works

myFunc(myClassConst); // works
myFunc(myClassConst2); // works
myFunc(myClassConst3); // works

function myFunc2(input:MyClass) { /* Do something */ }

myFunc2(myClassConst); // works
myFunc2(myClassConst2); // works
myFunc2(myClassConst3); // works

As per Request, another example of what does not work:

class MyOtherClass {
    constructor(public myProp:number) {}
}

const myOthClassConst = new MyOtherClass(); // works
const myOthClassConst2:MyClass = new MyOtherClass(); // fails, type mismatch
const myOthClassConst3:MyInterface = new MyOtherClass(); // fails, type mismatch

function myFunc3(input:MyOtherClass) {}

myFunc3(myOthClassConst2); // works
myFunc3(myClassConst); // fails, type mismatch 

Edit: Rephrased the explanation due to ambigious meaning (thanks to @Bergi for pointing that out).