타입스크립트란?

타입스크립트는 자바스크립트에 타입 문법이 추가된 언어입니다. 이 말은 무엇을 의미할까요?

타입

타입은 값의 모양 또는 값들의 집합입니다.

타입스크립트에는 무수히 많은 값들이 있습니다.

이 값들은 타입으로 구분지을 수 있습니다(문자열, 숫자, 불리언, undefined, null, 객체, 배열, 함수 등).

타입스크립트는 왜 나왔을까?

자바스크립트는 동적 타이핑 언어입니다. 동적 타이핑의 특성으로 인해 자바스크립트 어플리케이션 개발에는 다음과 같은 상황을 겪을 수 있습니다.

동적 타이핑이란?

동적 타이핑은 변수에 할당된 값의 타입이 코드 작성 시점이 아닌 실행 시점에 결정되는 방식을 의미합니다. 이로 인해 코드 작성 시점에서는 타입 오류를 확인할 수 없고, 실행 시점에야 비로소 타입 오류를 발견하게 되어 타입 안정성을 보장하기 어렵습니다.

다음과 같은 코드가 있습니다.

const printHelloWorld = undefined;
printHelloWorld(); // TypeError: printHelloWorld is not a function

우리는 위 코드를 실행하지 않아도 2번째 줄에서 에러가 난다는 것을 알 수 있습니다.

하지만 자바스크립트 엔진은 2번째 줄을 실행시키는 시점에 printHelloWorld 변수에 담긴 값이 함수인지를 확인하고 타입 에러를 발생시킵니다. 바로 직전 줄에서 printHelloWorld에 undefined를 할당했음에도 불구하고 말이죠.

다음 상황은 어떨까요?

utils.js

export const printHelloWorld = undefined;

index.js

import { printHelloWorld } from "./utils.js";
printHelloWorld(); // TypeError: printHelloWorld is not a function

printHelloWorld의 선언과 사용이 다른 모듈로 나뉘어졌기에, 이제는 우리마저 util.js에서 printHelloWorld가 undefined라는 것을 확인하지 못하면 코드의 오류를 코드가 실행이 되어서야 알 수 있을 것입니다.

우리가 만드는 자바스크립트 어플리케이션의 규모가 커질수록 실행 시점에만 발견할 수 있는 오류는 늘어날 것이고, 이는 유지보수의 어려움과 더불어 더욱 심각한 문제로 발전할 수 있습니다.

이것이 동적 타이핑 언어의 한계이며, 이러한 문제를 해결하기 위해 타입스크립트가 나왔습니다.

타입스크립트의 특징

타입스크립트는 자바스크립트에 타입 문법이 추가된 언어로, 컴파일을 통해 자바스크립트로 변환되고, 컴파일 과정에서 정적 타이핑을 검사해 코드를 실행하지 않고도 타입 오류를 발견 할 수 있습니다.

다음은 타입스크립트의 특징을 나열한 것입니다.

• 자바스크립트의 상위집합
• 타입스크립트 코드를 실행시키는 런타임 환경은 없다.
• 컴파일 과정에서 정적 타입을 검사해 타입 오류를 체크한다.

자바스크립트의 상위집합

타입스크립트는 자바스크립트에 타입 문법이 추가된 언어이기에, 자바스크립트의 상위집합으로 볼 수 있습니다.

이는 곧 모든 자바스크립트 코드는 타입스크립트 코드로 간주될 수 있으며, 반대로 모든 타입스크립트 코드는 자바스크립트 코드라 할 수 없습니다.

여기 자바스크립트 코드가 있습니다.

const message = "Hello, World!";

이 코드를 타입스크립트 컴파일러에 전달하면, 아무런 문법 오류가 발생하지 않습니다. 즉, 올바른 타입스크립트 코드라는 것을 의미합니다.

👉 TS Playground에서 타입스크립트 컴파일러의 동작을 직접 확인해보세요.

이제 반대로 해볼까요? 여기 타입스크립트 코드가 있습니다.

const message: string = "Hello, World!";

방금 본 자바스크립트 코드에 타입스크립트 문법으로 변수 message가 string 타입임을 명시적으로 지정했습니다. 이 코드를 브라우저나 노드에서 실행하면 다음과 같은 문법 오류가 발생합니다. 이는 곧 자바스크립트 엔진은 타입스크립트 문법을 이해하지 못한다는 것을 의미합니다.

$ node
Welcome to Node.js v20.15.1.
Type ".help" for more information.
> const message: string = "Hello, World!";
const message: string = "Hello, World!";
      ^^^^^^^

Uncaught SyntaxError: Missing initializer in const declaration

비록 모든 문법을 다룬 것은 아니나 이처럼 모든 자바스크립트 코드는 타입스크립트 코드로 간주될 수 있으며, 모든 타입스크립트 코드는 자바스크립트 코드라 할 수 없습니다.

타입스크립트 코드를 실행시키는 런타임 환경은 없다.

자바스크립트 코드는 브라우저나 Node.js 등의 런타임 환경에서 실행할 수 있지만, 타입스크립트 코드를 실행시키는 런타임 환경은 없습니다.

타입스크립트 코드는 컴파일을 통해 자바스크립트 코드로 변환된 후 브라우저나 Node.js 등의 런타임 환경에서 실행됩니다.

Deno랑 Bun은 타입스크립트 코드를 실행 할 수 있는데요?

Deno나 Bun같은 자바스크립트 런타임 환경은 타입스크립트 코드를 바로 실행시킬 수 있으나, 내부적으로 해당 코드를 자바스크립트로 변환한 후 실행되기에 타입스크립트 코드를 직접 실핼할 수 있는 런타임 환경은 아직은 없습니다.

컴파일 과정에서 정적 타입을 검사해 타입 오류를 체크한다.

타입스크립트는 컴파일 과정에서 정적 타입을 검사해 타입 오류를 체크합니다. 이는 코드를 실행하지 않고도 타입 오류를 체크할 수 있음을 의미합니다.

정리

지금까지의 내용을 바탕으로 타입스크립트에 대해 다음과 같이 정리해 볼 수 있을 것 같습니다.

• 타입스크립트는 정적 타입 검사를 통해 보다 안전한 자바스크립트 코드를 작성할 수 있도록 도와주는 언어입니다.

• 타입스크립트는 자바스크립트에 타입 문법이 추가된 형태로, 완전히 새로운 언어가 아닌 자바스크립트의 확장판이라고 할 수 있습니다.

• 따라서 타입스크립트를 효과적으로 활용하기 위해서는 자바스크립트에 대한 깊이 있는 이해와 함께 타입스크립트의 문법을 잘 익히는 것이 중요합니다.