Nest(3)：扫盲篇：TypeScript 类和装饰器

前言

先回顾下前文中介绍了哪些内容：

使用 @nestjs/cli 创建和管理 Nest 应用
Hello, World 示例代码分析
Nest 基本概念：模块，控制器，服务
常用的装饰器：@Module、@Controller、@Get、@Injectable
Nest 目录结构分析
@nest/cli 脚手架的命令

本文先不继续讲解 Nest 中的内容，而是打算介绍 TypeScript 中的两个语法：类和装饰器，帮助新手理解 Nest 中代码的写法。

如果你对 TypeScript 已经很熟悉，根据自己实际情况有选择的阅读即可。

类 Class

NestJS 支持面向对象编程，也支持函数式编程。但在实际开发中还是以面向对象为主，而面向对象又是和类紧密联系的，所以对于类的一些概念和语法，一定要熟练掌握。

ES6 推出了 class 类，本质是过去的构造函数的语法糖。TypeScript 中的类的用法和 ES 标准中的类大差不离，多了一些更加 OOP 的语法支持。、

下面是对类的一些常用语法的说明。

类成员

在 JS 中类的成员有两种，分别是成员属性和成员方法。TypeScript 官方文档中会称之为字段（filed）和方法（method）。本文描述时会按照 JS 的习惯。

属性

在 TS 中声明类使用 class 关键字，如果实例有属性，则必须先声明其属性类型。如下，声明一个 Person 类：

class Person {
  // 声明类的属性，可以使用类型注解声明类型
  name: string;
  age: number;
    
  // 也可以省略，则默认是 any 类型
  address;
}

// 实例化
const person = new Person('kw', 18);
console.log(person.name);

初始值

类的属性可以设置初始值，既可以在声明时设置，也可以在构造函数中设置：

class Person {
  name: string = 'kw';
  age: number = 18;
}

class Person { 
  name: string;
  age: number;
    
  constructor() {
      this.name = 'kw';
      this.age = 18;
  }
}

`--strictPropertyInitialization`

这是 tsconfig.json 中的一个配置项，是否严格检查类的属性初始化操作。默认为 true，表示类的成员属性必须在声明时或者在构造函数中进行初始化操作。如果该选项开启了：

class Person { 
  // 正确，在声明时完成了初始化
  name: string = 'kw';
  // 正确，在构造函数中完成了初始化
  age: number;
  // 报错：Property 'address' has no initializer and is not definitely assigned in the constructor.
  address: string;
    
  constructor() {
      this.age = 18;
  }
}

有些场景下需要在别的地方进行属性的初始化，此时可以对属性应用非空断言：

class Person {
    name!: string;
}

此时虽然没有做初始化，但是编译器也不会报错了。

readonly 修饰符

使用 readonly 修饰类的成员属性后，该属性就变为了只读属性，只能读，不能修改。因此对于只读属性，必须在声明时，或者在构造函数中进行初始化，否则会报错。

class Person { 
  readonly name: string = 'kw';
  age: number;
}

构造方法

构造方法用于创建和初始化类的实例对象。使用 new 操作一个类时，就会触发这个类的构造方法的执行。

构造方法不是必须的，类有一个默认的空的构造方法。但是如果需要为类的实例设置不同的属性，则必须实现一个构造方法。

class Person { 
  name: string;
  age: number;

    
  constructor(name: string, age: number) {
      this.name = name;
      this.age = age;
  }
}

// 实例化
const person = new Person();
console.log(person.name);
console.log(person.age);

可访问性修饰符

修饰符用来限制类的成员属性和成员方法的可访问范围。

假设有一个 A 类和继承自 A 的 B 类，则可见范围有三种：任意地方，A 类内部，B 类的内部。分别对应了三种修饰符：

public：默认的修饰符，表示成员是公有的，可在任意地方被访问
protected：受保护的修饰符，表示成员能在当前类的内部，子类的内部被访问到
private：私有修饰符，表示成员只能在类的内部被访问到

class A {
    // 默认为 public，等同于 public a
    a;
    // 受保护的属性，可以在当前类和子类中访问
    protected b;
    // 私有属性，只能在当前类内部访问
    private c;
    
    test() {
        console.log(this.c)
    }
}

class B extends A {
    test() {
        console.log(this.b)
    }
}

参数属性

参数属性（Parameter Properties）是一种能简化代码的语法糖。例如要声明一个类，要先声明成员属性，再写构造方法进行初始化：

class Person { 
  name: string;
  age: number;

    
  constructor(name: string, age: number) {
      this.name = name;
      this.age = age;
  }
}

const person = new Person('kw', 18)
console.log(person.name)
console.log(person.age)

当这个类有非常多的属性时，光这些初始化代码可能就要写几十行。

在 TypeScript 中，在构造函数的参数前加上一个可见性修饰符public、private、protected 或者 readonly，该参数就变为了参数属性，TypeScript 会将这些构造函数的参数转换为具有相同名称和值的类属性。

上面的 Person 类就等同于这种写法：

class Person { 
  // 在声明类成员时 public 修饰符可以省略，但在使用参数属性时，不能省略
  constructor(public name: string, public age: number) {
    // 不需要函数体
  }
}

const person = new Person('kw', 18)
console.log(person.name)
console.log(person.age)

回顾下 AppController 控制器的代码：

export class AppController {
  constructor(private readonly appService: AppService) {}
}

