13 TypeScript 类的 Getter、Setter 和 static 使用

之前学了类的访问类型private，那这个东西如何使用？其实他的最大用处是封装一个属性，然后通过Getter和Setter的形式来访问和修改这个属性。

13.1 类的 Getter 和 Setter

13.1.1 Getter

声明一个XiaoJieJie（小姐姐）类，小姐姐的年龄是不能随便告诉人，使用private,这样别人就都不知道她的真实年龄，而只有她自己知道。

class Xiaojiejie {
  constructor(private _age:number){}
}

如果别人想知道，就必须通过getter属性知道,注意我这里用的是属性，对他就是一个属性。getter属性的关键字是get,后边跟着类似方法的东西,但是你要注意，它并不是方法，归根到底还是属性。

class Xiaojiejie {
  constructor(private _age:number){}
  get age(){
      return this._age
  }
}

const dajiao = new Xiaojiejie(28)

console.log(dajiao.getAge)

玄妙就在于getter里，我们可以对_age进行处理，比如别人问的时候我们就偷摸的减少 10 岁。

class Xiaojiejie {
  constructor(private _age:number){}
  get age(){
      return this._age-10
  }
}

13.1.2 Setter

\_age是私有的，那类的外部就没办法改变，所以这时候可以用setter属性进行改变

class Xiaojiejie {
  constructor(private _age:number){}
  get age(){
      return this._age-10
  }
  set age(age:number){
    this._age=age
  }
}

const dajiao = new Xiaojiejie(28)
dajiao.age=25
console.log(dajiao.age)

13.2 类中的 static

我们先写一下最常规的写法：

class Girl {
  sayLove() {
    return "I Love you";
  }
}

const girl = new Girl();
console.log(girl.sayLove());

但是现在你不想new出对象，而直接使用这个方法，那TypeScript为你提供了快捷的方式，用static声明的属性和方法，不需要进行声明对象，就可以直接使用

class Girl {
  static sayLove() {
    return "I Love you";
  }
}
console.log(Girl.sayLove());

需要注意的是，用static声明的属性和方法，才不需要进行声明对象

14 类的只读属性和抽象类

抽象类很父类很像，都需要继承，但是抽象类里一般都有抽象方法。继承抽象类的类必须实现抽象方法才可以。在讲抽象类之前，还需要讲一下类里的只读属性readonly

14.1 类里的只读属性readonly

新建一个文件Demo14.ts,然后写下面一个类，并进行实例化和赋值操作，代码如下：

class Person {
    constructor(public name:string ){ }
}

const person = new Person('wibus')
console.log(person.name)

写完后我们可以在终端(Terminal)中看一下结果,结果就应该是wibus。

比如我现在有一个需求，就是在实例化对象时赋予的名字，以后不能再更改了，也就是我们常说的只读属性。我们先来看现在这种情况是可以随意更改的，比如我写下面的代码。

class Person {
    constructor(public name:string ){ }
}

const person = new Person('wibus')
person.name= 'wibus-wee'
console.log(person.name)

这时候就可以用一个关键词readonly,也就是只读的意思，来修改Person类代码。

class Person {
    public readonly _name :string;
    constructor(name:string ){
        this._name = name;
    }
}

const person = new Person('wibus')
person._name= 'wibus-wee'
console.log(person._name)

这样写完后，VSCode就回直接给我们报错，告诉我们_name属性是只读属性，不能修改

14.2 抽象类的使用

什么是抽象类？举个例子，比如我开了一个洗浴中心，里边有服务员，有初级技师，高级技师，每一个岗位我都写成一个类，那代码就是这样的：

class Waiter {}

class BaseTeacher {}

class seniorTeacher {}

我作为老板，我要求无论是什么职位，都要有独特的技能，比如服务员就是给顾客倒水，初级技师要求会泰式按摩，高级技师要求会 SPA 全身按摩。这是一个硬性要求，但是每个职位的技能有不同，这时候就可以用抽象类来解决问题。

抽象类的关键词是abstract,里边的抽象方法也是abstract开头的，现在我们就写一个Girl的抽象类。

abstract class Girl{
    abstract skill()  //因为没有具体的方法，所以我们这里不写括号

}

有了这个抽象类，三个类就可以继承这个类，然后会要求必须实现skill()方法，代码如下：

abstract class Girl{
    abstract skill()  //因为没有具体的方法，所以我们这里不写括号

}

