타입 스크립트 (TypeScript)
이미지 출처: medium.com/humanscape-tech
📌 TypeScript란?
TypeScript는 Microsoft에서 개발한 오픈 소스 프로그래밍 언어로, JavaScript의 슈퍼셋 즉, 상위 집합(superset)이다. TypeScript는 JavaScript 코드에 정적 타입(static type)을 추가하여 코드의 안전성과 유지보수성을 높이는 것을 목표로 하고 있다. 타입 시스템을 통해 개발자는 컴파일 단계에서 많은 오류를 발견할 수 있으며, 이는 특히 대규모 애플리케이션 개발에서 매우 유용하다.
🚨 이번 포스트에서는 타입 스크립트에 대해서 자세하게 알아보고, 사용법과 기능들에 대한 자세한 내용은 다음 포스트에서 자세하게 다룰 예정이다.
📌 TypeScript와 JavaScript의 비교
TypeScript와 JavaScript는 서로 밀접하게 관련된 언어지만, 중요한 차이점이 존재한다. JavaScript는 동적 타입(dynamic typing) 언어인 반면, TypeScript는 정적 타입(static typing) 언어이다. 이러한 차이점은 코드 작성 방식과 오류 처리 방식에서 큰 차이를 만든다.
💡 동적 타입 언어와 정적 타입 언어
JavaScript는 동적 타입 언어로, 변수의 타입이 런타임에 결정된다. 이는 유연성을 제공하지만, 잘못된 타입 사용으로 인해 예기치 않은 오류가 발생할 수 있다. 예를 들어, 문자열로 예상되는 변수에 숫자가 할당되는 경우 런타임 오류가 발생할 수 있다.
반면, TypeScript는 정적 타입 언어로, 변수의 타입이 컴파일 타임에 결정된다. 개발자는 변수, 함수의 인자, 반환값 등에 타입을 명시적으로 지정할 수 있으며, 컴파일러는 이 정보를 바탕으로 타입 검사를 수행한다. 이를 통해 잘못된 타입 사용으로 인한 오류를 컴파일 단계에서 미리 발견할 수 있다.
💡 컴파일러와 인터프리터
JavaScript는 인터프리터 언어로, 코드를 한 줄씩 해석하고 실행한다. 이는 빠른 실행을 가능하게 하지만, 코드에 오류가 있을 경우 런타임에서만 발견할 수 있다. 반면 TypeScript는 컴파일러를 사용하여 코드를 JavaScript로 변환한 후 실행된다. 컴파일러는 코드 전체를 분석하여 오류를 미리 감지할 수 있기 때문에, 더 안전한 코드 작성이 가능하다.
📌 왜 TypeScript를 사용해야 하는가?
TypeScript는 단순히 정적 타입을 제공하는 것 이상의 가치를 가지고 있다. TypeScript의 타입 시스템은 코드의 안정성을 높이고, 개발자가 더 신뢰할 수 있는 코드를 작성할 수 있도록 도와준다. 이는 프로젝트가 커질수록 발생할 수 있는 문제를 줄이고, 코드 리팩토링을 쉽게 만들어 주는 중요한 요소다.
💡 코드의 안정성 증가
JavaScript는 유연한 언어이지만, 이로 인해 변수의 타입이 예기치 않게 변하는 문제가 발생할 수 있다. 이러한 문제는 간단한 스크립트에서는 크게 문제되지 않을 수 있지만, 대규모 애플리케이션에서는 치명적인 오류를 일으킬 수 있다. TypeScript는 변수, 함수의 인자, 반환값 등에 타입을 명시적으로 지정하여 이러한 문제를 사전에 방지할 수 있다.
💡 개발자 경험 개선
TypeScript는 뛰어난 개발자 경험을 제공한다. 코드 작성 시점에 타입 정보를 통해 코드 자동 완성(intelliSense), 코드 탐색, 오류 검사 등이 가능하다. 이러한 기능은 개발 속도와 코드 품질을 동시에 향상시키며, 개발자가 코드의 의도를 명확히 이해하고 작업을 수행할 수 있게 돕는다.
💡 유지보수성 향상
프로젝트가 커질수록 코드의 유지보수는 점점 더 중요한 과제가 된다. TypeScript는 정적 타입 분석을 통해 코드의 의도를 명확히 하며, 코드 변경 시 발생할 수 있는 오류를 최소화한다. 특히, 대규모 팀에서 여러 개발자가 협업할 때, TypeScript는 코드의 일관성을 유지하고, 예기치 않은 오류를 방지하는 데 중요한 역할을 한다.
💡 자바스크립트의 주요 오류 예방
JavaScript에서 가장 많이 발생하는 오류 중 다수가 타입과 관련된 문제이다. Rollbar에서 발표한 자바스크립트에서 가장 많이 발생하는 오류 Top 10에 따르면, 타입 에러가 대부분을 차지하고 있다. 예를 들어, TypeError: Cannot read property of undefined와 같은 오류는 변수의 타입이 예상치 못한 값을 가질 때 발생한다. TypeScript는 이러한 오류를 컴파일 단계에서 방지할 수 있게 해준다. 이를 통해 개발자는 런타임에 발생할 수 있는 오류를 줄이고, 더 안전한 코드를 작성할 수 있다.
📌 TypeScript를 사용하지 않았을 때의 문제점
JavaScript는 그 유연성으로 인해 다양한 상황에서 빠르게 적용할 수 있는 장점을 지니고 있지만, 타입 시스템이 부재한 동적 언어이기 때문에 여러 문제점이 발생할 수 있다. 특히, 협업 시에 이러한 문제점은 더 심각하게 나타난다.
💡 타입 에러로 인한 문제
JavaScript는 변수에 할당된 값의 타입을 컴파일 타임에 검사하지 않기 때문에, 런타임에서 예기치 않은 타입 관련 오류가 발생할 가능성이 크다. 예를 들어, 함수가 문자열을 인자로 받을 것으로 예상했지만, 숫자가 전달되면 런타임에서 오류가 발생할 수 있다. 이는 특히 규모가 큰 프로젝트에서 치명적인 버그를 초래할 수 있다.
💡 협업 시 일관성 부족
여러 개발자가 협업하는 환경에서는 각자 코딩 스타일이 다를 수 있고, 동일한 변수에 대해 서로 다른 타입을 사용하려는 시도가 있을 수 있다. TypeScript가 없는 JavaScript 환경에서는 이러한 일관성 문제를 해결하기 어렵다. 이는 코드 리뷰 과정에서 혼란을 초래하고, 코드베이스의 유지보수를 복잡하게 만든다.
💡 코드 이해와 유지보수의 어려움
타입이 명시되지 않은 JavaScript 코드는 그 의도를 파악하기 어려울 수 있다. 변수나 함수의 반환값이 어떤 타입을 가지는지 명확하지 않기 때문에, 다른 개발자가 코드를 이해하고 수정하는 데에 많은 시간이 소요될 수 있다. 이는 특히 새로운 팀원이 합류하거나 코드 리팩토링이 필요할 때 문제가 된다.
📌 TypeScript의 활용 사례
💡 인기 있는 TypeScript 프로젝트
TypeScript는 많은 인기 있는 오픈 소스 프로젝트에서 사용되고 있다. 이러한 프로젝트들은 TypeScript의 장점을 최대한 활용하여 안전하고 유지보수하기 쉬운 코드를 작성하고 있다. 대표적인 프로젝트로는 다음과 같은 것들이 있다.
- Angular: Angular는 Google에서 개발한 프론트엔드 프레임워크로, TypeScript를 기본 언어로 채택하고 있다. Angular는 TypeScript의 강력한 타입 시스템을 활용하여 대규모 애플리케이션에서도 안정성을 보장한다.
- VSCode: Microsoft의 Visual Studio Code는 TypeScript로 개발된 텍스트 에디터이다. 이 프로젝트는 TypeScript의 모든 기능을 활용하여 개발되었으며, 대규모 코드베이스에서도 높은 안정성과 성능을 제공한다.
- NestJS: NestJS는 서버사이드 애플리케이션을 위한 프레임워크로, TypeScript를 기반으로 만들어졌다. NestJS는 타입 기반의 모듈화 시스템을 통해 복잡한 서버 애플리케이션을 쉽게 구축할 수 있게 해준다.
이 외에도 TypeScript는 많은 대규모 프로젝트에서 사용되고 있으며, 특히 코드의 안전성과 유지보수성을 중시하는 프로젝트에서 그 활용도가 높다.
📌 TypeScript를 사용할 때 고려해야 할 사항
- 타입 시스템 이해: TypeScript의 강력한 타입 시스템을 잘 이해하고 활용하면, 코드의 안정성과 유지보수성을 크게 향상시킬 수 있다. 그러나 무리하게 타입을 사용하면 코드가 복잡해질 수 있으므로, 상황에 맞게 적절히 사용해야 한다.
- 점진적 적용: 기존 JavaScript 프로젝트에 TypeScript를 도입할 때, 모든 코드를 한 번에 변환하기보다는 점진적으로 적용하는 것이 좋다. 이를 통해 발생할 수 있는 문제를 최소화하고, 개발자들이 새로운 시스템에 익숙해질 시간을 가질 수 있다.
- 도구 활용: TypeScript의 강력한 도구와 에코시스템을 적극 활용하는 것이 중요하다. 예를 들어, 타입 정의 파일(.d.ts)이나 VSCode와 같은 IDE의 타입스크립트 지원을 통해 개발 효율을 극대화할 수 있다.
📌 TypeScript의 기본 사용법과 기능
🚨 이번 포스트에서는 TypeScript의 기본적인 사용법과 주요 기능에 대해 간단히 짚고 넘어간다.
TypeScript는 JavaScript의 문법을 기반으로 하면서도, 정적 타입 시스템을 추가하여 코드의 안정성을 크게 향상시킨다.
💡 변수 선언과 타입 지정
TypeScript에서 변수에 타입을 명시적으로 지정하여, 런타임에서 발생할 수 있는 타입 관련 오류를 컴파일 단계에서 미리 방지할 수 있다.
let name: string = 'John';
let age: number = 30;💡 함수와 인터페이스
함수의 인자와 반환값에 타입을 지정하여, 코드의 의도를 명확히 하고 예상치 못한 타입 사용을 방지할 수 있다.
interface User {
name: string;
age: number;
}
function greet(user: User): string {
return `Hello, ${user.name}`;
}💡 제네릭과 유니온 타입
제네릭과 유니온 타입을 통해 다양한 타입을 처리할 수 있는 유연한 코드를 작성할 수 있다.
function identity<T>(arg: T): T {
return arg;
}
let result: string | number = identity("Hello");📌 TypeScript의 타입
🚨 이번 포스트에서는 TypeScript에서 자주 사용되는 몇 가지 주요 타입과 함께, 유틸리티 타입에 대해 간단히만 살펴본다.
TypeScript는 다양한 타입 시스템을 통해 코드의 안전성을 강화하고, 개발자가 의도한 바를 명확히 표현할 수 있도록 돕는다.
💡 기본 타입
TypeScript는 JavaScript의 기본 타입 외에도 여러 추가 타입을 제공한다.
let isDone: boolean = false;
let decimal: number = 6;
let color: string = "blue";💡 any와 unknown의 구분
any와 unknown은 모든 타입을 허용하지만, unknown은 더 안전하게 타입 검사를 할 수 있도록 추가적인 타입 체크를 요구한다.
💡 유틸리티 타입
TypeScript는 기존 타입을 변형하거나 특정 속성만을 추출하여 사용할 수 있도록 여러 유틸리티 타입을 제공한다. 이러한 유틸리티 타입들은 코드를 더 간결하고 유연하게 작성할 수 있도록 돕는다.
- Partial: 타입
T의 모든 속성을 선택적으로 만들어준다. - Readonly: 타입
T의 모든 속성을 읽기 전용으로 만들어준다. - Pick<T, K>: 타입
T에서 특정 속성K만을 선택하여 새로운 타입을 만든다. - Omit<T, K>: 타입
T에서 특정 속성K를 제거한 새로운 타입을 만든다.
이러한 유틸리티 타입들은 특히 대규모 프로젝트에서 코드의 재사용성과 가독성을 높이는 데 유용하다.
