typescript 扩展类和接口的打字稿泛型

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/28273714/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-09-09 06:35:11  来源:igfitidea点击:

Typescript generics extending class and interface

typescript

提问by Dave Taylor

I have a Typescript class which includes a generic which needs to extend another class and implement an interface. Here is an example

我有一个 Typescript 类,它包含一个泛型,它需要扩展另一个类并实现一个接口。这是一个例子

interface IHasImage {
  imageUrl():string; 
}
class Model {
}
class View<T extends Model & IHasImage> {
}

This is the sort of syntax I have seen elsewhere but is there a way of doing this in Typescript?

这是我在其他地方看到的那种语法,但有没有办法在 Typescript 中做到这一点?

edit: Try pasting the following in to the playground:http://www.typescriptlang.org/Playground

编辑:尝试将以下内容粘贴到操场上:http: //www.typescriptlang.org/Playground

...[removed edit 1 code]

edit 2: Answer and reasoning

编辑2:答案和推理

(I apologise, the first example had a few flaws!) I have marked the correct answer below, although it probably needs a few pointers as outlined in this github issue (https://github.com/Microsoft/TypeScript/issues/1885)

(我很抱歉,第一个例子有一些缺陷!)我在下面标记了正确的答案,尽管它可能需要一些在这个 github 问题中概述的指针(https://github.com/Microsoft/TypeScript/issues/1885)

Given the following code you can see the methodology works.

鉴于以下代码,您可以看到该方法有效。

playground screenshot

游乐场截图

The only other thing to say is that trying to implementthe interface from a class that does not extend the base class also fails. However because Typescript checking is based on the structure of the object, it will succeed if you manually add the nameproperty to the class.

唯一要说的是,尝试implement从不扩展基类的类访问接口也会失败。但是因为 Typescript 检查是基于 object 的结构,如果您手动将name属性添加到类中,它会成功。

enter image description here

在此处输入图片说明

This is also why it succeeds with the ModelCorrectwhich extendsbut doesn't implements.

这也是为什么它在ModelCorrectwhichextends但没有成功的原因implements

采纳答案by dignifiedquire

It looks like this is the only way of doing it that I can find. Not perfectly clean but it does the right thing.

看起来这是我能找到的唯一方法。不完全干净,但它做正确的事情。

interface IHasImage extends Model{  
  imageUrl():string; 
}

class Model {
}

class View<T extends IHasImage> {
}

Here is a screenshot from the playground verifying that it works:

这是操场上的屏幕截图,验证了它的工作原理:

playground

操场

Edit:Added correct workaround.

编辑:添加了正确的解决方法。

回答by Magu

Typescript is not so restrictive as Java or C# so you can do things like that:

Typescript 不像 Java 或 C# 那样严格,因此您可以执行以下操作:

interface IHasImage {
    imageUrl():string; 
}

class Model {
}

// use the Model class like an interface
interface IHasImageModel extends IHasImage, Model{
}

class View<T extends IHasImageModel> {
    constructor(arg :T){
       arg.imageUrl();
    }
}

Edit:In TypeScript 1.6 you can use Intersection types:

编辑:在 TypeScript 1.6 中,您可以使用 Intersection 类型:

interface IHasImage {
    imageUrl():string; 
}

class Model {
}

class View<T extends IHasImage & Model> {
    constructor(arg :T){
       arg.imageUrl();
    }
}

回答by Martijn

Missing in the example is what T will be:

示例中缺少的是 T 将是什么:

In the example below i have added an implementation for T, that can be used as the generic constraint.

在下面的示例中,我为 T 添加了一个实现,它可以用作通用约束。

interface IHasImage {
  imageUrl():string; 
}

class Model {
}

class ModelWithImage extends Model implements IHasImage {

    imageUrl():string
    {
     return "http://thepetwiki.com/images/thumb/Kitten.jpg/400px-Kitten.jpg";
    }   
}


class View<T extends ModelWithImage>
{
    value:T;

    constructor(arg:T)
    {   
        this.value=arg;
    }       
}