javascript - typescript 中的类接口(interface)

Question

我是 typescript 的新手，不是很熟悉。

我正在阅读 this blog在网络上并尝试理解代码

这里作者创建了一个简单的路由

// /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!!!!'
            })
        })
    }
}

他在主入口点文件中这样使用的是什么

// /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 }));
    }
}

根据我在网上看到的定义，Classes也像 typescript 中的interface，所以这一行

 public routePrv: Routes = new Routes(); 

这里，Routes 是routePrv: 的接口(interface)？从我模糊的理解来看，界面通常是这样的

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

所以我的问题是，一个类如何成为一个接口(interface)以及我们的接口(interface)在

的情况下会是什么样子

public routePrv: Routes = new Routes();

有人可以解释一下吗？

Answer 1

您混淆了接口(interface) 和类型。

接口(interface)(interface MyInterface {})用于表达对象的外观。 typescript 转译后，接口(interface)被删除。它们更像是 typescript 的“提示”。它的用法示例如下:

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

类(class MyClass {})归结为构造函数。它们是构建对象的一种方式。因为它们描述了如何构造一个对象并因此描述了构造对象的形状，所以它们也可以用来描述一个对象的类型。因为类是构造函数，所以它们在运行时做一些事情。因此，仅删除了它们作为类型的用法。

// 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

根据请求，另一个不起作用的例子:

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 

编辑:由于含糊不清的意思改写了解释(感谢@Bergi 指出)。