现在再看这段代码是什么含义就很清晰了，它的完整写法是：

export class AppController {
  // appService 是私有属性且只读，需要在声明或者构造函数中完成初始化
  private readonly appService: AppService;
    
  constructor(appService: AppService) {
      this.appService = appService;
  }
}

类的其他语法

类还有一些其他语法，比如访问器，静态成员属性和方法，继承等等。这些内容如果还不熟悉，可以阅读其他文章博客或者文档，我们先学习上面这些，够用为主。

装饰器 Decorator

装饰器，看名字就知道是用起装饰作用的。它用来增强类（class）的功能，许多面向对象的语言都有这种语法。

虽然装饰器的历史悠久，但是由于 JS 这门语言本身很少有场景需要使用到装饰器，所以目前装饰器仍处于提案阶段，并且这一提，就是很多年。记得最早在 ES2015 中，装饰器语法就已经处于提案阶段了。

虽然 ES 标准的装饰器还未成为标准，但是 TS 中的装饰器可以大胆使用。

装饰器的本质就是函数，只不过使用形式上和普通函数有所不同：普通函数使用 () 调用，装饰器使用 @ 调用。普通函数可以在任意位置执行，装饰器只能用在类和类的成员身上。

装饰器和装饰器工厂

先来看一个装饰器的最简单的例子。

function Fn(target: any) {
  let a = new target;
  a.say()
}

@Fn
class A {
  say() {
    console.log('hello')
  }
}

代码执行，打印 “hello”。

Fn 是一个装饰器函数，当被用在类上时，它所接收的参数就是该类。所以可以在装饰器内部，实例化 A 类型，并调用 a对象的实例方法。

如果需要一些定制化的内容，想让装饰器接收一些其他的参数，就要用到装饰器工厂了。装饰器工厂就是一个返回装饰器的工厂函数。比如：

function FnFactory(name: string) {
    
  // 返回一个装饰器
  return function(target: any) {
      let a = new target;
      a.say(name)
  }
  
}

@FnFactory('kw')
class A {
  say(name: string) {
    console.log('hello, ', name)
  }
}

代码执行，打印 “hello, kw”。

注意区分装饰器和装饰器工厂的使用，普通的装饰器的用法是 @装饰器，装饰器工厂的用法需要带上圆括号，@装饰器()。

类装饰器

根据所修饰对象的不同，装饰器具体可以分为：

类装饰器
属性装饰器
方法装饰器
存取器装饰器
参数装饰器

上面的示例中，装饰器在类上调用，这就是类装饰器。类装饰器只有一个参数，就是被装饰的类。

属性装饰器

应用在类的属性成员上的装饰器，可接收两个参数：

如果是静态属性，则是类的构造方法；如果是实例属性，则是类的原型对象
属性名

function Property() {
  return function (target: any, property: any) {
    console.log(target)
    console.log(property)
  }
}

class C {
  @Property()
  name!:string;
}

// {}
// name

方法装饰器

方法装饰器用的比较多，它接收3个参数：

如果修饰的是静态成员，则为类的构造函数；如果修饰的是实例方法，则为类的原型对象
方法名
方法的属性描述符

function enumerable(value: boolean) {
  return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) {
    descriptor.enumerable = value;
  };
}

class Greeter {
  greeting: string;
    
  constructor(message: string) {
    this.greeting = message;
  }
 
  @enumerable(false)
  greet() {
    return "Hello, " + this.greeting;
  }
}

这个装饰器的作用是修改属性描述符的 enumerable 属性，设为 false，也就代表着该方法不能被枚举了。

存取器装饰器

用在访问器身上的装饰器，可接收参数和方法装饰器相同。

function configurable(value: boolean) {
  return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) {
    descriptor.configurable = value;
  };
}

class Point {
  private _x: number;
  private _y: number;
  constructor(x: number, y: number) {
    this._x = x;
    this._y = y;
  }
 
  @configurable(false)
  get x() {
    return this._x;
  }
 
  @configurable(false)
  get y() {
    return this._y;
  }
}

该装饰器可以动态修改存取器的属性描述符的 configurable 属性，示例中将其设置为 false，表示不能被删除，也不能被修改。

参数装饰器

应用在构造方法或者实例方法的参数上的装饰器，它接收三个参数：

如果修饰的是静态成员方法，则为类的构造函数；如果修饰的是构造方法或者实例方法，则为类的原型对象
参数所在方法的名字
参数在原函数的参数列表中的位置，也就是第几个参数

// 参数装饰器
function Param() {
  return function(target: any, param: string, index: number) {
    console.log(target)
    console.log(param)
    console.log(index)
  }
}

class Person {
  say(@Param() msg:string) {
    console.log(msg)
  }
}

// {}
// say
// 0

@Controller 和 @Get 装饰器

看了这么多装饰器，已经眼花缭乱了，来看一个实际的例子。

打开 app.controller.ts，修改为以下内容：

import { Controller, Get, Query } from '@nestjs/common';
import { AppService } from './app.service';

// 声明类为控制器，并为该模块的路由设置一个请求前缀 news
@Controller('news')
export class AppController {
  constructor(private readonly appService: AppService) {}

  // 和路由前缀拼接，处理 Get /news/list 请求
  @Get('list')
  // 参数装饰器，入参是请求中的 query 参数
  getHello(@Query('page') page) {
    return {
      code: 0,
      data: {
        list: [],
        page,
      },
    };
  }
}