타입스크립트 활용 연습

위코드 기업협업에 참여하며 정리한 내용입니다.

기업협업 프로젝트는 타입스크립트를 활용해 진행했다. (타입스크립트는 기존 자바스크립트에 더 명확한 타입을 명시해주는 방법) 타입스크립트 문법이 익숙하지 않은 것을 떠나 자바스크립트 기초가 부족하니 명확한 타입을 정하는 것 자체가 어려웠고, any 를 써서 많은 문제를 해결했다. 앞으로는 더 정확하게 타입스크립트를 써야 하겠지만, 일단 지금까지 사용한 타입스크립트 케이스를 모아둔다.

Interface 로 타입 묶기, 함수 타입 지정

interface 를 사용하면 여러 프로퍼티의 타입을 객체로 명시힐 수 있다. 아래 예시에서 focusId 는 문자 형태의 state 이지만 나머지 두 값은 함수인데, sectionClick 은 클릭 이벤트를 인자로 받는 함수이고, onApplyClickEvent 는 NavData 라는 타입을 가진 요소를 인자로 받는 함수다. 이 때 void 는 return 값이 없을 때 사용한다. 그리고 export 를 붙여 다른 곳에서 해당 프롭을 inport 해 사용한다.

// View.tsx

export interface ClickEventProps {
  focusId: string;
  sectionClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
  onApplyClickEvent: (changedValue: NavData) => void;
}

..

<EditPanel focusId={focusId} onApplyClickEvent={onApplyClickEvent}/>

// EditPanel.tsx

import { ClickEventProps } from "../View/View";

const EditPanel = ({ focusId, onApplyClickEvent }: ClickEventProps) => {
    ..
}

타입 상속, 배열 타입 지정

공통되는 타입은 하나로 묶고, 각 타입별로 추가되는 것들만 따로 명시할 수 있다. 이때 공통되는 것들의 값을 불러와 추가할 수 있다. 배열에 문자열이 담긴다면 Array이라고 표기할 수 있는데 인덱스 까지 표기해야 오류가 잡힐 경우도 있다.

export interface BaseData {
  id: string;
}

export interface NavData extends BaseData {
  box_image_url: string;
  menu_list: Array<string>; // 배열 타입
  bg_color: string;
}

...

export interface ImageSlideData extends BaseData {
  section_title: string;
  images: Array<{ [index: string]: string }>; // 배열 타입
  arrow_bg_color: string;
  arrow_color: string;
}

매개변수 타입을 하나씩 지정

아래 InputTitle 컴포넌트는 defaultTitle과 onChnage 를 프롭스로 받는데 해당 요소의 타입을 각자 지정할 수 있습니다. (interface 로 묶지 않고)

const InputTitle = ({
  defaultTitle,
  onChange,
}: {
  defaultTitle: string; // 문자열 타입 지정
  onChange: (title: string) => void; // 함수 타입 지정
}) => {
  const [inputTitleValue, setInputTitleValue] = useState(
    defaultTitle ? defaultTitle : ""
  );
...
}

기타

아래 코드는 fucntionProps 으로 해당 컴포넌트가 전달받는 매개변수의 타입을 지정해주었고, 내부 함수의 매개변수는 string, 문자열로 지정했습니다.

export interface functionProps {
  editInfo: any;
  updateEditInfo: (item: any) => void;
}

const EditPanelMain = ({ editInfo, updateEditInfo }: functionProps) => {

  const onChangeMainTitle = (title: string) => {
    const newEditInfo = _.cloneDeep(editInfo);
    newEditInfo.main_section.main_title = title;
    updateEditInfo(newEditInfo);
  };

..