Question

我是打字稿新手，并不熟悉。

我在网上阅读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 }));
    }
}

根据我在网络上阅读的定义，类也类似于打字稿中的界面，因此此行

 public routePrv: Routes = new Routes();

在这里，路由是routePrv:的接口？从我模糊的理解中，界面通常看起来像这样

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

所以我的问题是，一个类如何成为接口，在

的情况下，我们的接口会是什么样子

public routePrv: Routes = new Routes();

有人可以解释吗？

Answer 1

您正在混淆接口和类型。

接口（interface MyInterface {}）用于表达对象的外观。打字稿翻译后，将删除接口。它们更像打字稿的“提示”。其用法示例如下：

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指出了这一点）。

打字稿中的类接口

1 个答案: