TypeScript로 프론트엔드 개발 작업시 API 응답 값에 대한 타입 지정이 필요하다. 이때 많은 양의 타입을 자동화해주는 모듈을 사용할 수 있다. OpenAPI Generator는 Swagger에서 제공하는 자동화 도구 중 하나로 클라이언트에서 사용가능한 타입을 자동으로 생성해 준다. Swagger와 연동, TypeScript 타입을 생성하는 대표적인 npm 패키지로
openapi-typescript-codegen가 있다.
npm i node-fetch openapi-typescript-codegen -Dpackage.json script 추가{
"generate:openApi-typescript": "node ./scripts/generate-openapi-types.js",
}const path = require("path");
const fs = require("fs");
const { promisify } = require("util");
const fetch = require("node-fetch");
const OpenAPI = require("openapi-typescript-codegen");
(async function () {
// yaml or json
const format = "json";
// Swagger groups Array
const groups = [
"Global-Cocone",
"Hello-Cocone",
"Hello-Cocone-Admin",
"Hello-Cocone-Login",
];
// swagger-url or yaml
const specURL = ""; // ex) swaggerURL/api-docs?group';
const accessAsync = promisify(fs.access);
const mkdirAsync = promisify(fs.mkdir);
const writeFileAsync = promisify(fs.writeFile);
const makeDirectory = async (path) => {
try {
await accessAsync(path);
} catch (err) {
if (err.code === "ENOENT") {
await mkdirAsync(path, { recursive: true });
} else {
throw err;
}
}
};
try {
for (let group of groups) {
const outputPath = path.resolve(
// 타입이 생성될 경로
path.join(__dirname, "..", `src/types/${group.toLowerCase()}`),
);
const docFilePath = path.join(outputPath, `spec.${format}`);
const response = await fetch(`${specURL}=${group}`);
const data = await response.text();
await makeDirectory(outputPath);
await writeFileAsync(docFilePath, data);
await OpenAPI.generate({
input: docFilePath,
output: outputPath,
useOptions: true,
useUnionTypes: true,
exportServices: false,
exportCore: false,
});
}
} catch (error) {
console.error(error);
}
})();scripts/generate-openapi-types.jsnpm run generate:openApi-typescriptsrc/types 폴더 내부에 groups 로 분리한 폴더 생성interface{}로 타입 정의된 .ts 파일 생성