我如何写一个接口的类与原型方法在TS?

Question

我已经围绕这个问题工作了一段时间，我认为我最终会理解或遇到一个像样的解释。我在TS手册中读了很多文章，谷歌()找到了它，搜索了SO，但还没有找到答案。

我需要知道如何正确，完整地键入一个原型

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从类&接口，只是让它如何写在原型上(因为接口应该只描述类的"实例端")，但然后错误移动到原型上的函数:

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中使用类并将方法直接放在类上吗?如果是这样的话，工厂功能如何适应TS?谁能告诉我解决这些情况的不同技巧?

TS操场

Answer 1

你只是不应该在TS中直接向原型添加东西吗?

Typescript期望你使用类语法来定义你的类。这种语法可能没有显式地提到原型，但函数仍然被添加到原型中。

所以下面的例子将添加一个getChunkLength函数到原型:

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 Example () {
public static createInstance() {
return new Example();
}
private constructor() {}
}
// used like:
const example1 = Example.createInstance();

或者，如果不需要将构造函数保留为私有，则可以将工厂作为类外的辅助函数:

const createInstance = () => new Example();
class Example() {}