share facebook facebook twitter menu hatena pocket slack

2019.03.12 TUE

TypeScriptベースなRequestの共通化

高橋 慎一

WRITTEN BY 高橋 慎一

前置き

  • App: ionic
  • Web: Angular
  • API: Nest.js

僕たちのチームのフレームワーク採用はこんな感じで全部Angularベース。
API Docはapi blueprintあたりを採用。
「でもこれ、フロントエンド/バックエンドで同じような実装するじゃん…無駄じゃね」
と思いはじめて実験的に取り組んでみてる構成を紹介します。

Requestクラスを共通化する

Requestクラスを別リポジトリに分けて、git moduleとして扱っちゃう作戦です。
構成とコマンドは以下のような感じ。
今回はUser追加のリクエストを共通化する例です。

ディレクトリ構成

├── app
│   ├── tsconfig.json
│   ├── package.json
│   └── src
│       └── common (submodule: common)
├── api
│   ├── tsconfig.json
│   ├── package.json
│   └── src
│       └── common (submodule: common)
└── common
    ├── tsconfig.json
    ├── package.json
    └── Requests
        └── AddUserRequest.ts

サブモジュールの追加

$ git submodule add ./src/common
$ npm i ./src/common

RequestClass

class-validatorにしたがって以下のようにすると楽ちんです。

BaseRequest.ts

import { validate } from "class-validator";

export class BaseRequest {
    async validate(): Promise<boolean> {
        const errors = await validate(this);

        if (errors.length > 0) {
            throw new Error(errors.toString());
        } else {
            return true;
        }
    }
}

AddUserRequest.ts

import * as v from "class-validator"

export class AddUserRequest extends BaseRequest{
    @v.IsNotEmpty()
    id: string;

    @v.IsDate()
    @v.IsOptional()
    birthday: Date;
}

こうしておくことでNest.js側では通常通りにValidationがかかります。

@Post("/user")
@HttpCode(200)
async create(@Body() params: AddUserRequest) {
    // 処理
}

Angularやionic側ではclass-transformerを使ってvalidateが可能です

import { plainToClass } from "class-transformer";

const req: AddUserRequest = plainToClass(request);

if (await req.validate()) {
    // 処理
}

元記事はこちら

TypeScriptベースなRequestの共通化

高橋 慎一

高橋 慎一

最強。敗北を知らない。

cloudpack

cloudpackは、Amazon EC2やAmazon S3をはじめとするAWSの各種プロダクトを利用する際の、導入・設計から運用保守を含んだフルマネージドのサービスを提供し、バックアップや24時間365日の監視/障害対応、技術的な問い合わせに対するサポートなどを行っております。
AWS上のインフラ構築およびAWSを活用したシステム開発など、案件のご相談はcloudpack.jpよりご連絡ください。