好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

一份不可多得的 TypeScript 学习笔记

Hi,我是前端人,今日与君共勉!本篇文章主要介绍 typeScript 中类的定义、类的继承、类中成员修饰符等内容。

typeScript 中的类与 ES6 中的类非常相似,如果不知道 ES6 中的类,建议先学习下 ES6 中的 class 。本篇文章重点介绍 typeScript 中的类定义、继承以及修饰符。

1、类的定义

类描述了所创建的对象共同的属性和方法。typeScript 支持面向对象的所有特性,比如类、接口等。

在 typeScript 中定义类的时候,使用 class 关键字,类名首字母使用大写,类可以包含以下三个模块:

字段 - 字段是类里面声明的变量,表示与对象有关的属性。 构造函数 - 类实例化时自动调用,可以为实例化的对象分配内存。 方法 - 方法为对象要执行的某种操作。

定义属性的时候,需要添加属性类型,构造函数中的参数也需要加类型,引用任何一个类的成员的时候都用 this ,this 关键字表示当前类实例化的对象。使用 new 关键字来实例化对象,并初始化它。如示例:

 class   Web {  workTime :  string   constructor ( n : string ) {  this . workTime   =   n  }  showWork (){  return   "搬砖的前端"  }
}  let   qq   =   new   Web ( "五年" )  console . log ( qq . showWork ());  console . log ( qq . workTime );

编译以上代码,得到的 js 代码如下:

 "use strict" ;  class   Web  {  constructor ( n ) {  this . workTime   =   n ;
 }  showWork () {  return   "搬砖的前端" ;
 }
}  let   qq   =   new   Web ( "五年" );  console . log ( qq . showWork ());  console . log ( qq . workTime );

2、类的继承

typeScript 支持继承类,即可以在创建类的时候继承一个已存在的类,类继承的时候使用 extends 关键字,基于类的程序设计中一种最基本的模式是允许使用继承来扩展现有的类。比如:

 class   Dirnks {  name :  string   constructor ( n :  string ) {  this . name   =   n  }  save ( m :  string ) {  console . log ( `${  this . name  }  饮料应该${  m  }  ` );
 }
}  class   Soda   extends   Dirnks {  constructor ( n :  string ) {  super ( n )
 }
}  let   kele   =   new   Soda ( "可乐" )  kele . save ( "冷藏" )

上述示例是一个最基本的类继承,其中 Soda 继承了 Dirnks 的属性和方法,其中 Soda 是一个派生类,也叫做子类,Dirnks 是一个基类,也叫超类或父类。

派生类包含了一个构造函数,构造函数必须调用 super() ,会执行基类的构造函数。需要注意的是:在子类构造函数里访问 this 的属性之前,一定要先调用 super ,这是 typeScript 强制执行的一条重要规则。

如果父类和子类都包含某一方法时,方法名相同,但是具体执行内容不同的时候,该执行哪一个方法呢?

修改上述实例,给子类也添加一个方法,代码如下:

 class   Dirnks {  name :  string   constructor ( n :  string ) {  this . name   =   n  }  save ( m :  string ) {  console . log ( `${  this . name  }  饮料应该${  m  }  ` );
 }
}  class   Soda   extends   Dirnks {  constructor ( n :  string ) {  super ( n )
 }  save () {  return   "存储方法"  }
}  let   kele   =   new   Soda ( "可乐" )  console . log ( kele . save ());

编译以上代码啊,得到的 js 代码如下:

 "use strict" ;  class   Dirnks  {  constructor ( n ) {  this . name   =   n ;
 }  save ( m ) {  console . log ( `${  this . name  }  饮料应该${  m  }  ` );
 }
}  class   Soda   extends   Dirnks  {  constructor ( n ) {  super ( n );
 }  save () {  return   "存储方法" ;
 }
}  let   kele   =   new   Soda ( "可乐" );  console . log ( kele . save ());

此时会执行子类中的方法。其原理是,类继承后,子类可以对父类的方法进行重新定义,这个过程称之为方法的重写。

typeScript 中子类只能继承一个父类,虽然不支持继承多个类,但是支持多重继承。如下:

 class   One {  name :  string   constructor ( n :  string ) {  this . name   =   n  }  show () {  return   "展示"  }
}  class   Two   extends   One {  constructor ( n : string ) {  super ( n )
 }
}  class   Three   extends   Two {  constructor ( n :  string ) {  super ( n )
 }
}  let   three   =   new   Three ( "剁成" )  console . log ( three . show ());

3、修饰符

在 typeScript 中,可以使用访问控制符来保护对类、变量、方法和构造函数的访问。typeScript 支持 3 种不同的访问权限,分别为:

public(默认) - 公有, 表示共享的属性和方法。可以在任何地方被访问。 protected - 受保护, 表示属性和方法被保护,可以被自身以及子类访问,不能在类外面使用。 private - 私有, 只能被其定义所在的类访问。 readonly - 只读, 只读属性必须在声明时或构造函数里初始化。 理解 public

在上边类中的成员定义的时候,没有明确使用任何修饰符,默认的就是 public ,所以可以将上面的类改写为:

 class   HH {  public   name :  string   public   constructor ( n :  string ) {  this . name   =   n  }
}  let   h   =   new   HH ( "HH" )  console . log ( h . name );

使用 public 之后,对上面的应用并没有任何影响。

它的特点: 被它标记的成员在类的里面、子类里面、类外面都可以访问到。

理解 protected

类中添加 protected 修饰符来修饰成员时,将上述实例的 public 修饰符修改为 protected 如下:

 class   HH {  protected   name :  string   constructor ( n :  string ) {  this . name   =   n  }
}  let   h   =   new   HH ( "HH" )  console . log ( h . name );  // 此处报错,提示 属性"name"受保护,只能在类 HH 及子类中访问 

它的特点: 被它标记的成员在类的里面、子类里面能使用,但是在类的外面不能使用。

理解 private
 class   HH {  private   name :  string   constructor ( n :  string ) {  this . name   =   n  }
}  class   H   extends   HH {  constructor ( n :  string ) {  super ( n )
 }  show () {  console . log ( this . name );  // 报错  }
}  let   h   =   new   H ( "HH" )  console . log ( h . name );  // 报错   h . show ()

上面的示例报错,提示:属性“name”为私有属性,只能在类“HH”中访问。

它的特点:被它标记的成员不能再声明它的类的外部访问。

原文地址:https://HdhCmsTesttoutiao测试数据/a7065098067002802727/

dy("nrwz");

查看更多关于一份不可多得的 TypeScript 学习笔记的详细内容...

  阅读:38次