實現Nest中參數的聯合類型校驗
場景概述
我們在進行接口開發時,客戶端需要傳入一個名為text的字段,它可能是string類型或Array<Object>類型(在TS中我們把這種關系稱之為 聯合類型 ),class-validator庫中提供了相關的校驗注解,那把他們寫在一起能否完成相關的校驗呢,如下所示:
export class AppDto {
@ApiProperty({ example: "2022年4月20日修改", description: "備注" })
@IsString()
@IsArray()
@ValidateNested({ each: true })
@Type(() => TextObjDto)
public text!: string | Array<TextObjType>;
}
TextObjDto的代碼如下所示:
export class TextObjDto {
@ApiProperty({ example: "修復了一些bug", description: "內容" })
@IsString()
content!: string;
@ApiProperty({ example: "2022-04-20 07:52", description: "創建時間" })
@IsString()
createTime?: string;
@ApiProperty({ example: true, description: "是否為新功能標識" })
@IsBoolean()
mark?: boolean;
}
啟動項目,用postman測試后發現并不好使,傳了array類型的數據又要求是string類型,傳了string類型的數據又要求是array類型。
注意:嵌套類型的對象驗證需要使用@ValidateNested和@Type注解, @Type接受一個回調函數,函數內部需要返回一個用class聲明的dto類。
解決方案
經過一番求助,翻了一圈class-validator的文檔,發現沒有現成的解決方案。那么,就只能自己拿到參數搞自定義校驗了。
在class-transformer這個庫中,提供了Transform方法,它接受一個回調函數作為參數,回調函數中提供了一個TransformFnParams類型的參數,其中的value字段就是客戶端傳過來的參數,我們只需要對其進行校驗即可。

接下來,我們來看下實現代碼,如下所示:
export class AppDto {
@ApiProperty({ example: "2022年4月20日修改", description: "備注" })
@IsOptional()
@Transform(({ value }) => checkTitleKey(value))
public text!: string | Array<TextObjType>;
}
上述代碼中,我們有一個名為checkTitleKey的校驗函數,因為需要自己校驗,所以就需要自己把TS的類型校驗復刻一遍出來,實現代碼如下所示:
- 如果校驗通過直接返回value參數即可
- 如果校驗不通過直接使用nest內置異常進行拋出即可
export function checkTitleKey(
value: string | number | Array<TextObjType> | undefined | null
): any {
if (typeof value === "string") {
// 不做更改,直接返回
return value;
} else if (value instanceof Array) {
// 不能為空數組
if (value.length <= 0) {
throw new BadRequestException(
"property text cannot be an empty array",
"Bad Request"
);
}
for (let i = 0; i < value.length; i++) {
// 校驗數組中的對象字段
const objKeys = Object.keys(value[i]);
if (objKeys.length <= 0) {
throw new BadRequestException(
"property text contains empty objects",
"Bad Request"
);
}
// 必須包含content字段
if (!objKeys.includes("content")) {
throw new BadRequestException(
"property text objects in the array must contain 'content'",
"Bad Request"
);
}
// 對每個key進行校驗
for (let j = 0; j < objKeys.length; j++) {
switch (objKeys[j]) {
case "content":
// content字段必須為string類型
if (typeof value[i].content !== "string") {
throw new BadRequestException(
"property text 'content' of the objects in the array must be of type string",
"Bad Request"
);
}
break;
case "duration":
if (typeof value[i].createTime !== "string") {
throw new BadRequestException(
"property text 'createTime' of the objects in the array must be of type number",
"Bad Request"
);
}
break;
case "delay":
if (typeof value[i].mark !== "boolean") {
throw new BadRequestException(
"property text 'mark' of the objects in the array must be of type number",
"Bad Request"
);
}
break;
default:
break;
}
}
}
return value;
} else {
throw new BadRequestException(
"text must be an array or string",
"Bad Request"
);
}
}
TextObjType的聲明也需要進行相對應的修改,如下所示:
- 全部變為可選參數,參數的必傳與否已經在校驗函數中處理了
- 類型全部變為any
export type TextObjType = {
content?: any;
createTime?: any;
mark?: any;
};
有一部分開發者可能比較迷惑,不是說ts用any是可恥行為嗎,這我就要糾正下你了,既然它存在自然有使用場景。在我這個場景中,對象里所有key的類型校驗都手動處理了,如果在此處定義了它的類型,在校驗函數中就會報黃色警告,因此針對于需要手動校驗類型的場景而言,使用any是最合適的。
結果校驗
最后,我們針對于代碼里定義的異常規則來驗證下其是否能正常工作,如下所示:
# text字段為string類型
{
"id":"122211",
"title":"新的標題",
"text":"新替換的文本內容",
"name":"新的名字",
"config":"var config = {\"name\":\"aa\",\"age\":\"21\",\"title\":\"標題測試\"}"
}
>>> 接口調用成功
# text字段為Array類型所有key都存在
{
"id":"122211",
"title":"新的標題",
"text":[{"content":"新文本","createTime":"2022-04-20","mark":false}],
"name":"新的名字",
"config":"var config = {\"name\":\"aa\",\"age\":\"21\",\"title\":\"標題測試\"}"
}
>>> 接口調用成功
# text字段缺少content
{
"id":"122211",
"title":"新的標題",
"text":[{"createTime":"2022-04-20","mark":false}],
"name":"新的名字",
"config":"var config = {\"name\":\"aa\",\"age\":\"21\",\"title\":\"標題測試\"}"
}
>>> 接口報錯400:property text objects in the array must contain 'content'
# text字段為number類型
{
"id":"122211",
"title":"新的標題",
"text":19,
"name":"新的名字",
"config":"var config = {\"name\":\"aa\",\"age\":\"21\",\"title\":\"標題測試\"}"
}
>>> 接口報錯400:text must be an array or string
# text字段缺少createTime與mark
{
"id":"122211",
"title":"新的標題",
"text":[{"content":"新文本"}],
"name":"新的名字",
"config":"var config = {\"name\":\"aa\",\"age\":\"21\",\"title\":\"標題測試\"}"
}
>>> 接口調用成功
如下圖所示,我們列舉一個text字段為數字時的報錯截圖,運行結果符合預期,文章開頭的問題成功解決:

































