2026-01-24

타입스크립트

TypeScript란?

JavaScript에 정적 타입 시스템을 추가한 언어

코드 작성 시점에 타입 오류를 미리 발견할 수 있도록 도와줌

• Microsoft에서 개발
• JavaScript의 상위 집합
• 컴파일 시 JavaScript로 변환됨

TypeScript를 사용하는 이유

JavaScript의 한계

• 타입이 런타임에만 결정됨
• 대규모 코드에서 오류 추적 어려움
• 협업 시 코드 의도 파악 어려움

TypeScript의 장점

• 컴파일 단계에서 에러 검출
• IDE 자동 완성·리팩토링 강화
• 코드 가독성·유지보수성 향상
• 대규모 프로젝트에 적합

TypeScript 동작 흐름

TypeScript 코드
→ 타입 체크
→ JavaScript로 컴파일
→ 브라우저 실행

타입은 개발 단계에서만 존재

핵심 타입 문법

기본 타입

letage: number = 20;
letname: string = "React";
letdone: boolean = true;

배열 & 튜플

letnums:number[] = [1,2];
lettuple: [string,number] = ["a",1];

any / unknown / void / never

leta: any;
letb: unknown;

객체 타입 & interface

interfaceUser {
id:number;
name:string;
}

• 객체 구조 정의
• 확장 가능

type vs interface

typeId = number | string;

• 객체는 interface,
• 조합 타입은 type (면접 답변용)

유니온 / 인터섹션

type A = string | number;
type B = A & { id: number };

제네릭

function identity<T>(value: T): T {
  return value;
}

• 타입 재사용
• 유연하지만 안전

타입 추론

let x = 10; // number로 추론

• 명시 안 해도 자동 추론
• 필요한 곳만 명시

함수 타입

functionadd(a:number,b:number):number {
return a + b;
}

TypeScript와 React

typeProps = {
title:string;
};

functionComponent({ title }: Props) {
return<h1>{title}</h1>;
}

• Props, state 타입 정의
• 런타임 에러 감소

참고자료

• https://develog-yeon.tistory.com/35
• https://inpa.tistory.com/entry/TS-%F0%9F%93%98-%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%ED%83%80%EC%9E%85-%EC%84%A0%EC%96%B8-%EC%A2%85%EB%A5%98-%F0%9F%92%AF-%EC%B4%9D%EC%A0%95%EB%A6%AC
• https://velog.io/@hoeun0723/Typescript%EB%9E%80-%EC%93%B0%EB%8A%94-%EC%9D%B4%EC%9C%A0-%EA%B0%9C%EB%B0%9C%ED%99%98%EA%B2%BD-%EC%84%A4%EC%A0%95-%ED%83%80%EC%9E%85-%EC%A0%95%EB%A6%AC
• https://velog.io/@sunujun/%EB%B2%88%EC%97%AD-TypeScript-%EB%A9%B4%EC%A0%91-%EC%A7%88%EB%AC%B8
• https://velog.io/@minbr0ther/%EB%B2%88%EC%97%AD-%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EB%A9%B4%EC%A0%91%EC%9D%B8%ED%84%B0%EB%B7%B0-%EC%A7%88%EB%AC%B8-%EC%8B%9C%EB%A6%AC%EC%A6%88-1