[TypeScript] 타입스크립트

Jeris·2023년 6월 7일

TypeScript

목록 보기

1/11

타입스크립트 소개

타입스크립트란 무엇인가?

타입스크립트(TypeScript)는 Microsoft에서 개발한 오픈 소스 프로그래밍 언어로, 2012년 10월에 공개되었습니다. Turbo Pascal, Delphi, C# 등의 핵심 개발자인 Anders Hejlsberg가 주도하여 개발된 이 언어는 기본적으로 자바스크립트에 정적 타입 기능을 추가한 것이라고 할 수 있습니다. 이러한 특성은 코드의 안정성을 높여주며, 오류를 줄이고 코드를 이해하고 유지 관리하기 쉽게 만드는 데 도움이 됩니다.

타입스크립트의 인기는 점점 높아지고 있습니다. 2022년 STATE OF JS 2022 설문 조사에 따르면, 자바스크립트 사용자들의 89%가 타입스크립트를 사용하고 있음을 보여줍니다.

// JavaScript
let a = 1;
let b = 2;
console.log(a+b);

// TypeScript
let a: number = 1;
let b: number = 2;
console.log(a+b);

타입스크립트에서는 변수 a와 b가 숫자 타입임을 명시적으로 선언하였습니다. 이는 개발 과정에서 오류를 줄이고, 코드를 더 명확하게 이해할 수 있게 돕습니다.

타입스크립트가 필요한 이유

JavaScript는 원래 웹 브라우저에서 동작하기 위해 개발된 언어로, 간단한 사용자 상호작용을 처리하기 위한 목적으로 설계되었습니다. 이러한 이유로 JavaScript는 엄격한 문법보다는 유연한 문법과 사용자의 자유로움에 초점을 맞추었으며, 이로 인해 버그 발생 가능성이 높았습니다.

그러나 Node.js라는 자바스크립트 런타임이 등장하면서 상황이 변했습니다. Node.js의 등장으로 웹 서버, 모바일 앱, 데스크탑 앱 등을 포함한 다양한 프로그램을 자바스크립트로 개발할 수 있게 되었습니다. 이에 따라, 복잡하고 큰 규모의 애플리케이션을 개발하는 경우 자바스크립트의 비엄격성이 문제로 부상하게 되었습니다.

타입스크립트는 이러한 문제를 해결하기 위해 만들어졌습니다. 복잡한 대규모 프로그램에서 버그 발생 가능성을 줄이기 위한 안전 장치로써 타입 시스템을 추가하였고, 이로써 엄격한 문법을 가진 JavaScript의 상위 집합으로 작동하게 되었습니다. 이렇게 타입스크립트를 통해 개발자들은 안정성과 가독성, 유지보수성이 향상된 프로그래밍 환경을 얻게 되었습니다.

JavaScript의 한계와 TypeScript의 이점

타입 시스템

프로그래밍 언어에는 필수적으로 타입 시스템이 존재합니다. 타입 시스템은 값들을 분류하여 타입을 정의하고, 코드의 타입 검사 시기와 방법에 대한 규칙을 제공하는 체계입니다.

타입 시스템은 크게 정적 타입 시스템과 동적 타입 시스템으로 나눌 수 있습니다. 정적 타입 시스템에서는 코드 실행 전에 모든 변수의 타입이 고정적으로 결정됩니다. 이에 해당하는 언어로는 C, Java 등이 있습니다. 반면, 동적 타입 시스템에서는 코드가 실행될 때 변수의 타입이 결정되며, Python과 JavaScript가 이에 해당합니다.

// JavaScript의 예시
let a = "hello"; // 변수 a의 타입은 string
a = 19970107; // 변수 a의 타입이 number로 바뀜

a.toUpperCase(); // 타입 에러 발생. Number 타입에는 toUpperCase 메서드가 없음.

위와 같이 동적 타입 시스템에서는 코드의 오류가 실행 시점에 발견되는 단점이 있습니다.

// Java의 예시
String a = "hello";
int b = 123;

int c = a * b; // 컴파일 에러 발생. 문자열과 숫자는 곱셈 연산을 할 수 없음.

반면에 정적 타입 시스템에서는 변수에 타입을 명시적으로 지정해야 하므로 초기 개발 생산성이 저하될 수 있다는 단점이 있습니다.

이러한 문제를 해결하기 위해 TypeScript는 JavaScript의 동적 타입 시스템의 자유로움을 유지하면서도 선택적으로 타입을 지정하여 컴파일 시점에 오류를 잡아내는 기능을 제공합니다. 이를 통해 개발자는 런타임 오류의 가능성을 줄이고 안정성 있는 코드를 작성할 수 있습니다.

TypeScript의 이점

// TypeScript
let a: number = 1;

a.toUpperCase(); // 컴파일 시점에 에러 발생

