[TS 스터디] 타입스크립트 개론

그릿 Grit·2025년 5월 4일

typescript

목록 보기

1/1

🌱 해당 포스트는 한 입 크기로 잘라먹는 타입스크립트(TypeScript)을 수강하고 정리한 글입니다.

타입스크립트란?

자바스크립트를 더 안전하게 사용할 수 있도록 타입 관련 기능을 추가한 언어로, 자바스크립트의 확장판이라 볼수 있다.

node.js(자바스크립트의 런타임 즉 실행 환경)의 등장으로, 자바스크립트가 다양한 프로그램(서버, 모바일 앱, 데스크탑 앱)을 개발하는데 사용할 수 있게 되었다.

하지만 이런 프로그램을 개발할 때 JS의 유연함이 오히려 독이 되었고, 엄격한 문법을 통해 안정성이 보장되어야할 필요성이 생겼다. 그래서 자바스크립트를 더 안전하게 사용할 수 있도록 타입에 관련된 여러가지 기능을 추가한, Typescript가 등장하게 되었다.

타입 시스템

모든 프로그래밍 언어에는, 사용할때 타입과 관련해서 지켜야 하는 규칙들을 모아둔 체계인 타입 시스템이 갖추어져 있다. 타입 시스템은 아래와 같은 내용들을 정의한다.

값들을 어떤 기준으로 묶어 타입을 규정할지

코드의 타입을 언제 검사할지

어떻게 타입을 검사할지?

타입 시스템은 크게 두 가지가 있다. 정적 타입 시스템과 동적 타입 시스템이다.

정적 타입 시스템

코드 실행 이전에 모든 변수의 타입을 고정적으로 결정한다.
ex) C, Java
단점은, 모든 변수에 다 타입을 정의해야 해서, 타이핑 양과 코드량이 증가한다.

동적 타입 시스템

코드가 실행 되는 도중에 타입을 결정한다. 따라서 아래와 같은 특징을 가질 수 있다.

우리가 미리 변수에 타입을 설정하지 않아도 된다.

변수의 타입이 어떤 하나의 타입으로 딱 고정되지 않고, 현재 변수에 담긴 값에 따라서 변수의 타입이 동적으로 달라진다.

ex) Javascript, Python

단점은, 아래 보이는 것과 같이 타입이 달라 사용할 수 없는 메소드가 있는 경우, 실행전에는 에러가 나지 않지만, 실행했을 때 에러가 난다.

실행되었을 때 에러가나면, 프로그램이 비정상적으로 종료되는데, 실제 서비스에서 이런 오류가 나면, 서비스 전체가 셧다운 된다는 말과 동일하다. ⇒ 매우 치명적 😦

점진적 타입 시스템 (Gradual Type System)

JS의 장점을 살릴 수 있도록, 정적 타입 시스템과 같이 모든 변수의 타입을 지정할 필요는 없지만, 안정성있는 타입 시스템이 필요하다.
이에 Typescript는 동적 타입 시스템과 정적 타입 시스템을 혼합한 것 같은 점진적 타입 시스템(gradual Type System)을 채택했다.

위 그림과 같이, 타입스크립트에서는 모든 변수에 타입을 지정해줄 필요가 없다. 타입스크립트가 변수에 담기는 초기값을 기준으로, 변수의 타입을 알아서 추론해준다.
따라서, 정적 타입 시스템의 귀찮음과 동적 타입 시스템의 타입 불안전성 문제를 해결한다.

정리

타입스크립트의 동작 원리

대부분의 프로그래밍 언어는 프로그래밍 언어로 사람이 작성한 코드를 컴파일러를 통해 기계어(바이트코드)로 변환하는 작업을 거친다.

정확히 말하면, 코드 → AST(추상 문법 트리) → 바이트 코드 (기계어) 단계를 거친다.
AST 과정? - 코드 실행에 관계없는 요소(코드의 공백이나 주석 탭 등)들은 전부 제거하고, 트리 형태의 자료구조에 코드를 쪼개서 저장해 놓는 과정

타입스크립트 동작과정

타입스크립트도 위의 컴파일 과정과 유사한 과정을 통해 컴파일 된다.

코드가 AST로 변환된다.

만들어진 AST를 보고, 코드 상에 타입 오류가 없는지 검사한다 (타입 검사)

통과하면 AST를 (기계어가 아닌) Javascript로 변환한다.

즉, 타입스크립트 코드를 컴파일 해서 생성한, 자바스크립트 코드는 타입 검사를 통과한 자바스크립트 코드 이므로, 타입 오류가 발생할 가능성이 낮은 안전한 자바스크립트 코드이다.

최종 실행 과정

