typeScript中类和接口的使用

类描述了所创建的对象共同的属性和方法。
使用关键字 class 声明,后面紧跟类名,类可以包含以下几个模块(类的数据成员)
字段 − 字段是类里面声明的变量。字段表示对象的有关数据。
构造函数 − 类实例化时调用,可以为类的对象分配内存。
方法 − 方法为对象要执行的操作。

  • public修饰的属性或者方法是共有的, 可以在任何地方被访问到, 默认所有的属性或者都是public的
  • private修饰的属性或者方法是私有的, 不能在声明它的类外面访问, 只能在类的内部进行访问
  • protected修饰的属性或者方法是受保护的, 它和private类似, 外部是不可以访问的, 在类的内部和子类的内部是可以访问的
class Person {
   private name='张三'
   age=19
   protected sex: string='男'
   say(a: number): string{
       return('名字:'+this.name+'年龄:'+this.age+a) 
   }
}
// 创建Person的实例
var p = new Person()
console.log(p.say(2))
====>>  名字:张三年龄:192
  • 构造函数constructor
  • 多个对象具有共同属性, 面对不同对象实例化的时候在去赋值 使用构造函数
  • constructor一般在实例化的时候执行, new一次就会执行一次
class Person {
    // 字段
    name: string
    age: number

    /**
     * 构造函数constructor
     * 多个对象具有共同属性, 面对不同对象实例化的时候在去赋值 使用构造函数constructor
     *  constructor一般在实例化的时候执行, new一次就会执行一次
     */
    constructor(name: string, age: number){
        console.log('执行构造函数')
        this.name = name
        this.age = age
    }
}

const p1 = new Person('姓名', 18)
const p2 = new Person('姓名2', 19)
console.log(p1, p1)
====>>  执行构造函数
====>>  执行构造函数
====>>  Person { name: '姓名', age: 18 } Person { name: '姓名', age: 18 }
  • 类的继承 extends
  • 子类除了不能继承父类的私有成员(方法和属性)和构造函数,其他的都可以继承。
  • 一次只能继承一个类,不支持继承多个类,但支持多重继承(A 继承 B,B 继承 C)。
  • 在实现继承时,子类构造函数中必须调用 super 方法,super 关键字是对父类的直接引用,该关键字可以引用父类的属性和方法。
  • abstract: 抽像类 使用abstract修饰的类只能做为其他类继承的父类, 不能直接被实例化
  • 使用 abstract 关键字定义抽象类和抽象方法,抽象类中的抽象方法不能直接实现并且必须在子类中实现。抽象方法必须放在抽象类中使用
  • static 关键字用于定义类的数据成员(属性和方法)为静态的,静态成员可以直接通过类名调用
abstract class Animal {
   name: string
   static age: number // 类的静态方法里面, 是不允许用this, 只能使用类名访问
   constructor(name: string, age: number) {
       this.name = name
       Animal.age = age
   }    

   // abstract move(distance: number): void // 抽象方法, 只能为子类重新定义的方法, 抽像方法只能在抽象类中使用
   move(distance: number, sex: string) {
       console.log(`${this.name} 跑了 ${distance}M, ${sex},, ${Animal.age}`);
   } 

   // 抽象方法
   abstract eat(): void

   static work(): void{
       console.log('静态方法')
   }
}

Animal.work()   
====>> 静态方法

class Dog extends Animal {
   move(distance: number) {
       console.log('正在跑…', distance, '-000-----', this.name)
       super.move(distance, '123')
   }

   eat(): void{
       console.log(`${this.name}正在吃`);
       
   }
}

class Snake extends Animal {

   // 子类的构造函数必须包含super调用
   // 子类中定义相当于是对父类的取代, 父类当中的constructor就不会执行, 需要使用super重定义调用, 即可以在子类当中在执行一次constructor
   constructor(name: string) {
       super(name, 30)
       console.log('211111', this.name)
   }

   eat(): void{
       console.log(`${this.name}正在吃`);
       
   }
}

const dog = new Dog('老', 20)
const snake = new Snake('小')

dog.move(50)
dog.eat()
snake.move(19, 'll')
snake.eat()

====>> 
211111 小
正在跑… 50 -000----- 老
老 跑了 50M, 123,, 30
老正在吃
小 跑了 19M, ll,, 30
小正在吃

接口

使用关键字interface 声明

  • 接口是一系列抽象方法的声明,是一些方法特征的集合,这些方法都应该是抽象的,需要由具体的类去实现,然后通过这组抽象方法调用,让具体的类执行具体的方法。
  • 在面向对象的编程中,接口是一种规范的定义,它定义了行为和动作的规范。在程序设计里,它起到了一种限制和规范的作用
  • 两个接口同名可以进行声明合并
interface User {
    name: string
    age: number
}
/**
 * 接口可以继承接口 
 */
interface InUser extends User {
    sex: string
}

const obj: InUser ={
    name: '姓名',
    age: 20,
    sex: '男'
}

console.log(obj);
====>>  { name: '姓名', age: 20, sex: '男' }
  • 动态添加属性
interface Istate {
    name: string
    age?: number
    [propName: string]: any  // 动态添加属性
}
var obj3: Istate = {name: '张', age: 10, sex: '男', isMa: true }
  • 只读属性
interface Istate4 {
    name: string
    readonly age: number  // 用readonly修饰就变为只读属性, 赋初始值之后就不能在进行更改
}
var obj4: Istate4 = {name: '张', age: 10}
obj4.name = '李'
// obj4.age = 20  // 不支持更改
  • 函数类型接口
  • 函数类型接口是对函数的传入参数以及返回值进行约束
interface Iencrypt {
    (key: string, value: string): string
}
const encry: Iencrypt = function(key: string, value: string): string{
    return key + '=' + value
}

console.log('函数类型接口', encry('name', 'star'))
====>>  函数类型接口 name=star
  • 可索引接口
  • 可索引接口一般用于对数组和对象的约束。
interface IFoo {
   [index: number]: string    // 表示了当用 number去索引fooArr时会得到string类型的返回值。
}
const fooArr: IFoo = ['ww', 'ee', 'ss']
console.log(fooArr[0])
====>>  ww
  • 类类型接口
  • 类类型接口是对类的约束,它是对属性接口和函数型接口的结合
interface Myinter {
    name: string
    move(): number
}
// 创建类使用implements限定接口类型
class MyClass implements Myinter {
    name: string  // 必须包含Myinter中的属性和方法
    age: number
    // 必须进行constructor初始化
    constructor(name: string, age: number) {
        this.name = name
        this.age = age
    }
    move(): number{
        return 11
    }
}
const cla = new MyClass('name', 1)
console.log('类类型接口', cla.move());
====>>  类类型接口 11


interface Ieat {
    eat(food: string):void
}

interface Irun{
    run(distance: number):void
}
class Per implements Ieat, Irun {
    eat(food: string): void{
        console.log(`eat: ${food}`)
    }
    run(distance: number) {
        console.log(`run: ${distance}`)
    }
}

class Animal1 implements Ieat, Irun {
    eat(food: string): void{
        console.log(`eat: ${food}`)
    }
    run(distance: number) {
        console.log(`run ${distance}`)
    }
}

const a1 = new Per()
a1.eat('i lk gyt ')
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 205,386评论 6 479
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,939评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,851评论 0 341
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,953评论 1 278
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,971评论 5 369
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,784评论 1 283
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,126评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,765评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,148评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,744评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,858评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,479评论 4 322
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,080评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,053评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,278评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,245评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,590评论 2 343

推荐阅读更多精彩内容