타입스크립트 포매터: TypeScript 코드 정렬 온라인 도구

타입스크립트 포매터가 하는 일

TypeScript는 JavaScript에 타입을 더합니다. 인터페이스, 제네릭, enum, 유니언, 그리고 모든 매개변수에 붙는 타입 표기가 그것입니다. 문법이 늘어난 만큼 배치가 더 중요해집니다. 제네릭 매개변수와 반환 타입이 붙은 긴 함수 시그니처는 한 줄로는 읽기 어렵고, 여러 사람이 작성한 객체 타입은 스타일이 점점 달라집니다. 타입스크립트 포매터는 이런 코드를 하나의 규칙으로 정렬합니다.

이 도구는 TypeScript 파서를 갖춘 Prettier 3를 브라우저에서 실행합니다. 코드를 읽은 뒤 하나의 일관된 배치로 다시 출력하며, 모든 타입을 포함한 코드 자체는 그대로 유지됩니다.

사용 방법

왼쪽 상자에 TypeScript를 붙여넣습니다. 붙여넣는 즉시 정렬됩니다.
또는 파일 열기를 눌러 .ts 파일을 불러오거나, 예시를 눌러 예제를 시험해 봅니다.
옵션을 고릅니다. 들여쓰기(공백 2칸, 공백 4칸, 탭), 줄 너비(80에서 160), 후행 쉼표(전체, ES5, 없음), 작은따옴표, 세미콜론이 있습니다.
포맷을 누르거나 Ctrl+Enter를 누릅니다.
복사를 누르거나, 다운로드를 눌러 .ts 파일로 저장합니다.

첫 포맷 때 TypeScript 파서를 불러옵니다. 그다음부터는 입력하는 동안 결과가 갱신됩니다.

정렬 전과 후

압축된 입력입니다.

interface User{id:number;name:string;email?:string}export function greet(user:User,greeting:string='Hello'):string{return `${greeting}, ${user.name}`}const users:User[]=[{id:1,name:'Ada'},{id:2,name:'Linus'}]

기본값으로 포맷한 결과입니다.

interface User {
  id: number;
  name: string;
  email?: string;
}
export function greet(user: User, greeting: string = "Hello"): string {
  return `${greeting}, ${user.name}`;
}
const users: User[] = [
  { id: 1, name: "Ada" },
  { id: 2, name: "Linus" },
];

인터페이스 멤버는 각자 한 줄을 차지하고, 타입 표기의 콜론 뒤에는 공백이 들어가며, 객체 배열은 한 줄로 쓰면 80자를 넘기 때문에 나뉩니다. 짧은 객체는 배열 안에서 한 줄로 유지됩니다.

제네릭과 타입 별칭도 같은 방식으로 처리됩니다.

type ApiResponse<T> = { data: T; error?: string };
async function get<T>(url: string): Promise<ApiResponse<T>> {
  const r = await fetch(url);
  return r.json() as Promise<ApiResponse<T>>;
}

접근 제어자가 있는 클래스와 ?? 연산자도 마찬가지입니다.

class Cart {
  private items: Map<string, number> = new Map();
  add(id: string, qty = 1): void {
    this.items.set(id, (this.items.get(id) ?? 0) + qty);
  }
}

들여쓰기를 탭으로 설정하면 enum은 다음과 같이 됩니다. 각 멤버가 탭으로 시작합니다.

enum Role {
	Admin = "admin",
	Editor = "editor",
}

문법 오류

코드를 파싱할 수 없으면 TypeScript 파서의 메시지가 위치와 함께 표시됩니다. 두 가지 예입니다.

let count: number = ;는 1행 21열: Expression expected.를 냅니다.
function add(a: number, b: number {는 1행 35열: ',' expected.를 내며, 닫는 괄호가 빠진 위치를 가리킵니다.

입력에서 보기를 누르면 커서가 문제 위치로 이동합니다.

포맷이 깔끔하게 된다고 해서 컴파일도 깔끔하게 되는 것은 아닙니다. 다음 줄은 타입 오류이지만 문제없이 정렬됩니다.

let count: number = "five";

이런 오류는 TypeScript 컴파일러만 잡아냅니다.

팁

프로젝트에 .prettierrc가 있다면 여기서도 같은 옵션을 설정하세요. 그러면 결과가 저장소와 일치합니다.
후행 쉼표를 전체로 설정하면 타입 매개변수와 함수 매개변수가 여러 줄로 나뉠 때 마지막 항목 뒤에도 쉼표가 붙습니다. 배열과 객체에만 쉼표를 붙이고 싶다면 ES5를 고르세요.
React를 쓰는 .tsx 파일도 TypeScript 파서가 JSX까지 처리합니다.
타입 옆에 있는 GraphQL 스키마를 정렬하려면 GraphQL 포매터를 쓰세요. tsconfig.json 같은 JSON 설정 파일은 주석을 허용하지만 엄격한 JSON은 그렇지 않다는 점에 주의하세요. JSON 포매터는 그런 주석을 오류로 표시합니다.

타입스크립트를 정렬하는 다른 방법

VS Code에는 TypeScript 포매터가 내장되어 있습니다. Format Document(문서 서식)를 실행하세요. 단축키는 Windows에서 Shift+Alt+F, macOS에서 Shift+Option+F입니다. 이 페이지와 같은 결과를 원하면 Prettier 확장을 설치하고 기본 포매터로 지정하세요.
명령줄: npx prettier --write "src/**/*.ts"는 폴더 전체를 정렬합니다.
pre-commit 훅: lint-staged 같은 도구로 커밋할 때마다 변경된 파일에 Prettier를 실행하면, 포맷 문제가 코드 리뷰까지 넘어오지 않습니다.

일반 JavaScript 파일이라면 같은 옵션을 더 작은 다운로드로 제공하는 자바스크립트 포매터를 쓰세요.

타입스크립트 포매터 자주 묻는 질문

이 도구가 타입도 검사하나요?

아니요. 구조를 파악하기 위해 코드를 파싱한 뒤 일관된 배치로 다시 출력할 뿐입니다. 숫자가 와야 할 자리에 문자열을 넘기는 것 같은 타입 오류는 보고되지 않습니다. 타입 검사는 tsc나 에디터로 하세요.

타입스크립트 페이지가 자바스크립트 페이지보다 늦게 로드되는 이유는 무엇인가요?

TypeScript 파서는 JavaScript 파서보다 큽니다. 처음 포맷을 누를 때 한 번만 내려받으며, 이후 방문에서는 브라우저가 캐시해 둔 파일을 씁니다.

일반 JavaScript도 여기서 정렬할 수 있나요?

네. 올바른 JavaScript는 올바른 TypeScript이기도 하므로 작동합니다. 다만 자바스크립트 포매터는 더 작은 파서를 불러오므로 일반 JS에는 조금 더 빠릅니다.

데코레이터, enum, 제네릭을 지원하나요?

네. Prettier 3를 통해 TypeScript 파서를 사용하므로 enum, 제네릭, satisfies, 옵셔널 체이닝, 데코레이터 같은 최신 문법을 이해합니다.

타입스크립트 포매터 (TS 코드 정렬)