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 aa;// 受保护的属性，可以在当前类和子类中访问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,},};}
}