#100DaysOfCode 6일 차 — TypeScript 소개

발행: 3시간 전 (2026년 2월 7일 오전 06:05 GMT+9)

5 min read

Source: Dev.to

TypeScript란 정확히 무엇인가요?

TypeScript는 Microsoft에서 만든 JavaScript의 타입이 있는 상위 집합입니다. 일반 JavaScript 위에 정적 타입 검사를 추가하여, 코드가 실행되기 전에 오류를 잡을 수 있게 해줍니다.

일반 JavaScript로 컴파일됨
런타임 버그 방지에 도움
IntelliSense, 자동 제안, 컴파일 타임 피드백을 통해 개발자 경험 향상

JavaScript가 유연한 점토라면, TypeScript는 같은 점토이지만 엄격한 부모가 있어 괴물을 만들지 못하게 감시합니다.

이미 JavaScript가 있는데 왜 TypeScript를 사용해야 할까요?

JavaScript는 훌륭하지만 관대합니다. “그래, 네가 원하는 대로 해.”라는 식이죠. 오타, 잘못된 데이터 형태, 누락된 속성, 잘못된 함수 인자는 런타임에, 때로는 프로덕션 환경에서만 드러납니다.

TypeScript는 다음을 통해 도움을 줍니다:

개발 중 오류를 잡아줌
코드 문서화와 유지 보수를 쉽게 함
더 나은 도구 지원(자동 완성, 힌트, 리팩터링 안전성) 제공
대규모 팀이 혼란 없이 코드베이스를 확장하도록 지원

요약하면: TypeScript는 버그를 방지하고 생산성을 높여줍니다.

TypeScript 기본

1. 변수에 타입 지정하기

let username: string = "John";
let age: number = 25;
let isLoggedIn: boolean = true;

2. 배열에 타입 지정하기

let scores: number[] = [80, 90, 100];
let fruits: string[] = ["apple", "banana", "mango"];

또는 제네릭을 사용:

let ids: Array = [1, 2, 3];

3. 객체에 타입 지정하기

let user: { name: string; age: number } = {
  name: "Alice",
  age: 30
};

4. 유니온 타입

let status: "success" | "error" | "loading";
status = "success";

또는:

let id: number | string;
id = 101;
id = "ABC123";

5. 함수 타입

function greet(name: string): string {
  return `Hello, ${name}!`;
}

화살표 함수도 동일하게 사용합니다:

const add = (a: number, b: number): number => {
  return a + b;
};

6. Type vs Interface (기본)

type과 interface는 모두 객체 형태를 정의하지만, 중요한 차이점이 있습니다:

interface → 확장 가능, 객체 구조에 적합
type → 더 유연(유니온, 원시형, 튜플 등 결합 가능)

type 사용 예시:

type Car = {
  brand: string;
  year: number;
};

let myCar: Car = { brand: "Toyota", year: 2022 };

interface 사용 예시:

interface Person {
  name: string;
  age: number;
}

const employee: Person = { name: "Sara", age: 28 };

👉 객체에는 interface를, 유니온에는 type을 사용하면 되지만 두 방법 모두 잘 작동합니다.

React에서 TypeScript 사용하기

1. React Props에 타입 지정하기

type ButtonProps = {
  label: string;
  disabled?: boolean; // optional
};

const Button: React.FC = ({ label, disabled }) => {
  return {label};
};

label은 반드시 문자열이어야 함
disabled는 선택 사항이며 제공될 경우 boolean이어야 함

2. React 타입 추론

TypeScript는 사용 방식에 따라 자동으로 타입을 추론합니다:

const counter = 0; // number 로 추론

const handleClick = () => {
  console.log("Clicked!");
}; // () => void 로 추론

React 훅도 타입을 추론합니다:

function Counter() {
  const [value, setValue] = React.useState(0); // value: number, setValue는 number를 기대

  return (
    <button onClick={() => setValue(value + 1)}>
      Count: {value}
    </button>
  );
}

상태가 복잡하지 않은 경우 직접 타입을 지정할 필요가 없습니다.

마무리 생각

TypeScript를 처음 배우면 위압감을 느낄 수 있지만, 변수, 타입, 함수, 배열, 객체, 유니온, React Props와 같은 기본 개념을 이해하면 모든 것이 깔끔하고 예측 가능해집니다. 처음엔 장황하게 느껴질 수 있지만, 실제로는 여러분을 안내하고 보호해 주며, 확장 가능하고 버그 없는 앱을 만들도록 도와줍니다.

Day 6이 공식적으로 완료되었습니다 — 다음은 Day 7!