class Waiter extends Girl{
    skill(){
        console.log('大爷，请喝水！')
    }
}

class BaseTeacher extends Girl{
    skill(){
        console.log('大爷，来个泰式按摩吧！')
    }
}

class seniorTeacher extends Girl{
    skill(){
        console.log('大爷，来个SPA全身按摩吧！')
    }
}

通过这个例子，你也许能对抽象类和抽象方法有一个比较深的认识。其实在实际生产中我们也会把这样的需求用接口interface来实现。

15 配置文件 —— tsconfig.json

应该有些人会看见一些ts项目里面都有一个tsconfig.json这个文件，那这里说下：这个是 TypeScript 的文件，虽然不常用，但是很重要。有必要详细的讲一下这个文件der～

15.1 生成tsconfig.json

这个文件是通过tsc --init命令生成的，在桌面上新建一个文件夹TsDemo,然后打开VSCode，把文件托到编辑器中，然后打开终端Terminal,输入tsc --init。

输入完成后，就会出现tsconfig.json文件，你可以打开简单的看一下，不过此时你可能看不懂。

其实它就是用来配置如何对ts文件进行编译的，我们都叫它 typescript 的编译配置文件。

如果此时你的tsc执行不了，很有可能是你没有全局安装 TypeScript,可以全局安装一下。

我在第一篇讲述过安装ts的：https://iucky.cn/posts/code/typescript-1

15.2 让 tsconfig.json 文件生效

你现在可以在文件夹跟目录建立一个demo.ts文件，然后编写一些最简单的代码，代码如下:

const person: string = "wibus";

这时候我们不在使用ts-node直接执行了，需要用tsc demo.ts进行编译，编译后会得到demo.js文件。 生成的代码如下:

var person = "wibus";

这时候好像一切都是正常的，但是我要告诉你的真相是tsconfig.json这个编译配置文件并没有生效。

此时我们打开tsconfig.json文件，找到complilerOptions属性下的removeComments:true选项，把注释去掉。

这个配置项的意思是，编译时不显示注释，也就是编译出来的js文件不显示注释内容。

现在你在文件中加入一些注释，比如：

// I love wibus
const person: string = "wibus";

这时候再运行编译代码tsc demo.ts，编译后打开demo.js文件，你会发现注释依然存在，说明tsconfig.json文件没有起作用。

如果要想编译配置文件起作用，我们可以直接运行tsc命令，这时候tsconfig.json才起作用，可以看到生成的js文件已经不带注释了。

那现在又出现问题了，如果我们的跟目录下有多个ts文件，我们却只想编译其中的一个文件时，如何作？

我们在项目根目录，新建一个文件demo2.ts文件，然后也写一段最简单的 ts 代码。

const person2: string = "jspang.com";

如果这时候我们在终端里运行tsc,虽然tsconfig.json生效了，但是两个文件都被我们编译了。这不是你想要的结果，我们可以用三种办法解决这个问题。

1. 第一种：使用 include 配置

include属性是用来指定要编译的文件的，比如现在我们只编译demo.ts文件，而不编译demo2.ts文件，就可以这样写。

写配置文件时有个坑需要注意，就是配置文件不支持单引号，所以里边都要使用双引号。

{
  "include":["demo.ts"],
  "compilerOptions": {
      //any something
      //........
  }
}

这时候再编译，就只编译demo.ts文件了。

2. 第二种：使用 exclude 配置

include是包含的意思，exclude是不包含，除什么文件之外，意思是写再这个属性之外的而文件才进行编译。比如你还是要编译demo.ts文件，这时候的写法就应该是这样了。

{
   "exclude":["demo2.ts"],
  "compilerOptions": {
      //any something
      //........
  }
}

这样写依然只有demo.ts被编译成了js文件。

3. 第三种：使用 files 配置

files的配置效果和include几乎一样，我是没找出有什么不同，只要配置到里边的文件都可以编译，如果有小伙伴知道有什么不同的，欢迎在视频下方留言，然后一起学习。

{
  "files":["demo.ts"],
  "compilerOptions": {
      //any something
      //........
  }
}

结果是依然只有demo.ts文件被编译。这节课我们就学到这里，目的只是让大家初步了解一下tsconfig.js文件和它的使用方法，文件里边还有很多配置项，这些我们都会逐步讲到。