위키원
타입스크립트
타입스크립트(TypeScript)는 자바스크립트의 슈퍼셋인 오픈소스 프로그래밍 언어로, 2012년 10월에 처음 공개되었다. 마이크로소프트에서 개발, 유지하고 있으며 엄격한 문법을 지원한다. C#의 리드 아키텍트이자 델파이, 터보 파스칼의 창시자인 아네르스 하일스베르(Anders Hejlsberg)가 개발에 참여한다. 클라이언트 사이드와 서버 사이드를 위한, 프론트백 통합 개발에 사용할 수 있다.
타입스크립트는 자바스크립트 엔진을 사용하면서 커다란 애플리케이션을 개발할 수 있게 설계된 언어이다. 자바스크립트의 슈퍼셋이기 때문에 자바스크립트로 작성된 프로그램이 타입스크립트 프로그램으로도 동작한다.
타입스크립트에서 자신이 원하는 타입을 정의하고 프로그래밍을 하면 자바스크립트로 컴파일되어 실행할 수 있다.
타입스크립트는 모든 운영 체제, 모든 브라우저, 모든 호스트에서 사용 가능한 오픈 소스이다.
목차
개요[편집]
마이크로소프트에서 구현한 JavaScript의 슈퍼셋(Superset) 프로그래밍 언어. 절대적이지는 않으나 확장자로는 .ts, .tsx를 사용하며, 컴파일의 결과물로 JavaScript 코드를 출력한다. 최종적으로 런타임에서는 이렇게 출력된 JavaScript 코드를 구동시키게 된다.
2025년 초부터, 마이크로소프트에서 기존 자바스크립트 기반 TypeScript를 대체하는 Go 기반의 새로운 TypeScript 컴파일러를 개발하고 있는데, 2025년 4월 기준 아직 완성되지 않았음에도 기존의 tsc보다 최대 10배 빠른 속도로 컴파일이 가능하다. 완성되면 TypeScript 7.0 버전으로 출시된다고 하며, 기존의 자바스크립트 기반 버전은 6.x 버전으로 계속 유지된다고 한다. 리드 아키텍트인 Anders Hejlsberg가 개발을 주도한 C#도, 네이티브 언어인 Rust도 아닌 경쟁사가 주도하는 Go 언어가 채택되었다는 점에서 놀랍다는 반응이 많은데 C#이 아닌 Go가 채택된 것은 원래의 자바스크립트 베이스에서 큰 변경 없이 최대한 호환되게 설계하기 위함이었다고 해설하고 있다. 왜 Go인가?
TypeScript라는 이름답게 정적 타입을 명시할 수 있다는 것이 순수한 자바스크립트와의 가장 큰 차이점이다. 덕분에 개발 도구(IDE나 컴파일러 등)에게 개발자가 의도한 변수나 함수 등의 목적을 더욱 명확하게 전달할 수 있고, 그렇게 전달된 정보를 기반으로 코드 자동 완성이나 잘못된 변수/함수 사용에 대한 에러 알림[2] 같은 풍부한 피드백을 받을 수 있게 되므로 순수 자바스크립트에 비해 어마어마한 생산성 향상을 꾀할 수 있다. 즉, '자바스크립트를 실제로 사용하기 전에 있을만한 타입 에러들을 미리 잡는 것'이 타입스크립트의 사용 목적이다.
개발자와 도구 간의 상호 작용에서뿐만 아니라 개발자 간의 상호 작용에서도 상당한 이점이 있는데, API를 구현하고 사용함에 있어 해당 API의 인풋과 아웃풋이 무엇인지 명확하게 표현할 수 있으므로, API 하나 쓰는 데에도 일일이 매뉴얼을 찾아봐야 하거나 심하면 해당 API의 코드까지 뒤적거려 봐야 하는 자바스크립트에 비해 효율적이다.
델파이와 C#의 개발을 주도한 Anders Hejlsberg가 개발에 참여하고 있다. 이 때문인지 일부 기능이나 문법은 C#와 유사하다.
역사[편집]
- 2010년: 마이크로소프트 내부 프로젝트로 시작 (Anders Hejlsberg 주도)
- 2012년 10월: 타입스크립트 0.8 버전 공개
- 2013년: 타입스크립트 0.9 버전 출시 (제네릭 지원 추가)
- 2014년: 타입스크립트 1.0 버전 출시
- 2016년: DefinitelyTyped 프로젝트 통합 (@types 시스템 도입)
- 2017년: 타입스크립트 2.3 출시 (기본 타입 매개변수 지원)
- 2018년: 타입스크립트 3.0 출시 (튜플 타입 개선, 프로젝트 레퍼런스 도입)
- 2020년: 타입스크립트 4.0 출시 (가변 튜플 타입, 레이블드 튜플 요소)
- 2022년: 타입스크립트 4.9 출시 (satisfies 연산자 추가)
- 2023년: 타입스크립트 5.0 출시 (데코레이터 표준 준수, 성능 개선)
언어 특징[편집]
- 1. 정적 타입 시스템
타입스크립트의 가장 큰 특징으로, 컴파일 타임에 타입 검사를 수행합니다.
function add(a: number, b: number): number {
return a + b;
}
- 2. JavaScript 상위 집합
모든 JavaScript 코드는 유효한 TypeScript 코드입니다. 점진적으로 타입을 추가할 수 있습니다.
- 3. 타입 추론
명시적 타입 선언이 없어도 타입을 추론합니다.
let x = 10; // x는 number 타입으로 추론
- 4. 인터페이스와 클래스
객체 지향 프로그래밍 패러다임을 지원합니다.
interface Person {
name: string;
age: number;
}
class Student implements Person {
constructor(public name: string, public age: number, public grade: string) {}
}
- 5. 제네릭
재사용 가능한 컴포넌트를 만들 수 있게 해줍니다.
function identity<T>(arg: T): T {
return arg;
}
- 6. 데코레이터 (실험적 기능)
클래스, 메서드, 프로퍼티 등에 메타프로그래밍 기능을 추가합니다.
function sealed(constructor: Function) {
Object.seal(constructor);
Object.seal(constructor.prototype);
}
@sealed
class Greeter {
greeting: string;
constructor(message: string) {
this.greeting = message;
}
}
- 7. 모듈 시스템
ES 모듈 및 CommonJS 모듈 시스템을 지원합니다.
import { Component } from 'react';
export default class MyComponent extends Component {}
기본 문법[편집]
- 타입 선언
// 기본 타입
let isDone: boolean = false;
let decimal: number = 6;
let color: string = "blue";
// 배열
let list: number[] = [1, 2, 3];
let genericList: Array<number> = [1, 2, 3]; // 제네릭 배열 타입
// 튜플
let tuple: [string, number] = ["hello", 10];
// 열거형 (enum)
enum Color {Red, Green, Blue}
let c: Color = Color.Green;
// any (타입 검사 없음)
let notSure: any = 4;
notSure = "maybe a string instead";
// void (반환 값이 없는 함수)
function warnUser(): void {
console.log("This is a warning message");
}
// null과 undefined
let u: undefined = undefined;
let n: null = null;
// never (절대 발생하지 않는 값의 타입)
function error(message: string): never {
throw new Error(message);
}
- 배열과 뉴플
let numbers: number[] = [1, 2, 3]; let tuple: [string, number] = ['Age', 30];
- 인터페이스
interface LabelledValue {
label: string;
size?: number; // 선택적 프로퍼티
readonly id: number; // 읽기 전용 프로퍼티
[propName: string]: any; // 인덱스 시그니처
}
function printLabel(labelledObj: LabelledValue) {
console.log(labelledObj.label);
}
let myObj = {size: 10, label: "Size 10 Object", id: 1};
printLabel(myObj);
- 클래스
class Animal {
private name: string;
constructor(theName: string) { this.name = theName; }
move(distanceInMeters: number = 0) {
console.log(`${this.name} moved ${distanceInMeters}m.`);
}
}
class Snake extends Animal {
constructor(name: string) { super(name); }
move(distanceInMeters = 5) {
console.log("Slithering...");
super.move(distanceInMeters);
}
}
let sam = new Snake("Sammy the Python");
sam.move();
- 함수 선언
function greet(name: string): string {
return `Hello, ${name}!`;
}
- 제네릭
class GenericNumber<T> {
zeroValue: T;
add: (x: T, y: T) => T;
}
let myGenericNumber = new GenericNumber<number>();
myGenericNumber.zeroValue = 0;
myGenericNumber.add = function(x, y) { return x + y; };
- 타입 유틸리티
typescript
interface Todo {
title: string;
description: string;
}
type PartialTodo = Partial<Todo>;
- 타입 추론
타입스크립트는 변수의 초기값을 기반으로 타입을 자동으로 추론한다.
let message = 'Hello'; // string으로 추론됨
- 타입 가드
function isString(value: unknown): value is string {
return typeof value === 'string';
}
타입스크립트 컴파일러[편집]
타입스크립트 코드는 tsc 컴파일러를 통해 JavaScript로 변환됩니다.
- 컴파일 방법
1.전역 설치 후 사용:
npm install -g typescript tsc hello.ts
2.프로젝트 로컬 설치 후 사용:
npm install --save-dev typescript npx tsc hello.ts
- tsconfig.json
컴파일 옵션을 설정하는 구성 파일이다.
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"strict": true,
"esModuleInterop": true,
"outDir": "./dist"
},
"include": ["src/**/*"],
"exclude": ["node_modules"]
}
주요 컴파일러 옵션[편집]
- --strict: 모든 엄격한 타입 검사 옵션을 활성화
- --noImplicitAny: 암시적 any 타입을 허용하지 않음
- --strictNullChecks: null과 undefined를 명시적으로 처리
- --module: 모듈 시스템 지정 (commonjs, es2015 등)
- --target: 컴파일할 ECMAScript 버전 지정
- --outDir: 출력 디렉토리 지정
- --watch: 파일 변경 감지 모드
사용 사례[편집]
백엔드와 프론트엔드 통합[편집]
타입스크립트는 Node.js 런타임뿐만 아니라 원래 자바스크립트의 고향인 프론트엔드 개발에서도 상당히 유용하다. 특히 프론트엔드와 백엔드를 모두 TypeScript로 구현한다면 종전과는 비교할 수 없을 정도로 높은 개발 안정성과 편의성을 확보할 수 있다. 프론트엔드-백엔드 상호 간 데이터 통신을 위해서는 일반적으로 JSON 형식의 REST API를 구현하게 되는데, [8] 이렇게 사용되는 데이터 포맷은 개발 과정 중에 수없이 변경되고 또 변경되기 마련이다. 이로 인해 프론트엔드와 백엔드 개발자 사이에서는 수도 없이 커뮤니케이션 로스가 발생하고 이는 고스란히 개발자의 피로도 상승 및 개발 기간 증가, 유지 보수성의 저하로 이어진다. 심지어 프론트엔드와 백엔드를 같은 사람이 개발해도 한쪽에 변경 사항이 있다는 걸 까먹고 반대쪽에 이를 반영하지 않는 케이스가 결코 드물지 않다.
게다가 이러한 문제점은 실제로 코드를 동작시키지 전까지는 알아채기 어려운 경우도 많기 때문에 최악의 경우 검증되지 않은 버그가 남은 채 프로젝트를 퍼블리시하게 될 수도 있다. TypeScript가 이러한 사태를 미연에 방지할 수 있는 이유는, 프론트엔드와 백엔드 간의 데이터 포맷을 타입으로 정의하여, 이를 양측에서 공통으로 참조하도록 구현하고.[9] 데이터 포맷의 변경 사항이 발생할 경우 이렇게 공용화된 타입의 정의부를 수정함에 따라 프론트엔드와 백엔드 코드에 컴파일 에러를 발생시킴으로써 데이터 포맷의 통일을 강제하기 때문이다. 가령 User라는 타입의 id라는 필드를 name으로 수정한다고 할 때, 기존의 user.id를 참조하고 있던 프론트엔드와 백엔드의 코드들은 컴파일 에러를 발생시키고 개발자는 데이터 포맷의 변경에 따라 어떤 코드들이 수정되어야 하는지를 쉽게 파악할 수 있다. IDE의 리팩토링 기능을 활용하면 연관된 모든 코드들을 자동 수정해 주기까지 하므로 일일이 고칠 필요조차 없는 경지에 이른다.
물론 백엔드 개발자들은, 타입스크립트 사용 이전에 프론트엔드 개발자에게 올바른 API를 제공하기 위해서는 Swagger등의 API문서의 작성이 선행되는 게 권장되긴 하겠으나, IDE에서 제공하는 자동 완성이나 API 에러 알림 등의 피드백 덕분에 문서 참조의 필요성을 줄일 수 있다는 것 자체가 상당한 장점이다.
프론트엔드[편집]
물론 프론트엔드에서도 단독으로 사용이 가능하다. 바닐라 자바스크립트로 컴파일되는 것은 당연하거니와, Google의 Angular 프레임워크는 2.0부터 아예 타입스크립트로만 작성되도록 바뀌었다. Facebook의 리액트는 React.js와 React Native를 가리지 않고 타입스크립트 사용이 가능하다. 현재는 JavaScript와 TypeScript 진영 간의 교류도 굉장히 활발하고, DefinitelyTyped 등의 기여로부터 React에서 TypeScript를 사용하는 것은 정석 중의 하나로 자리 잡았다. React의 경우는 특히나 Function Component, Hooks와 함께 타입스크립트를 사용한다면 이전에 클래스 컴포넌트를 사용할 때보다 훨씬 쉽게 개발이 가능하다.
자바스크립트와의 차이점[편집]
항목 JavaScript (JS) TypeScript (TS) 정의 동적 타입의 스크립트 언어 정적 타입을 지원하는 JS의 상위 집합 (Superset) 타입 시스템 없음 (동적 타입) 존재 (정적 타입, 컴파일 시 검사) 컴파일 인터프리터 언어 (브라우저/Node.js에서 실행) .ts → .js로 트랜스파일 필요 학습 곡선 비교적 낮음 JS 기반이지만, 타입 시스템 이해 필요 도구 지원 기본적인 에디터 지원 풍부한 자동완성, 리팩토링, IDE 지원 런타임 직접 실행 (브라우저, Node.js) 트랜스파일 후 JS로 실행 유지보수 규모가 커질수록 복잡도 증가 대규모 프로젝트에서 안정성 향상 커뮤니티 및 생태계 매우 넓음, 방대한 라이브러리 대부분 JS 라이브러리를 그대로 사용 가능, TS 지원 라이브러리 증가 중 주요 사용처 빠른 프로토타이핑, 소규모 프로젝트, 웹 기본 스크립트 기업용 애플리케이션, 대규모 프로젝트, 협업이 중요한 코드베이스
- TypeScript 는 JavaScript를 기반으로 한 개발자 친화적인 언어로, 규모가 큰 프로젝트일수록 코드 품질과 협업 생산성을 높여준다.
- 초기 러닝커브가 약간 있지만, IDE 지원 + 타입 안정성 덕분에 장기적으로는 생산성이 더 좋아진다.
- 결국 TS는 JS를 대체하는 게 아니라, 강화하는 도구이다.
특장점[편집]
기존 자바스크립트 소스와의 호환[편집]
타입스크립트를 사용할 때, 타입스크립트가 런타임에서 그대로 돌아가는 경우는 드물다. 개요에 서술하였듯 타입스크립트는 컴파일을 통해 자바스크립트로 변환되는 것이 일단 첫 번째 목적인데, 그렇기 때문에 기존의 자바스크립트와 함께 사용하는 것이 가능하며, 자바스크립트 런타임은 그 컴파일된 자바스크립트를 기존의 자바스크립트 파일과 실행 가능하게 되는 것이다. 기존의 자바스크립트 프로그래머들은 타입스크립트를 도입할 때, 처음 고려해 봐야 할 것이 '*.d.ts' 파일 작성이다. 클래스, 클래스, 또는 어떤 자바스크립트 객체이든지 타입스크립트로 정의 가능한데, 기존의 자바스크립트 소스를 일절 건드리지 않고 *.d.ts 파일 작성만으로 타입스크립트 도입에 큰 도움을 줄 수 있다. DefinitelyTyped 레포지토리에서 다운받는 @types/<패키지이름> 패키지가 그것이다. 이 레포지토리는 기존 자바스크립트 npm 패키지들이 기존 소스를 건드리지 않고 타입스크립트 진영에 자연스럽게 녹아들 수 있도록 도움을 주었다. Javascript 언어 차원에서 지원하는 API들의 입출력 타입들도 친절하게 정의돼 있기 때문에 이를 더 안정적으로 사용할 수 있게 되기도 한다.
또한 타입스크립트는 const, let 같은 es2015 이상의 버전에서 사용되는 구문을 지원하는데, 이걸 컴파일을 시키게 되면 es3 버전으로 컴파일을 시켜줘서 IE 구버전에서도 작동할 수 있게 해준다! 즉, 상위 버전의 자바스크립트 구문을 사용하고도 IE 구버전을 지원할 수 있다.
다른 언어와의 문법 유사성[편집]
애초에 자바스크립트가 C, C++, 자바나 C# 같은 언어들처럼 (), {}, ; 등을 사용하는 C-family 언어이기 때문에 문법적으로 유사함을 내세우는 타입스크립트 역시 C-family인데, 그 정도가 특히 더 가까워져서, 예를 들면 Generic에 <> 기호를 쓴다. 타입스크립트가 자바, C#, C++와는 본질적으로 비슷하지도 않지만, 타입스크립트를 처음 입문하는 기존 개발자들은 '어! 저거 제네릭이네!'라고 빠르게 이해할 수 있을 것이다. 거기에 interface, const 같은 지시문 역시 기존 언어 사용자들이 익숙하다고 느낄만한 사용 방법을 갖고 있다.
IDE와의 궁합[편집]
타입 개념의 도입을 통해 TypeScript 개발을 지원하는 IDE로부터 풍부한 피드백을 받을 수 있다. 일반적인 여느 정적 타입 언어들처럼 자동 완성을 지원하거나, 해당 타입이 지원하지 않는 연산의 시도나 잘못된 인자를 사용한 함수 호출 등을 코딩 중에 즉석에서 검출할 수 있는 것은 기본. 심볼의 이름을 변경하면 해당 심볼을 참조하는 모든 코드들을 자동으로 수정해 주는 리팩토링 기능 역시 JavaScript가 아닌 TypeScript이기 때문에 지원될 수 있는 기능이다. 대표적인 IDE로는 JetBrains의 WebStorm이 있으며 IntelliJ IDEA도 얼티밋 에디션을 구입하면 웹 개발 기능을 사용할 수 있다.
특히 Microsoft에서 만든 언어답게, 같은 회사에서 만든 Visual Studio Code(이하 VSC)와의 궁합이 엄청나다. IDE는 아니지만, 각종 플러그인을 통해 TypeScript로 상상할 수 있는 모든 개발 환경을 너무나 쉽게 구축 가능하다. VSC나 그 플러그인 역시 대부분 TypeScript로 개발되고 있기 때문에 당연하다면 당연한 결과.
과감한 신규 문법 도입[편집]
Node.js를 포함해서 기존 자바스크립트 생태계에는 언어의 버전이 올라가도 어느 정도 하위 호환성을 위해 빠르게 새로운 문법을 추가하거나 기존 문법을 변경하지 못한다. babel과 같은 트랜스파일러를 통해 ES6+ 문법을 ES5 문법으로 컴파일해서 사용하는 등 호환성 문제를 해결하기 위한 여러 노력들은 있었으나, 마음대로 트랜스파일 환경을 구성하는 건 쉬운 일이 아니고, 자바스크립트 문법이 아무리 급진적으로 발전하고 있다 하더라도 신규 문법이 제안되어서 거절되는 경우도 많고, 채용이 결정되더라도 실제로 사용이 가능하는데까지 여러 절차를 거치며 최소 1~2년은 걸린다.
반면 타입스크립트는 마이크로소프트라는 거대 테크 기업이 주도적으로 언어의 발전을 돕고 있으며, 어차피 사용하려면 컴파일 과정을 거쳐야 하며 이 과정에서 하위 호환성을 따지는 게 약간 무의미해지기 때문에 제안 단계에 있던 유력한 신규 문법들을 ECMA보다도 더 빠르게 채용하고 있다.
ECMA 에서 반려되어 자바스크립트에선 채용될 가능성이 사라진 몇 가지 문법들 중에 타입스크립트 개발자들이 보기에 유용하다고 생각된 문법들도 일부 채용했는데 대표적으로 데코레이터와 추상 클래스 등이 있다. 이런 문법들은 엔터프라이즈급 프로젝트를 개발해야 할수록 유용한 것들이었고, 기업에서 프론트엔드 개발 또는 Node.js 기반 백엔드 개발 시 타입스크립트 사용을 적극적으로 고려하게 되는 큰 이유가 되었다.
npm 사용[편집]
뿌리가 자바스크립트인 만큼 Node.js의 npm 패키지들을 손쉽게 사용할 수 있으며, 타입스크립트 컴파일러 자체가 npm 패키지이기도 하다. npm install typescript로 설치 가능하다.
동영상[편집]
참고자료[편집]
- 타입스크립트 공식 홈페이지 - https://www.typescriptlang.org/
- "TypeScript", 《나무위키》
- 〈타입스크립트〉, 《위키백과》
같이 보기[편집]
이 문서는 로고 수정이 필요합니다.
