如何在类型注释中使用函数返回的类？

Question

这是简化的代码

export interface MyInterface{
    // Have no idea why I need an export here.
    // If I remove it, it gives
    // semantic error TS2451 Cannot redeclare block-scoped variable 'createClass'
}

const createClass = function () {
    return class implements MyInterface{
    }
};

const MyClass = createClass();

// this line is fine
const mi: MyInterface = new MyClass();

// this is where I concerned. It gives semantic error TS2304 Cannot find name 'MyClass'
const mc: MyClass = new MyClass();

那么如何在类型注释中使用名称Myclass呢？我的TypeScript版本是3.2.2

Answer 1

TS2451无法重新声明块范围的变量“createClass”

发生此错误是因为您在环境中的其他地方有createClass函数。环境意味着，不受模块限制。编写至少一个import或exportscope文件，即使其成为模块。您可以这样做，而不是导出随机接口：export{}在文件的末尾。

const MyClass = createClass(); 
const mc: MyClass

在上面的代码中，您混合了类型和值。具体来说，< code>MyClass在这里是一个值，您试图将它用作一种类型。

总的来说，你通过函数返回一个类来做奇怪的事情。我知道你可能有自己的原因，但通常你应该像这样编写代码：

class MyClass {}
const mc: MyClass = new MyClass() // thought the type annotation is not necessary

Answer 2

为 MyClass 添加类型定义

const MyClass = createClass();
type MyClass = InstanceType<typeof MyClass>

考虑流动的简单类声明：

class MyClass {}
const mc: MyClass = new MyClass() 

当使用＜code＞class＜/code＞关键字声明类时，编译器知道两件事。在当前作用域中，有一个值具有能够构造类的类的名称（即＜code＞MyClass＜/code＞构造函数），并且与该类同名的类型也将存在于当前作用域，表示该类的实例类型（在本例中为＜code＞MyClass＜/code＞类型）。关于值空间与类型空间，请参见此答案。

因为您在函数中声明了类，即使您要给它一个名称，它也只能在函数内部访问（基本作用域规则）。该接口是可访问的，因为它在同一范围内（假设所有内容都在同一文件中），或者是显式导入的（如果您在另一个模块中）。

当您使用返回的函数并将其分配给const（constMyClass=createClass（）），你只做了类声明的一半，你告诉编译器存在一个名为MyClass的构造函数。编译器不会为＜code＞MyClass＜/code＞的实例类型添加任何类型（为什么会这样，＜code＞const＜/code>的赋值通常不会引入新类型，只会引入新值）。

简单的解决方案是完成另一半工作，添加一个与返回类的实例类型同名的类型。这两个名称不会冲突，因为一个位于值空间（＜code＞常量＜/code＞），另一个位于类型空间（＜code＞类型＜/code＞）

const MyClass = createClass();
type MyClass = InstanceType<typeof MyClass>
const mc: MyClass = new MyClass(); // Ok now.

请注意，我假设您在函数中声明类并返回它的原因从问题中并不明显，如果您不只是使用类声明。