🏪타입스크립트(Typescript)Partial,Pick,Omit

스타트업 퇴사 후, 바로 IT 연합 동아리인 DND 8기활동을 진행했다. DND 프로젝트를 진행하면서 타입스크립트를 사용하는 목적인 “안정성”과 이를 향상시킬 수 있는 방법에 대해 고민한 부분들을 공유하고자 한다.

서비스 URL -> https://www.wise24life.site

💻 Web FrontEnd 개발자라면 이제 누구나 아는

타입스크립트 는 자바스크립트를 기반으로 정적 타입 문법을 추가한 언어이다. “컴파일”단계에서 타입검사기(Type Checker)를 통해 사전검사를 하여 런타임에 발생하게 될 에러를 방지할 수 있도록 한다.(*브라우저에서는 자바스크립트만 동작할 수 있기때문에 빌드과정에서 트랜스파일러를 통해 자바스크립트로 변환된다. )

🕗 시간이 없다!! 일단 되는대로 때려넣자!그렇게 나온 체계없는 코드들

사실 바로 직전 스타트업에서 근무할 때는, 웹개발을 공부한지 얼마 안된채로 투입되어서 타입스크립트가 일단 좋다니까 사용했었고, 항상 시간에 쫓겨 제대로 공부해 볼 시간이 없었다. 그리고 DND 프로젝트도 주어지는 공식적인 개발기간이 8주밖에 안되기에 일단 되는대로 개발을 진행했다. 그렇게 나온 체계없는 코드이다.

// types/IUser.ts
// 편의점 근무관리 서비스 특성이 반영된 유저 타입선언
export type RoleType = 'WORKER' | 'MANAGER';
export interface IUser {
	userName: string;
	userProfileCode: number;
    workPlace: string; 
	workLocation: string;
	workTime: string; 
	role: RoleType;
	phoneNumber: string | null; //전화번호(민감한 개인정보)는 입력하지 않아도 된다. 
	wage: string;
	email: string;
}

// 유저 회원가입에 사용된 Zustand Store 파일

// 유저 등록 폼 타입 선언
interface IUserForm {
	role: RoleType | null;
	workPlace: string | null;
	workLocation: string | null;
	workTime: string;
	phoneNumber: string | null;
	wage: string | null;
}

// 유저 post api 연동 
export interface MutateUserBody {
	role: RoleType;
	workPlace: string;
	workLocation: string;
	workTime: string; // "월(17:00~21:00),화(17:00~21:00)"
	phoneNumber: string | null; // "010-0000-0000"
	wage: number;
}


export const postUser = async (body: MutateUserBodyType) => {
	const res = await client.post(`/api/user/signup`, { ...body });
	return res;
};

🧐왜 자꾸 같은 타입을 또! 정의를 하지? 리팩토링하기!

한 번 정의된 유저는 기본적으로 모든 페이지에서, 그리고 모든 영역에서 타입이 일정하게 유지되어야 안정적이라고 할 수 있다. 예를 들어 내가 IUser에서 wage를 string으로 타입을 선언해 두었으면 유저의 wage는 항상 string타입이어야 한다. 그런데 위처럼 중구난방으로 여러파일에서 유저의 타입을 재정의하다 보면 wage를 number로 선언하게 될 수 있다. 동일한 타입에 대해서는 중복 선언을 하지 않고, 기존에 정의한 것을 재활용해야한다.이를 위해 Pick과 Partial이라는 유틸리티 타입을 사용해 보았다. (+Omit?) 그리고 mapped type을 활용해 기존 정의된 타입을 재활용했다.

Partial

• Partial로 특정 타입의 부분 집합을 만족하는 타입을 정의할 수 있다.
  기존에 유저 등록을 위해 만든 Zustand Store 파일에서 유저 등록 Form type은 아래와 같이 개선 될 수 있다.

// 유저 회원가입에 사용된 Zustand Store 파일

//BEFORE
interface IUserForm {
	role: RoleType | null;
	workPlace: string | null;
	workLocation: string | null;
	workTime: string;
	phoneNumber: string | null;
	wage: string | null;
}


//AFTER
type UserFormType = Partial<IUser> & { workTimeObj?: WeekWorkTimeType }; // 입력하지 않은 필드는 undefiend 상태 

Pick<T,K>

• T에서 프로퍼티 K의 집합을 선택해 타입을 구성할 수 있다.

기존에 유저 등록을 위해 정의한 타입은 아래와 같이 개선될 수 있다.

// BEFORE
export interface MutateUserBody {
	role: RoleType;
	workPlace: string;
	workLocation: string;
	workTime: string; // "월(17:00~21:00),화(17:00~21:00)"
	phoneNumber: string | null; // "010-0000-0000"
	wage: number;
}

// AFTER

export type MutateUserBodyType = Pick<
	IUser,
	'role' | 'workPlace' | 'workLocation' | 'workTime' | 'phoneNumber' | 'wage'
>; 

Omit<T,K>

• T에서 모든 프로퍼티를 선택한 다음 K를 제거한 타입을 구성한다.
  사실 위에서 작성한 MutateUserBodyType은 Omit으로 userName,userProfileCode을 제거한 타입이라고 정의할 수 있다. 그러나 필요한 유저 필드가 무엇인지 코드상으로 명확하게 보이는 것을 선호하기에 Pick을 사용하여 정의하였다.

Mapped Type

마지막으로 유저의 정보를 prop으로 넣어주는 컴포넌트의 경우 interface를 아래와 같이 기존 정의한 유저의 타입을 mapping해 주었다.

interface Props {
	userProfileCode: IUser['userProfileCode'];
	userName: IUser['userName'];
	workTime: IUser['workTime'];
	email: IUser['email'];
}

function UserProfile({ userProfileCode, userName, workTime, email }: Props) {
 --- 이하 생략 ---