Typescript 실행 환경 설정

타입스크립트를 Node.js에서 실행할 수 있다.
Node.js 내장 기능들의 타입 정보를 제공하는 @types/node 를 설치한다.
타입스크립트 컴파일러(tsc)를 설치한다. typescript를 npm으로 설치하면, 해당 패키지에 동봉되어 있다. (tsc를 통해 ts 파일을 컴파일 하면 js 파일이 생성된다.)
생성된 js 파일을 node로 실행한다.

❗️ tsc + node를 한번에 하기 위한 도구 tsx가 있다.

타입스크립트 컴파일 옵션 설정

Typescript를 컴파일하고자 할 때, 엄격한 정도, 컴파일 결과 생성되는 JS의 버전 등을 설정할 수 있게 만들어주는 옵션

컴파일러 옵션은 패키지 루트 폴더에, tsconfig.json이라는 파일에 설정할 수 있다. 아래 명령어를 통해 생성할 수 있다.

tsc --init

옵션 예시

include 옵션

tsc에게 컴파일 할 타입스크립트 파일의 범위와 위치를 알려주는 옵션이다.

{
  "include": ["src"]
}

위처럼 설정하면, src 폴더 아래 모든 타입스크립트 파일이 한번에 컴파일된다.

Typescript를 Javascript로 변환하는 과정이나, type 검사 등에 대한 아주 상세한 옵션들을 설정할 때 사용

target 옵션

컴파일 된 javascript 코드의 버전을 설정한다.

타입스크립트 컴파일러의 동작 방식을 세부적으로 설정하기 위해 사용하는 기본 설정 파일은 무엇인가요?
tsconfig.json 파일은 타입스크립트 컴파일러(tsc)에게 어떤 파일을 컴파일할지, 어떤 자바스크립트 버전으로 만들지 등을 알려주는 역할을 해요.

{
  "compilerOptions": {
    "target": "ES5"
  },
  "include": ["src"]
}

module 옵션

변환되는 자바스크립트 코드의 모듈 시스템을 설정할 수 있는 옵션이다.

{
  "compilerOptions": {
    "target": "ESNext",
		"module": "CommonJS"
  },
  "include": ["src"]
}

아래 코드를 컴파일한다고 할 때, 각 설정 옵션에 따라 결과가 달라진다.

// hello.ts
export const hello = () => {
  console.log("hello");
};

// index.ts
import { hello } from "./hello";
console.log(hello);

CommonJs

아래와 유사하게 컴파일 된다.

ES 모듈시스템

아래와 유사하게 컴파일 된다.

outDir 옵션

컴파일 결과 생성할 자바스크립트 코드의 위치를 결정한다.

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "outDir": "dist"
  },
  "include": ["src"]
}

outDir 옵션을 이용하면, 컴파일 결과로 생성되는 코드를 우리가 작성하는 코드 영역에서 분리할 수 있다.

strict 옵션

타입스크립트 컴파일러의 타입 검사 엄격함의 수준을 정하는 옵션이다.

{
  "compilerOptions": {
    ...
    "strict": true // 이렇게 설정하면 타입을 지정하지 않은 함수 매개변수에는 에러가 난다.
  },
  "include": ["src"]
}

export const hello = (message) => {
  console.log("hello " + message);
};

위 코드는 "strict": true일 때, 에러가 발생한다. ts는 함수 매개변수에 타입을 지정하도록 권장한다. 왜냐하면, 함수 매개변수의 경우 타입을 자동으로 추론할 수 없기 때문이다.

moduleDetection 옵션

타입스크립트의 모든 파일은 기본적으로 전역 파일(모듈)로 취급한다. 따라서 아래 상황에서 에러가 발생한다.

// a.ts

const a = 1; // ❌

// b.ts

const a = 1; // ❌

이 때, 두 가지 해결 방법이 있다.

1. `export`, `import` 키워드 활용

예시) 파일에 export {} 구문을 넣는다.

2. moduleDetection -> force

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "outDir": "dist",
		"moduleDetection": "force"
  },
  "include": ["src"]
}

moduleDetection을 force로 설정하면, 자동으로 모든 타입스크립트 파일이 로컬 모듈(독립 모듈)로 취급된다. 컴파일 결과인 js 코드를 확인해보면 export {} 구문이 자동으로 들어간 것을 확인할 수 있다.

그릿 Grit

𝙒𝙝𝙚𝙧𝙚 𝙩𝙝𝙚𝙧𝙚 𝙞𝙨 𝙖 𝙬𝙞𝙡𝙡 𝙩𝙝𝙚𝙧𝙚 𝙞𝙨 𝙖 𝙬𝙖𝙮 ✨