
타입스크립트는 자바스크립트에 정적 타입 시스템을 추가한 언어이다.
기존 자바스크립트 문법을 그대로 사용하면서,
데이터 타입을 명시적으로 선언할 수 있도록 확장된 언어라고 볼 수 있다.
자바스크립트는 동적 타입 언어이기 때문에 변수의 타입이 명확하게 정의되지 않아
코드 규모가 커질수록 오류가 발생하기 쉬운 구조를 가지고 있다.
타입스크립트는 이러한 문제를 해결하기 위해 정적 타입 검사(Type Checking) 기능을 제공한다.
타입스크립트는 자바스크립트의 상위 집합(Superset) 이다.
때문에 모든 자바스크립트의 코드는 타입스크립트는 코드로 실행 가능하다.
하지만 반대로 타입스크립트는 코드를 자바스크립트 환경에서 바로 실행할 수는 없다.
왜냐하면 브라우저는 타입스크립트는 직접 실행할 수 없기 때문이다.
타입스크립트는 실행 전에 컴파일 과정을 거친다.
TypeScript 코드 작성
↓
TypeScript 컴파일러
↓
JavaScript 코드 변환
↓
브라우저 실행
위 과정에서 보았듯, 브라우저는 자바스크립트 실행할 수 있기 때문에
타이스크립트는 반드시 자바스크립트로 변환(transpile) 된 후 실행된다.
타입스크립트에서는 변수나 함수의 데이터 타입을 다음과 같이 선언할 수 있다.
function plus(a: number, b: number): number { return a + b; }
위 예시에서 a: number와 b: number는 함수 매개변수의 타입을 의미한다.
이렇게 타입을 명시하면 잘못된 데이터 전달을 방지하고, 코드의 안정성을 높일 수 있다.
자바스크립트는 변수 타입을 선언하지 않기 때문에 다음과 같은 문제가 발생할 수 있다.
function plus(a, b){ return a + b; }
console.log(plus("3", "5"));
이 경우 문자열이 전달되어도 오류 없이 실행되며 예상과 다른 결과가 나올 수 있다.
타입 오류 발견이 어렵고, 코드 규모가 커질수록 관리가 어려워진다.
프로젝트 규모가 커질수록 아래와 같은 문제를 해결하기 위해 타입 기반 개발 방식이 필요하게 된다.
자바스크립트는 동적 타입 언어이기 때문에 변수에 어떤 타입이든 자유롭게 할당할 수 있다.
let myname = "lee";
myname = 1;
위와 같이 타입이 언제든 바뀔 수 있기 때문에,
실수로 잘못된 값이 들어가도 실행 전에는 오류를 알 수 없다.
자바 스크립트의 '타입이 보장되지 않는다'는 특징으로 인해
버그 발견이 늦어지며 규모가 커질수록 관리가 어려워진다.
타입스크립트는 변수에 데이터 타입을 명시하거나 추론하여
잘못된 타입을 컴파일 단계에서 차단함으로써 이러한 문제를 해결한다.
let myname: string = "lee";
myname = 1; // ❌ 에러 발생
타입스크립트는 변수 선언 시 값을 기반으로 자동으로 타입을 판단한다.
let age = 30;
위 코드에서 age는 자동으로 number 타입으로 추론된다.
별도 타입 선언 없이도 초기 값 기반으로 타입 결정하는 것이다.
하지만 타입 추론이란 특성이 항상 좋은 것은 아니다.
let data = 10; // number로 추론
예를 들어 복잡한 로직에서 변수 data의 타입이 바뀌거나 모호해질 수 있고,
여러명이 같이 개발하는 협업 코드에서는 명시적 타입 선언이 더 안전하다.
타입스크립트는 크게 3가지 타입을 제공한다.
number string boolean null undefinedobject array tupleany unknown타입스크립트에서의 튜플
서로 다른 데이터 타입의 배열
let tuple: [string, number] = ["lee", 30];