TypeScript란? 비개발자를 위한 쉬운 설명

TypeScript는 타입이 붙은 JavaScript입니다. 각 값이 어떤 종류의 데이터여야 하는지, 예를 들어 숫자, 텍스트, 주문 목록인지 라벨을 붙이면, TypeScript가 코드가 실행되기 전에 불일치를 검사합니다. TypeScript 사이트는 이것을 “타입을 위한 문법이 있는 JavaScript(JavaScript with syntax for types)”라고 설명합니다. 타입은 일반 JavaScript로 변환될 때 제거되고, 결과물은 JavaScript가 실행되는 곳이라면 어디서나 돌아갑니다.

AI로 만들 때 중요한 이유

AI 모델은 코드를 빠르게 씁니다. 그런데 빠른 코드에는 실수가 있습니다. 한 파일에서는 customerName, 다른 파일에서는 customer_name이라는 필드, 가격을 숫자가 아니라 텍스트로 넘기는 실수, 필요한 값이 빠진 채 호출되는 함수 등이 그렇습니다. 일반 JavaScript에서는 이런 실수 중 많은 것이 누군가 잘못된 버튼을 누를 때에야 드러납니다.

TypeScript는 코드를 작성하는 동안 많은 실수를 더 일찍 잡아냅니다.

• AI가 즉시 피드백을 받습니다. 타입 오류는 잘못된 줄을 정확히 가리키므로, 에이전트가 여러분이 보기 전에 고칠 수 있습니다.
• 변경이 더 안전합니다. 필드 이름을 바꾸면, 옛 이름을 아직 쓰는 모든 곳을 TypeScript가 표시합니다.
• 코드가 스스로 설명합니다. 타입은 함수가 무엇을 기대하고 무엇을 반환하는지 문서화해서, 여러분, AI, 그리고 나중에 작업할 모든 개발자에게 도움이 됩니다.
• 편집기가 더 똑똑해집니다. 편집기가 각 값의 타입을 알기 때문에 자동 완성과 “정의로 이동”이 더 잘 작동합니다.

이것이 많은 AI 앱 빌더가 기본값으로 TypeScript를 쓰는 큰 이유입니다.

일상 속 비유

구역마다 라벨이 붙은 물류 창고를 생각해보세요. 각 구역에는 “팔레트 전용”, “냉장”, “최대 500kg” 같은 표지판이 있습니다. 배송이 도착하면 입구의 검사원이 물건과 표지판을 비교합니다. 냉동 생선이 건조식품 구역으로 향하면 입구에서 막히고, 일주일 뒤 악취가 날 때 발견되지 않습니다.

TypeScript가 바로 그 입구의 검사원입니다. 타입은 표지판이고, 검사는 물건, 즉 여러분의 코드가 사용되기 전에 이루어집니다. 그리고 모든 것이 제자리에 놓이면 표지판은 치워집니다. 실행되는 JavaScript에는 타입이 남아 있지 않습니다.

TypeScript의 작동 방식

1. .ts 또는 .tsx 파일을 작성합니다(여러분이든 AI든). 타입 라벨이 붙은 TypeScript입니다.
2. 타입 검사기가 코드를 읽고 불일치를 편집기나 빌드에서 오류로 보고합니다.
3. 빌드 단계가 타입을 제거해 일반 JavaScript를 만듭니다.
4. JavaScript가 브라우저나 서버(Node.js, Deno, Bun)에서 실행됩니다.

중요한 결과가 하나 있습니다. TypeScript는 여러분이 작성한 코드를 검사하지, 앱이 실행되는 동안 들어오는 데이터를 검사하지 않습니다. 외부 API가 예상치 못한 것을 돌려주면, 실행 시점 검증을 추가하지 않는 한 TypeScript는 이를 볼 수 없습니다.

실제 예시: 예약 폼

헤어 살롱 예약 앱을 만들고 있다고 가정해봅시다. 예약을 설명하는 타입은 다음과 같습니다:

type Booking = {
  id: number;
  customerEmail: string;
  service: "haircut" | "colour" | "blow-dry";
  startsAt: Date;
  price: number;
  notes?: string; // the ? means optional
};

그리고 보증금을 계산하는 함수는 다음과 같습니다:

function depositFor(booking: Booking): number {
  return booking.price * 0.2;
}

이제 TypeScript가 무엇을 잡아내는지 보세요.

철자가 틀린 필드.

depositFor({ id: 1, customerEmail: "lena@example.com", service: "haircut",
  startsAt: new Date(), prise: 40 });

