如何使用 TS 中的原型方法为 class 编写接口？

Question

我一直在解决这个问题一段时间，并认为我最终会理解或遇到一个体面的解释。 我已经阅读了 TS 手册中的许多文章，google()'d 了它，并搜索了 SO，但还没有找到答案。

我需要知道如何正确、完整地在 TS 类/接口中键入原型方法。

interface UploadFileInterface {
    contentSizes: number[];
    chunks: [];
    chunksDone: number;
    getChunkLength: (id: number) => void;
    name: string;
    size: string;
    chunksQuantity: number;

}

class UploadedFile implements UploadFileInterface {

    contentSizes: Array<number> = [];
    chunks: [] = [];
    chunksDone: number = 0;
    getChunkLength: (id: number) => void;
     ^^^^^^^^ - 'Property 'getChunkLength' has no initializer and is not definitely assigned in the constructor.'

    constructor(
        public name: string, 
        public size: string, 
        public chunksQuantity: number
        ) {}

}

UploadedFile.prototype.getChunkLength = function(id: number): void {
    
}

我得到这个可怕的'属性'getChunkLength'没有初始化器，并且没有在构造函数中明确分配。 错误。

我试图将 getChunkLength 完全从 class 和接口中移出，并保留它在原型上的编写方式（因为接口应该只描述类的“实例端”），但随后错误移动到 function在原型上：

interface UploadFileInterface {
    contentSizes: number[];
    chunks: [];
    chunksDone: number;
    //getChunkLength: (id: number) => void;
    name: string;
    size: string;
    chunksQuantity: number;

}

class UploadedFile implements UploadFileInterface {

    contentSizes: Array<number> = [];
    chunks: [] = [];
    chunksDone: number = 0;
    //getChunkLength: (id: number) => void;

    constructor(
        public name: string, 
        public size: string, 
        public chunksQuantity: number
        ) {}

}

UploadedFile.prototype.getChunkLength = function(id: number): void {
    
}

我觉得很奇怪，我似乎找不到更多关于这种情况的线索，就像它在手册中很明显或直接解释的那样，但我似乎找不到。 您是否不应该直接将东西添加到 TS 中的原型中？ 我什至尝试在构造函数中使用 Object.setPrototypeOf() 来查看它是否会接受它，但没有运气。

我究竟做错了什么？ 我应该只在 TS 中使用类并将方法直接放在 class 上吗？ 如果是这样，工厂函数如何适应 TS？ 有人可以告诉我解决这些情况的不同技巧吗？

TS游乐场

Answer 1

您是否不应该直接将东西添加到 TS 中的原型中？

Typescript 期望您使用 class 语法来定义您的类。 这种语法可能没有明确提到原型，但功能仍然被添加到原型中。

所以下面的例子会在原型中添加一个getChunkLength function：

class UploadedFile implements UploadFileInterface {
    contentSizes: Array<number> = [];
    chunks: [] = [];
    chunksDone: number = 0;

    constructor(
        public name: string, 
        public size: string, 
        public chunksQuantity: number
    ) {}

    getChunkLength(id: string): void {
    
    }
}

如果您遇到需要显式修改原型的特殊情况，那么 typescript 将无法判断您在做什么，您需要断言该属性确实已定义。 这是用! ：

class UploadedFile implements UploadFileInterface {

    contentSizes: Array<number> = [];
    chunks: [] = [];
    chunksDone: number = 0;
    getChunkLength!: (id: number) => void;

    // ... constructor omitted
}

UploadedFile.prototype.getChunkLength = function(id: number): void {
    
}

工厂函数如何适应 TS？

您可以使用 class 上的 static function 来执行此操作：

class Example () {
  public static createInstance() {
    return new Example();
  }

  private constructor() {}
}

// used like:
const example1 = Example.createInstance();

或者，如果您不需要将构造函数保密，您可以让工厂成为 class 之外的助手 function：

const createInstance = () => new Example();

class Example() {}