타입스크립트는 코드가 실행되기 전에 타입 오류를 잡아내는 정적 타입 시스템의 장점을 갖추고 있습니다. 그러나 모든 변수에 타입을 명시적으로 지정해야 하는 정적 타입 시스템의 부담을 갖지 않습니다.

// TypeScript
let a = 1;

a.toUpperCase(); // 컴파일 시점에 에러 발생

이처럼 타입스크립트는 점진적 타입 시스템(Gradual Type System)을 채택하였습니다. 점진적 타입 시스템은 변수에 타입이 명시적으로 지정되어 있을 경우 해당 타입을 확정하며, 타입이 지정되어 있지 않을 경우에는 자동으로 타입을 유추합니다.

이런 방식을 통해 타입스크립트는 정적 타입 시스템의 안전성과 동적 타입 시스템의 유연성을 모두 결합하여, 코드의 안정성을 높이면서도 개발 생산성을 유지하였습니다.

TypeScript의 작동 원리

컴파일 과정

컴파일이란 고수준 프로그래밍 언어를 저수준 언어(예: 기계어, 바이트 코드 등)로 변환하는 과정을 가리킵니다.

JavaScript는 컴파일 과정 중에서 소스 코드를 추상 구문 트리(Abstract Syntax Tree, AST)로 변환한 다음, 이를 바이트 코드로 변환합니다.

반면, TypeScript의 컴파일 과정은 더 복잡합니다. 먼저, TypeScript 컴파일러는 소스 코드를 AST로 변환합니다. 이 변환된 AST는 타입 검사를 통해 코드에 잘못된 타입 사용이 있는지를 검증합니다. 이 타입 검사를 성공적으로 통과하면, AST는 TypeScript 컴파일러에 의해 표준 JavaScript 코드로 변환됩니다.

이런 단계적인 컴파일 과정을 통해 TypeScript는 뛰어난 타입 안정성을 보장합니다. 따라서 프로그램이 컴파일 단계에서 잘못된 타입 사용을 포착하므로 런타임에서 발생할 수 있는 타입 관련 에러를 크게 줄일 수 있습니다. 이는 TypeScript를 사용하는 데에 주요 장점 중 하나입니다.

TypeScript 시작하기: "Hello, TS World"

작업 디렉토리의 Node.js 패키지 초기화
- 다음의 명령어를 통해 Node.js 프로젝트를 시작합니다.
```
npm init
```
@types/node 설치
- TypeScript는 Node.js의 기본 기능들의 타입을 이해하고 컴파일하는 과정에서 @types/node 패키지가 필요합니다.
```
npm install @types/node
```

TypeScript 설치

전역적으로 TypeScript를 설치합니다.

sudo npm install typescript -g

tsc -v
// Version 5.x.x

TypeScript는 .ts 확장자를 사용합니다.

// index.ts
console.log("Hello TypeScript");
const a: number = 1;

TypeScript 컴파일
- TypeScript 파일을 JavaScript 파일로 컴파일합니다.
```
tsc src/index.ts
```
- 이를 통해 생성된 JavaScript 파일은 아래와 같습니다.
```
// index.js
console.log("Hello TypeScript");
var a = 1;
```
ts-node 설치
- ts-node 패키지를 설치하면 TypeScript 코드를 컴파일 없이 바로 실행할 수 있습니다.
```
sudo npm install ts-node -g
```
- 아래와 같이 ts-node를 사용하면 타입스크립트 코드를 즉시 실행할 수 있습니다.
```
ts-node src/index.ts
```

TypeScript 컴파일러 옵션 설정하기

TypeScript 컴파일러 옵션을 설정하면 타입 오류를 얼마나 엄격하게 검사할지, 어떤 버전의 JavaScript 코드로 컴파일할지 등을 지정할 수 있습니다.

tsconfig.json 생성
- 아래의 명령어를 실행하여 기본 tsconfig.json 파일을 생성합니다.
```
tsc --init
```

tsconfig.json 파일 커스텀화

생성된 tsconfig.json 파일을 열어 아래와 같이 설정합니다.

{
  "compilerOptions": {
    "target": "ESNext", // 컴파일된 JavaScript 코드의 ECMAScript 버전을 지정합니다.
    "module": "ESNext", // 모듈 시스템을 설정합니다.
    "outDir": "dist", // 컴파일된 JavaScript 파일이 저장될 출력 디렉토리를 지정합니다.
    "strict": true, // 모든 엄격한 타입 검사 옵션을 활성화합니다.
	   "strictNullChecks": false // null 및 undefined 검사를 비활성화합니다.
    "moduleDetection": "force" // TypeScript에서 파일이 ECMAScript 모듈인지를 어떻게 판단할지 결정하는 설정입니다.
    // force로 설정하면 모든 선언이 아닌 파일도 모듈로 처리되도록 합니다.
  },
  "ts-node": {
    "esm": true // ts-node가 ES 모듈을 사용하도록 설정합니다.
  },
  "include": ["src"] // 컴파일 대상이 될 파일 또는 디렉토리의 리스트를 제공합니다.
}