TypeScript中的“声明类”和“接口”有什么区别

0md85ypi  于 2023-05-30  发布在  TypeScript
关注(0)|答案(4)|浏览(310)

在TypeScript中,当创建.d.ts源代码声明文件时,哪一个更可取,为什么?

declare class Example {
    public Method(): void; 
}

或者是

interface Example {
    Method(): void;
}

我能说的区别是接口不能有静态方法,所以你必须使用一个类。两者都不产生任何JS输出,所以也许这并不重要?

bybem2ql

bybem2ql1#

interface用于当您只想描述对象的形状时。从来没有为接口生成代码--它们只是类型系统中的一个工件。您不会看到类是否具有implements子句在代码生成方面的差异。
declare class用于当你想要描述一个 * 现有 * 类(通常是一个TypeScript类,但并不总是),它将在外部存在(例如,你有两个.ts文件,编译成两个.js文件,两者都通过script标签包含在网页中)。如果你使用extendsclass继承(不管基类型是declare class还是常规的class),编译器将生成所有代码来连接原型链和转发构造函数等等。
如果你试图从一个应该是接口的declare class继承,你将遇到一个运行时错误,因为生成的代码将引用一个没有运行时表现的对象。
相反,如果你只是implement一个应该是declare class的接口,你将不得不自己重新实现所有的成员,并且不会利用任何来自基类的代码重用,并且在运行时检查原型链的函数将拒绝你的对象,因为它实际上不是基类的示例。
如果你有一个C++背景,你可以粗略地认为interfacetypedefdeclare class是一个构造函数的extern声明,在这个编译单元中严格缺乏定义。
从纯粹的消费Angular (编写命令式代码,而不是添加新类型)来看,interfacedeclare class之间的唯一区别是不能new接口。但是,如果您打算在新的class中使用extend/implement,则必须在interfacedeclare class之间正确选择。只有一个能用。
有两条规则对你很有用:

  • 是与实际存在于运行时的构造函数(可以用new调用的东西)对齐的类型的名称(例如Date是,但JQueryStatic不是)?如果 * 否 *,则肯定需要interface
  • 我处理的是来自另一个TypeScript文件的编译类,还是足够相似的东西?如果 * 是 *,则使用declare class
xn1cxnb4

xn1cxnb42#

您可以实现接口:

class MyClass implements Example {
    Method() {

    }
}

declare class语法实际上是用来为不是用TypeScript编写的外部代码添加类型定义的--所以实现是“在别处”。

n6lpvg4x

n6lpvg4x3#

通俗地说,declare.ts/d.ts文件中用于告诉编译器我们应该期望关键字we are declaring存在于该环境中,即使它没有在当前文件中定义。这将允许我们在使用声明的对象时具有类型安全性,因为Typescript编译器现在知道其他一些组件可能提供该变量。

vpfxa7rd

vpfxa7rd4#

TS中declareinterface的区别:

声明:

declare class Example {
    public Method(): void; 
}

在上面的代码中,declare让TS编译器知道在某个地方声明了类Example。这并不意味着类被神奇地包含在内。作为一名程序员,您有责任在声明类时(使用declare关键字)确保该类可用。

接口:

interface Example {
    Method(): void;
}

interface是只存在于typescript中的虚拟构造。类型脚本编译器使用它的唯一目的是类型检查。当代码被编译成javascript时,整个结构将被剥离。类型脚本编译器使用接口来检查对象是否具有正确的结构。
例如,当我们有以下接口时:

interface test {
  foo: number,
  bar: string,
}

我们定义的具有此接口类型的对象需要与接口完全匹配:

// perfect match has all the properties with the right types, TS compiler will not complain.
  const obj1: test = {   
    foo: 5,
    bar: 'hey',
  }

相关问题