• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

typescript中类和接口的区别

原作者: [db:作者] 来自: [db:来源] 收藏 邀请
类和接口的区别:接口中只声明成员方法,不做实现;类声明并实现方法。
//属性接口
interface Config {
    color ?: string;
    width: number;
    [propName: string]: any;
}
function test(value: Config){
    console.log(value);
}
test({
    color: \'white\', //color属性可以省略不写
    width: 600,
    height: 50
});
//函数类型接口
interface FunctionConfig {
    (source: string, subString: string): string;
}

let myFunction: FunctionConfig;
myFunction = function(s1: string, s2: string): string{
    return (s1+s2);
};
console.log(myFunction(\'hello\', \',www\'));
//可索引接口
interface UserArray {
    [index: number]: string;
}
let arr1: UserArray = [\'aaa\', \'bbb\'];
console.log(arr1);

类:

//
class A {
    name: string;
    constructor(message: string) {
        this.name = message;
    }
    sayName(){
        return this.name;
    }
}
class B extends A {
    constructor(name: string){
        super(name);
    }
    sayHi(){
        return \'Hello,\'+this.name;
    }
}
let a = new A(\'John\');
let b = new B(\'Sunny\');
console.log(a.sayName());
console.log(b.sayName());
console.log(b.sayHi());
//公有属性、私有属性、受保护的修饰符
abstract class C {
    constructor(public name: string){}
    public sayHi(){
        return \'History\';
    }
}
class D extends C {
    static origin = 11;
    constructor (name: string){
        super(name);
    }
    public sayName() {
        return this.name+D.origin;
    }
}
let d = new D(\'hello\');
console.log(d.sayName());
//抽象类-抽象类一般不会被实例化,做为其他派生类的基类使用
//抽象类中的抽象方法不包含具体的实现,并且必须在派生类中实现
abstract class Media {
    constructor(public name: string){}
    abstract sayName(): void;
}
class Phone extends Media {
    constructor(name: string){
        super(name);
    }
    sayName(){
        return \'Haha\'+this.name;
    }
}
let e = new Phone(\'John\');
console.log(e.sayName());

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
Typescript中方法重载的实现发布时间:2022-07-18
下一篇:
TypeScript从入门到Vue项目迁移发布时间:2022-07-18
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap