Typescript Interface 조각코드 자동생성

지난 시간에는 DB 테이블 컬럼정보를 이용한 Typescript Variable 작성에 대해 말씀드렸습니다.

오늘은 Typescript Interface 조각코드 생성하는 기능을 소개해드립니다.

DB 테이블 Snake case 컬럼 기준으로, Camel case 변수를 생성하게 되는데요.

초기값 입력에 관해서는 이전 게시물 확인을 부탁드립니다.

이전 게시물에서 각 변수의 타입을 지정해야만 하는 Typescript Variable 조각코드를 생성하는 방법을 안내해드렸지만, 실제 타입 선언은 서버측에서 받아오는 객체의 타입을 선언하는데 더 자주 사용됩니다.

풀스택 개발자가 DB 테이블의 컬럼과 맵핑 되어야 하는 경우에도 그렇지만, 프론트엔드 백엔드 개발자가 나눠진 상황에서 프론트엔드 개발자가 백엔드에서 제공하는 api 응답 JSON 을 보고 각 변수의 타입에 맞게 변수를 만들어 사용해야 하는 경우, 또는 swagger 나 정의된 spec 문서를 보고 각 타입에 맞는 변수를 생성해야 할 때 나름 유용하지 않을까 생각해봅니다.

그럼 제공하는 옵션에 대해 간단히 말씀드립니다.

Typescript Interface 생성 옵션

• data-type : 변수에 저장되는 값의 종류를 선택하면 그에따라 변수의 타입을 지정해줍니다.
• readonly : 각 변수의 앞에 readonly 키워드를 넣어줍니다.
• optional-property : 각 변수의 뒤에 ? 키워드를 넣어줍니다.
• semicolon : 각 변수 구문의 맨 뒷쪽에 세미콜론을 넣어줍니다.
• comment : DB 컬럼에 저장된 코멘트를 자바스크립트 코멘트로 뒷쪽에 넣어줍니다.
• vertical-align : 변수들을 세로로 정렬합니다.

Typescript Interface 생성 예시

interface IOlosiaCom {
	seq: number;
	userId: string;
	userEmail: string;
	delFg: boolean;
	createDate: string;
}

const olosiaCom: IOlosiaCom = {
	seq: 0,
	userId: '',
	userEmail: '',
	delFg: false,
	createDate: ''
}

olosiaCom.seq;
olosiaCom.userId;
olosiaCom.userEmail;
olosiaCom.delFg;
olosiaCom.createDate;

// Interface as Function Type
interface IOlosiaCom {
	(
		seq: number,
		userId: string,
		userEmail: string,
		delFg: boolean,
		createDate: string
	): void;
}
const olosiaCom: IOlosiaCom = (seq, userId, userEmail, delFg, createDate) => {
	console.log(seq, userId, userEmail, delFg, createDate);
};

interface 선언하는 조각코드 뿐만 아니라, 객체의 타입을 선언하고 접근하는 조각코드들까지 생성하도록 되어 있습니다.

오늘은 코드 한땀에서 제공하는 Typescript Interface 조각코드 생성기능에 대해 간단히 말씀드렸습니다.

혹시 이용하시면서 필요한 기능 있으시면 댓글 부탁드립니다.

감사합니다.

올로시아 코드 한땀 서비스 바로가기