CSV TypeScript 인터페이스 생성기

사용 방법

1. 1

   CSV 불러오기

   행을 붙여 넣거나 .csv, .tsv 파일을 엽니다. 헤더 행이 속성 이름이 되며, "첫 행은 헤더"를 끄면 column_1, column_2 식으로 이름이 붙습니다.

2. 2

   루트 타입 이름 정하기

   루트 타입 이름의 기본값은 CsvRow입니다. 배열 타입이 이 이름을 쓰고 행 타입은 단수형을 씁니다. CsvRow는 CsvRowItem, Products는 Product가 됩니다.

3. 3

   선언 방식 고르기

   "선언 방식"에서 interface와 type 별칭 중 하나를 고릅니다. 모듈 안에서만 쓸 타입이면 "export 키워드"를 끄고, 모든 필드에 readonly를 붙이려면 "readonly 속성"을 켭니다.

4. 4

   감지 여부 결정

   number, boolean, | null이 필요하면 "숫자·불리언·null 감지"를 켜 두고, 모든 열을 string으로 두려면 끕니다. "파일을 읽은 결과" 패널에서 열마다 정해진 타입을 볼 수 있습니다.

5. 5

   프로젝트에 복사

   선언을 복사하거나 .ts 파일로 내려받은 뒤, 아래의 파서 주의점을 확인하고 Papa.parse<CsvRowItem>(text, { header: true, dynamicTyping: true })처럼 파서 결과에 행 타입을 붙입니다.

작동 원리

export type CsvRow = CsvRowItem[];

export interface CsvRowItem {
  id: number;
  name: string;
  active: boolean;
}

실제 예시

id,name,active
1,Ari,true
2,Bea,false

export type CsvRow = CsvRowItem[];

export interface CsvRowItem {
  id: number;
  name: string;
  active: boolean;
}

id,price,note
1,10,
2,12.5,gift
3,9,NA

export type CsvRow = CsvRowItem[];

export interface CsvRowItem {
  id: number;
  price: number;
  note: string | null;
}

id,first name,user-id
1,Ari,u-1
2,Bea,u-2

type UserRow = UserRowItem[];

type UserRowItem = {
  readonly id: number;
  readonly "first name": string;
  readonly "user-id": string;
};

id,name,active
1,Ari,true

export type CsvRow = CsvRowItem[];

export interface CsvRowItem {
  id: string;
  name: string;
  active: string;
}

zip,qty
02134,1
10001,2

export type CsvRow = CsvRowItem[];

export interface CsvRowItem {
  zip: string;
  qty: number;
}

자주 하는 실수

• 파서가 같은 타입을 만들어야 함

  Papa Parse는 dynamicTyping을 켜지 않으면 문자열을 돌려주고, 켜더라도 셀마다 따로 변환하므로 이 도구가 string으로 정한 열에서도 02134를 숫자 2134로 바꾸며, null 단어 목록도 없습니다. csv-parse는 cast를 켜야 숫자가 나옵니다. 파서 옵션이나 변환 단계를 생성된 타입에 맞추세요.

• 모든 행에서 비어 있는 열

  이런 열은 null 타입이 되어 실제 값은 하나도 들어갈 수 없습니다. 샘플에서 그 열에 채워진 셀을 하나 이상 넣거나 속성을 직접 string | null로 넓히세요.

• 엉뚱한 값 하나가 열을 string으로 만듦

  3, 5, ask가 든 qty 열은 number | string이 아니라 string이 됩니다. 감지는 한 열 안에서 종류를 섞지 않기 때문입니다. 그 값을 정리하거나 "null로 볼 단어"에 추가하면 number로 돌아옵니다.

• 날짜 타입 없음

  날짜 감지가 없으므로 날짜 열도 string입니다. 코드에서 변환한다면 타입을 Date로 바꾸세요.

• 속성 이름이 카멜 케이스로 바뀌지 않음

  헤더는 앞뒤 공백만 제거하고 쓰인 그대로 유지되므로 first_name은 first_name으로 남고 user-id는 따옴표 키가 됩니다. 코드 스타일상 카멜 케이스가 필요하면 CSV나 에디터에서 이름을 바꾸세요.

자주 묻는 질문