[Typescript] openAPI 문서 모델을 typescript interface로 전환하기

1. openAPI Generator

Install

brew install openapi-generator

---

Generate

변환 가능한 리스트

 이 중 typescript-axios로 해보자.

---

openapi-generator generate -i <yml파일이름> -g typescript-axios -o <output 폴더 지정>

변환 명령어는 위와 같다.

openapi-generator generate -i swaggerPetstore.yml -g typescript-axios -o ./openApi-Generator

위 명령어로 현재 폴더에 있는 swaggerPetstore.yml(swagger editor에서 예시로 주는 yml을 따로 파일로 저장한 것) 이라는 이름을 가진 openAPI yml 파일을 openApi-Generator 폴더에 typescript-axios 형식으로 generate한 결과를 저장한다.

---

Output

generate 결과

// api.ts
/**
 * 
 * @export
 * @interface Order
 */
export interface Order {
    /**
     * 
     * @type {number}
     * @memberof Order
     */
    id?: number;
    /**
     * 
     * @type {number}
     * @memberof Order
     */
    petId?: number;
    /**
     * 
     * @type {number}
     * @memberof Order
     */
    quantity?: number;
    /**
     * 
     * @type {Date}
     * @memberof Order
     */
    shipDate?: Date;
    /**
     * Order Status
     * @type {string}
     * @memberof Order
     */
    status?: OrderStatusEnum;
    /**
     * 
     * @type {boolean}
     * @memberof Order
     */
    complete?: boolean;
}

/**
    * @export
    * @enum {string}
    */
export enum OrderStatusEnum {
    Placed = 'placed',
    Approved = 'approved',
    Delivered = 'delivered'
}

위 코드는 api.ts 중 일부이다. 

// swaggerPetstore.yml
definitions:
  Order:
    type: "object"
    properties:
      id:
        type: "integer"
        format: "int64"
      petId:
        type: "integer"
        format: "int64"
      quantity:
        type: "integer"
        format: "int32"
      shipDate:
        type: "string"
        format: "date-time"
      status:
        type: "string"
        description: "Order Status"
        enum:
        - "placed"
        - "approved"
        - "delivered"
      complete:
        type: "boolean"
        default: false
    xml:
      name: "Order"

원본 yml 파일 중 Order는 위와 같다.

---

2. swagger editor

웹 사이트에 yml을 복붙해서 generate 할 수 있다.

---

Generate

Generate > typescript-angular

여기에는 axios 가 없어서 angular로 해봤다.

---

Output

generate가 끝나면 압축파일이 다운로드 되고 압축을 풀면 위와 같은 파일들이 나온다.

// model/order.ts
export interface Order { 
    id?: number;
    petId?: number;
    quantity?: number;
    shipDate?: Date;
    /**
     * Order Status
     */
    status?: Order.StatusEnum;
    complete?: boolean;
}
export namespace Order {
    export type StatusEnum = 'placed' | 'approved' | 'delivered';
    export const StatusEnum = {
        Placed: 'placed' as StatusEnum,
        Approved: 'approved' as StatusEnum,
        Delivered: 'delivered' as StatusEnum
    };
}

비교용 Order interface.