타입스크립트란 무엇인가?
타입스크립트는 자바스크립트의 모든 기능을 포함하는 상위 집합의 언어이며, 정적 타입 시스템을 도입하여 모던 개발 환경에서 안정적이고 예측 가능한 코드를 작성할 수 있도록 돕는다.
1. 타입스크립트란?
타입스크립트는 자바스크립트에 정적 타입 시스템을 추가한 언어이다. 즉, 타입스크립트 = 자바스크립트 + 정적 타입 시스템이다.
정적 타입 시스템은 프로그램이 실행되기 전에 변수나 함수 등의 타입을 미리 확인하여 예상치 못한 오류를 줄여주는 역할을 한다.
팁: 정적 타입 시스템은 마치 요리하기 전에 레시피와 재료를 꼼꼼히 점검하는 것과 같다.
- 재료 정리하기: 필요한 변수와 함수의 타입을 미리 선언하는 것이다.
- 재료 검수하기: 실제 값이 올바른 타입인지 확인하는 것이다.
- 요리하기: 정해진 레시피(코드)를 따라 안전하게 실행하는 것이다.
2. 자바스크립트 vs 타입스크립트
| 특징 | 자바스크립트 | 타입스크립트 |
|---|---|---|
| 타입 시스템 | 동적 타입 | 정적 타입 |
| 컴파일 | 필요 없음 | 자바스크립트로 컴파일해야 한다 |
| 개발 경험 | 빠르고 유연하게 시작할 수 있다 | 코드 완성, 타입 검사 등으로 개발 경험이 향상된다 |
| 프로젝트 규모 | 소규모에 적합하다 | 대규모 프로젝트에 유리하다 |
| 오류 발견 시점 | 런타임에 발견될 수 있다 | 컴파일 타임에 미리 발견된다 |
타입스크립트는 컴파일 단계에서 코드를 분석하여 타입 오류를 미리 잡아내므로, 유지보수와 확장성 측면에서 큰 장점을 가진다.
3. 타입스크립트의 동작 원리
타입스크립트 컴파일러(tsc)는 다음과 같은 단계로 동작한다:
- 컴파일 시작:
tsc명령어를 실행하면,tsconfig.json설정에 따라 어떤 파일을 컴파일할지 결정된다. - 파일 로드: 모든 소스 파일과
import된 파일들을 로드한다. - 코드 분석: 코드를 파싱하여 AST(구문 트리)를 생성한다.
- 심볼 테이블 생성: 변수, 함수 등 프로그램 요소들의 관계를 정리하는 심볼 테이블을 생성한다.
- 자바스크립트로 변환: AST를 바탕으로 타입스크립트 코드를 자바스크립트 코드로 변환한다.
- 타입 검사: 타입 오류를 검출하고, 오류가 없을 경우 최종 자바스크립트 파일을 생성한다.
핵심: 컴파일 타임에 모든 코드가 분석되고, 오류가 없다면 100% 자바스크립트로 변환되어 런타임에는 일반 자바스크립트처럼 동작하게 된다.
4. 타입 선언과 추론
타입스크립트에서는 타입 어노테이션과 타입 추론 두 가지 방법으로 타입을 다룬다.
4.1 타입 어노테이션
개발자가 직접 변수나 함수의 타입을 명시하는 방법이다.
let name: string = 'Owen'; let age: number = 30;
function add(a: number, b: number): number {
return a + b;
}
4.2 타입 추론
타입스크립트 컴파일러가 코드의 문맥을 분석해 자동으로 타입을 결정하는 것이다.
const sum = add(1, 2); // sum의 타입은 number로 자동 추론된다.
주의: 모든 경우에 타입 추론이 완벽하지 않으므로, 특히 외부 데이터를 다루거나 복잡한 로직에서는 명시적 타입 어노테이션을 사용하는 것이 좋다.
5. 주요 타입과 선언 방법
타입스크립트에서는 기본 제공 타입뿐만 아니라, 개발자가 직접 인터페이스나 타입 별칭을 만들어 복잡한 데이터 구조를 표현할 수 있다.
기본 타입
- 불린:
boolean - 숫자:
number - 문자열:
string - null, undefined
배열과 튜플
let fruits: string[] = ['Apple', 'Banana', 'Mango'];
let tuple: [string, number] = ['Hello', 10];
객체
인터페이스: 확장이 가능한 객체 타입을 정의하는 것이다.
타입 별칭: 객체뿐 아니라 유니온, 튜플 등 복잡한 타입 표현에 유리하다.
interface User { name: string; age: number; }
type Profile = {
id: string;
name: string;
isMarried: boolean;
};
유니온과 인터섹션 타입
유니온 타입: string | number (A이거나 B이다)
인터섹션 타입: A & B (A이면서 동시에 B이다)
6. 인터페이스 vs 타입 별칭
두 방법은 매우 유사하지만, 차이점이 있다.
- 인터페이스: 객체의 형태를 정의하며, 동일 이름으로 여러 번 선언하여 확장할 수 있다.
- 타입 별칭: 보다 복잡한 타입(유니온, 튜플 등)을 표현할 수 있으나, 한 번 정의하면 확장이 불가능하다.
결론: 대부분의 경우 자유롭게 선택할 수 있으며, 객체의 확장이 필요한 경우 인터페이스를, 복잡한 타입 표현이 필요한 경우 타입 별칭을 사용하는 것이 좋다.
7. 결론
타입스크립트는 정적 타입 시스템을 통해 자바스크립트의 유연함과 안정성을 모두 갖춘 언어이다.
- 컴파일 타임 오류 검출: 사전에 오류를 잡아내어 안정적인 코드 작성이 가능하다.
- 코드 유지보수성: 명확한 타입 선언을 통해 대규모 프로젝트에서도 효율적으로 작업할 수 있다.
- 개발자 경험 개선: 코드 자동완성, 타입 체크 등의 도구 지원으로 개발 생산성이 향상된다.
타입스크립트의 개념과 동작 원리를 잘 이해하면, 초기 학습 곡선은 다소 높지만 프로젝트의 확장성과 유지보수에 큰 도움이 될 것이다.