TypeScript는 prise가 알려진 속성이 아니고, price가 빠졌다고 보고합니다. 일반 JavaScript에서는 조용히 NaN(숫자가 아님)이라는 보증금을 계산해버릴 것입니다.

잘못된 종류의 값.

const booking: Booking = { ...otherFields, price: "40" };

TypeScript는 숫자가 필요한 곳에 문자열을 쓸 수 없다고 보고합니다. 이것이 없으면 "40" * 0.2는 우연히 작동하지만, "40" + 5는 "405"가 되며, 이는 청구서에 나타나는 종류의 버그입니다.

존재하지 않는 서비스.

const booking: Booking = { ...otherFields, service: "perm" };

TypeScript는 "perm"이 허용된 서비스 중 하나가 아니라고 보고합니다. 나중에 살롱이 퍼머 서비스를 추가하면, 타입에 추가하고, TypeScript가 가격표, 폼, 캘린더 색상 등 업데이트가 필요한 모든 곳을 보여줍니다.

TypeScript가 잡지 못하는 것. 예약 폼이 브라우저에서 서버로 price: "40"을 보내면, 서버의 TypeScript는 실행 시점에 이를 볼 수 없습니다. 그래서 잘 만들어진 앱은 들어오는 데이터도 검증하며, 보통 검증 라이브러리로 형태를 확인하고 이를 올바른 Booking으로 변환합니다.

TypeScript와 JavaScript 비교

주요 용어 설명

흔한 실수와 오해

• “TypeScript를 쓰면 코드에 버그가 없다.” 데이터 형태의 불일치는 잡지만, 잘못된 로직은 잡지 못합니다. 보증금을 20% 대신 2%로 계산해도 타입 검사는 통과합니다.
• “타입이 나쁜 입력으로부터 나를 보호한다.” 타입은 실행 시점에 사라집니다. 사용자, 폼, API에서 오는 데이터는 검증해야 합니다.
• 어디에나 any 쓰기. AI가 막히면 오류를 가리려고 any나 // @ts-ignore에 손을 댈 수 있습니다. 이는 문제를 고치는 대신 숨기는 것입니다.
• 미리보기가 작동한다고 타입 오류를 무시하기. 일부 도구는 타입 오류가 있는 코드도 실행합니다. 그래도 오류는 언제 터질지 모르는 버그입니다.
• “TypeScript가 더 느리다.” 타입은 실행 전에 제거되므로, 실제로 실행되는 JavaScript는 본질적으로 같습니다.
• “큰 팀만 쓰는 것이다.” 혼자 만드는 사람도 이득을 봅니다. 특히 AI가 대부분의 편집을 할 때 그렇습니다.

AI 빌더에 요청할 내용

• “TypeScript를 strict 모드로 사용해줘.”
• “고객, 예약, 청구서처럼 주요 레코드에 대한 공용 타입을 정의하고, 프론트엔드와 백엔드 모두에서 사용해줘.”
• “오류를 피하려고 any나 @ts-ignore를 쓰지 마. 근본 문제를 고치고, 그것이 무엇이었는지 알려줘.”
• “들어오는 데이터는 타입뿐 아니라 서버에서도 검증해줘.”
• “완료했다고 말하기 전에 타입 검사기를 실행해 모든 오류를 고쳐줘.”
• “필드 이름을 바꾸면 TypeScript가 표시하는 모든 곳을 업데이트해줘.”
• “이 타입 오류를 평범한 말로 설명해줘.”

AI가 만든 결과물을 확인하는 방법은 AI가 생성한 코드를 검토하는 방법과 AI로 만든 앱의 디버깅 방법에서 보실 수 있습니다.

Mythex에서의 TypeScript

특별히 요청하지 않으면, Mythex는 새 프로젝트를 Vite + React + TypeScript + Tailwind로 시작합니다. 코드 편집기에는 언어 지원 기능이 포함되어 있습니다. TypeScript와 JavaScript를 포함한 여러 언어에 대해 자동 완성, 진단, 정의로 이동을 제공하므로, 타입 오류가 미리보기에서만이 아니라 코드에서도 보입니다. 편집기는 Free에서는 읽기 전용이고, Pro에서는 완전히 편집할 수 있습니다. 첫 프롬프트에서 다른 구성을 요청할 수 있으며, 기술 스택이 선택되는 방식을 설명하는 문서와, 편집기가 무엇을 보여주는지 다루는 코드 편집기 문서를 참고하세요.

자주 묻는 질문