TypeScript面向对象
类的定义
- 与JS不同的是，成员属性需要在前面进行提前声明
class Person{
//需要在前面对成员变量进行声明
name: string
//声明的时候，可以对值进行初始化，初始化可以带有类型注解，也可以省略
age = 18
//constructor中的变量依旧要进行类型注解
constructor(name:string,age:number) {
this.name = name,
this.age = age
}
}
const p1 = new Person("zhangcheng", 20)
console.log(p1)
类的继承
- 与JS中的继承是一样的
- 使用 extends进行继承
- 可以使用super
类的成员修饰符
在TypeScript中，类的属性和方法支持三种修饰符：public、private、protected
- public：修饰的是在任何地方可见，公有的属性或方法，默认编写的属性就是public
- private：修饰的仅在同一类中可见，私有的属性或者方法
- protected：修饰的是仅在类自身以及子类中可见，受保护的属性或者方法
class Person{
//可以自由访问，默认就是public
public name: string
//仅能在Person类中进行访问
private age = 18
//仅能在Person中，以及Person的子类中进行访问
protected address:string = "河北省"
constructor(name:string,age:number,address:string) {
this.name = name,
this.age = age,
this.address = address
}
}
只读属性readonly
- 正常情况下，类创建的实例是可读可写的
- 我们可以定义一个成员属性为只读属性
class Person{
//这样name就只能读取，不能修改了
readonly name: string
constructor(name:string) {
this.name = name,
}
}
getters/setters
- 主要是对私有属性，进行设置
- 其目的是为了拦截，防止一些非法的操作发生
class Person{
private _age: number
constructor(_age: number) {
this._age = _age
}
//对值进行设置
set age(newValue: number) {
//若设置的年龄过大或者过小则直接忽略
if (newValue > 0 && newValue < 150) {
this._age = newValue
}
}
get age(): number{
return this._age
}
}
const p1 = new Person(18)
console.log(p1.age)
p1.age = 1000
console.log(p1.age)
参数属性
- 前面我们知道在定义一个类中的成员属性，需要在前面进行声明
- 而TS提供了一种语法糖，可以使代码看起来比较简洁
- 在 constructor中的变量前面，用写明修饰符public、private、protected、readonly即可
class Person{
private _age: number
constructor(_age: number) {
this._age = _age
}
}
//相当于以下写法
class Person{
constructor(private _age: number) {
this._age = _age
}
}
抽象类abstract
- 抽象类的特点
- 抽象类不能通过new创建实例
- 抽象类可以包含抽象方法，也可以包含实现的具体方法
- 有抽象类的方法，必须是一个抽象类
- 抽象方法必须在子类中实现
- 现在有这样一个需求
- 定义一个 shape抽象类，里面有一个getArea的抽象方法
- 分别定义 三角形，圆形，长方形等多种形状的类
abstract class Shape {
//抽象方法，必须存在于抽象类中，抽象类不必具体实现
abstract getArea():number
}
//圆形
class Circle extends Shape{
//继承自抽象类的子类，要具体实现其抽象方法
getArea(): number {
return 3.14*3*3
}
}
//长方形
class Juxing extends Shape{
getArea(): number {
return 3*4
}
}
function getShapeArea(shape: Shape) {
//只需要调用Shape中的方法即可求出面积
console.log(shape.getArea());
}
const c1 = new Circle()
const j1 = new Juxing()
console.log(getShapeArea(c1))
console.log(getShapeArea(j1))
类的特性
- 可以通过new 创建实例对象
- 可以当作类型注解
- 可以当作有 构造签名的函数
class Person{
}
//通过Person创建一个实例对象
const p = new Person()
//当作一个类型注解
function printPerson(p: Person) {
}
//当作一个有构造签名的函数
function factory(ctor: new () => void) {
}
factory(Person)
对象类型的修饰符
- 在创建对象类型的时候，其属性也可以进行修饰
- 可选属性，在属性后面加?
- 只读属性，在属性签名加readonly
type objType = {
name?:string//可选属性
readonly age:number//只读属性
}
interface Iobj{
name?:string//可选属性
readonly age:number//只读属性
}
对象类型的索引签名
- 通常用于定义不明确对象中属性的类型
- 只能通过 string或者number进行访问
//对象类型的索引签名
interface IObj{
//可以通过字符串key进行访问，value可以是number类型或者boolean类型
[key: string]: number | boolean
//因为length属于用string访问，其返回值应当是上面中的子类
length:boolean
}
//对象类型的索引签名
interface IArr{
//可以通过字符串key进行访问，value可以是number类型或者boolean类型
[key: number]: number | boolean
//因为length属于用string访问，其返回值应当是上面中的子类
length:boolean
}
接口继承
- 使用 interface定义接口，是可以通过extends继承的
- 可以减少代码量
- 使用第三方库的时候，可以使用定义好的接口，同时可以定义自己的属性
interface Iobj{
name?:string//可选属性
readonly age:number//只读属性
}
interface Iobj2 extends Iobj{
address:string
}
接口被类实现
- 定义的接口，是可以被类实现的
- 通过implements关键字进行接口的实现
- 同时一个类可以实现多个接口
interface Person{
name: string
age: number
address: string
running:()=>void
}
//通过字面量直接实现
let p1:Person = {
name: "zhangcheng",
age: 18,
address: "河北省",
running() {
console.log("running")
}
}
interface IWalk {
walk:()=>void
}
//通过类进行实现
//好处是可以直接通过new创建，省去了字面量创建的繁琐
//同时可以实现多个接口
class PersonClass implements Person,IWalk{
constructor(public name:string,public age:number,public address:string) {
this.name = name
this.age = age
this.address = address
}
running() {
console.log("123");
}
walk() {
console.log("456");
}
}
const p2 = new PersonClass("zhangcheng", 18, "河北省")
console.log(p2.running());
console.log(p2.walk());
严格字面量赋值检测
- 在TS中，有一个十分奇怪的现象
interface IPerson{
name: string
age:number
}
let p1:IPerson = {
name: "zhangcheng",
age: 18
//若增加下面的属性则会报错
//height:1.88
}
//但是进行如下操作不会报错
let p2 = {
name: "zhangcheng",
age: 18,
height:1.88
}
let p3: IPerson = p2
function test(person: IPerson) {
}
test({
name: "zhangcheng", age: 18 })
//依旧不会报错
test(p2)
- 上面的代码中，我们使用interface创建了一个对象的类型
- 同时用这个类型通过字面量方式以及赋值的方式，分别创建了几个对象
- 发现通过 字面量创建的时候，会进行严格字面量的检测
- 而通过赋值的方法，则不会进行检测
- 这是因为，TS认为通过字面量创建的，就是新鲜的（这是TS成员在GitHub上面一个issue中提及的）
枚举类型
- 在TS中有一种类型叫枚举类型
- 通常用于枚举一些常量
//在其内部实际上是从0开始计数的
//我们可以改变其默认值
enum EList {
UP = 100,
DOWN = "DOWN",
LEFT,
RIGHT,
}
function test(payload: EList) {
switch (payload) {
case EList.DOWN:
console.log(123)
break
}
}
//传递的也是其内部的值
const p: EList = EList.DOWN
test(p)
