typescript我可以使用类式接口吗_Typescript

typescript我可以使用类式接口吗

typescript

typescript我可以使用类式接口吗,typescript,Typescript,我有以下代码： interface Heroe { title:string, hero:string, ranking:number, } export class AppComponent { heroe : Heroe = { title : 'Tour of Heroes', hero : 'Windstorm', ranking :1 } } 如果我替换类而不是接口代码： class Heroe { title:

我有以下代码：

interface Heroe {
    title:string,
    hero:string,
    ranking:number,
}

export class AppComponent {
  heroe : Heroe = {
     title : 'Tour of Heroes',
     hero : 'Windstorm',
     ranking :1
  }
}

如果我替换类而不是接口代码：

class Heroe {
    title:string,
    hero:string,
    ranking:number,
}

export class AppComponent {
  heroe : Heroe = {
     title : 'Tour of Heroes',
     hero : 'Windstorm',
     ranking :1
  }
}

当类没有方法，只有变量类型时，使用类式接口是正确的，这不是问题？。在angular demo中，以这种方式使用类而不是接口：

interface IHeroe {
    title: string;
    hero: string;
    ranking: number;
}

class Heroe implements IHeroe {
    title: string;
    hero: string;
    ranking: number;
}

在最后一个例子中，我有一个类而不是接口，并且没有类的接口

正确的方法不是先有接口，然后是基于接口的类，但如果两者的名称相同；必须使用哪种类型的脚本

例如：

interface Heroe {
    title:string,
    hero:string,
    ranking:number,
}
class Heroe  interface Heroe {
    title:string,
    hero:string,
    ranking:number,
}

export class AppComponent {
  heroe : Heroe = {
     title : 'Tour of Heroes',
     hero : 'Windstorm',
     ranking :1
  }
}

我也可以有Heroe相同名称的类像接口

“使用类接口是正确的”
这取决于你想做什么，但这不一样：

class Heroe {
    title: string;
    hero: string;
    ranking: number;

    constructor(title: string, hero: string, ranking: number) {
        this.title = title;
        this.hero = hero;
        this.ranking = ranking;
    }
}

let o1 = new Heroe("title", "hero", 0);
let o2: Heroe = { title: "title", hero: "hero", ranking: 0 }

汇编成：

var Heroe = (function () {
    function Heroe(title, hero, ranking) {
        this.title = title;
        this.hero = hero;
        this.ranking = ranking;
    }
    return Heroe;
}());
var o1 = new Heroe("title", "hero", 0);
var o2 = { title: "title", hero: "hero", ranking: 0 };

（）

正如您所看到的，

o1

和

o2

明显不同，一个是

Heroe

类的实例，第二个只是一个与实例具有相同属性的对象

在控制台中可以清楚地看到：

console.log(o1); // Heroe {title: "title", hero: "hero", ranking: 0}
console.log(o2); // Object {title: "title", hero: "hero", ranking: 0}

编译器不关心

o2

仅仅是一个对象的原因，即使声明为

Heroe

：

TypeScript的核心原则之一是类型检查的重点是值所具有的形状。这有时被称为“鸭子打字”或 “结构亚型”

（）

或者举个例子：

function log(heroe: Heroe) {
    console.log(`Title: ${ heroe.title }, Hero: ${ heroe.hero }, Ranking: ${ heroe.ranking }`);
}

log(o1); // obviously this is ok
log(o2); // but this is ok as well

传递

o2

很好，因为即使它不是

Heroe

的实例，它也满足类的接口

可以对接口和类使用相同的名称，但不能重新声明属性，因此这是不正确的：

interface Heroe {
    title: string; // Error: Duplicate identifier 'title'
}

class Heroe {
    title: string; // Error: Duplicate identifier 'title'
}

但这是：

接口Heroe{ 标题：字符串； }

希律班{ 字幕：字符串； }

声明的顺序无关紧要，您可以在类下面使用接口。
您可以在中阅读更多关于此的信息

但您也可以实现一个接口：

interface IHeroe {
    title: string;
    hero: string;
    ranking: number;
}

class Heroe implements IHeroe {
    title: string;
    hero: string;
    ranking: number;
}