TypeScript란 무엇인가: JavaScript와 차이 정리

JavaScript는 동적 타입 언어입니다

let value = 10;


value = 'hello';

JavaScript에서는 변수에 다른 타입의 값을 다시 넣을 수 있습니다.

함수도 호출 전에 인수 타입을 검사하지 않습니다.

function add(a, b) {
  return a + b;
}


add(1, 2);
add('1', 2);

두 호출 모두 실행됩니다.

TypeScript는 정적 타입 검사를 추가합니다

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

다음 호출은 타입 오류입니다.

add('1', 2);

실행 전에 “첫 번째 인수는 number여야 한다”는 계약을 확인할 수 있습니다.

TypeScript는 JavaScript의 superset입니다

대부분의 올바른 JavaScript 문법은 TypeScript에서도 사용할 수 있습니다.

여기에 다음 문법이 추가됩니다.

type User = {
  id: string;
  name: string;
};


function getName(
  user: User,
): string {
  return user.name;
}

type 선언은 타입 검사에 사용되고 runtime JavaScript에는 남지 않습니다.

컴파일 시점과 runtime

TypeScript가 검사할 수 있는 것:

잘못된 property 이름
잘못된 함수 인수
null 가능성
반환 타입 불일치
union 처리 누락

runtime에서만 알 수 있는 것:

API 서버가 500 반환
사용자가 잘못된 JSON 입력
localStorage 내용이 예상과 다름
네트워크 연결 끊김
DOM이 실제로 존재하지 않음

TypeScript가 있다고 runtime 오류가 모두 사라지는 것은 아닙니다.

타입 추론

TypeScript는 많은 타입을 자동으로 추론합니다.

const title = '공부하기';

이 const 변수 자체는 ‘공부하기’ 문자열 리터럴 타입으로 추론됩니다. 객체의 변경 가능한 문자열 프로퍼티는 보통 string으로 넓어집니다.

const task = {
  id: '1',
  title: '공부하기',
  completed: false,
};

각 property 타입도 추론됩니다.

모든 변수에 타입을 반복 작성할 필요는 없습니다.

타입을 명시할 가치가 높은 위치

다음 경계는 명시적 타입이 유용합니다.

함수 매개변수

function deleteTask(
  id: string,
) {
  ...
}

공개 반환 타입

function getTasks(): Task[] {
  ...
}

도메인 객체

type Task = {
  id: string;
  title: string;
  completed: boolean;
};

외부 데이터 경계

외부 데이터는 unknown으로 받은 뒤 검증하는 구조가 좋습니다.

오류 예제

type Task = {
  id: string;
  completed: boolean;
};


const task: Task = {
  id: '1',
  completed: false,
};


console.log(task.complete);

complete property는 존재하지 않기 때문에 TypeScript가 오류를 표시합니다.

JavaScript에서는 실행 후 undefined가 나올 수 있는 문제를 미리 찾은 것입니다.

TypeScript가 타입을 강제로 바꾸지는 않습니다

다음 코드는 runtime 값을 number로 변환하지 않습니다.

const value =
  '10' as unknown as number;

Type assertion은 컴파일러에게 타입 정보를 강제로 알려주는 문법이지 실제 값을 변환하는 함수가 아닙니다.

실제 변환:

const value =
  Number('10');

타입과 runtime 값을 구분합니다.

자주 하는 오해

TypeScript면 버그가 없어집니다

아닙니다.

비즈니스 로직 오류와 runtime 데이터 오류는 여전히 발생할 수 있습니다.

타입을 많이 쓰면 더 좋은 코드입니다

중요한 것은 타입 수가 아니라 실제 계약을 정확하게 표현하는 것입니다.

as를 쓰면 값이 변환됩니다

as는 runtime 변환이 아닙니다.

학습 완료 체크리스트

Number("abc")도 타입 검사는 통과하는데 결과가 NaN인 이유를 설명해 보세요. 타입 단언, 실제 변환, 외부 데이터의 구조 검증을 같은 동작으로 취급하지 않아야 합니다.