JavaScript - 타입스크립트란 무엇일까? (심화편)

이번 글에서는 타입스크립트의 고급 기능들과 중요한 개념들을 소개하고, 다양한 키워드와 기능들이 실제로 어떻게 사용되는지 알아보자.

 

한정된 다형성

한정된 다형성(Constrained Polymorphism)은 타입스크립트에서 제네릭을 사용할 때 특정 타입만 허용하는 기능을 말한다. 예를 들어, T extends U와 같은 형태로 작성하여, 제네릭 타입 T가 반드시 U 타입의 하위 타입이어야 함을 나타낼 수 있다. 이를 통해 제네릭을 사용하는 코드의 유연성과 안전성을 동시에 보장할 수 있으며, 특정 조건을 만족하는 타입만을 받도록 제한함으로써, 잘못된 타입 사용으로 인한 오류를 방지할 수 있다.

function identity<T extends string | number>(value: T): T {
    return value;
}

 

위 코드에서 identity 함수는 string 또는 number 타입만을 받아들일 수 있다. 이렇게 한정된 다형성을 사용하면 유연하면서도 안정성이 높은 코드를 작성할 수 있다.

 

interface와 type의 차이점은 무엇일까?

interface와 type은 타입을 정의하기 위한 두 가지 주요 도구이다. 두 개념은 비슷한 역할을 하지만, 몇 가지 차이점이 존재한다.

1. 확장성:
   • interface는 선언 병합(Declaration Merging)을 지원하여 같은 이름의 인터페이스가 여러 개 정의될 경우 자동으로 합쳐진다. 이를 통해 기존의 인터페이스에 새로운 속성을 추가할 수 있다.
   • type은 확장성을 위해 & 연산자(Intersection)를 사용하여 다른 타입과 결합할 수 있지만, 선언 병합은 지원하지 않는다.
2. 용도:
   • interface는 객체의 구조를 정의하고, 클래스의 설계에 초점을 맞춘다.
   • type은 원시 타입, 유니온, 인터섹션 등 다양한 타입을 정의하는 데 주로 사용된다.

interface Person {
    name: string;
    age: number;
}

type Animal = {
    species: string;
    legs: number;
};

 

interface는 클래스와 밀접하게 연관된 구조를 표현하고, type은 좀 더 자유롭고 다양한 타입 표현에 사용된다.

 

타입스크립트에서 module 키워드는 무엇일까?

 

타입스크립트의 module 키워드는 코드의 재사용성과 독립성을 높이기 위해 모듈 단위로 코드를 분리하고, 외부에서 필요한 부분만 가져올 수 있도록 하는 기능을 제공한다. import, export 키워드를 사용하여 다른 모듈의 함수를 가져오거나, 모듈을 외부로 내보낼 수 있다. ES6의 모듈 시스템을 사용하기 때문에, 타입스크립트의 module은 자바스크립트 모듈 시스템과 동일한 방식으로 동작한다.

 

네임스페이스와 모듈의 차이점

네임스페이스와 모듈은 모두 코드를 분리하고 관리하기 위한 도구이지만, 몇 가지 차이점이 있다.

1. 네임스페이스:
   • 전역에서 사용되는 코드를 그룹화하여 이름 충돌을 방지한다.
   • 주로 브라우저 환경에서 전역 스코프를 관리하기 위해 사용된다.
   • 파일 내에서 선언되며, 여러 파일에 걸쳐 사용할 경우 /// <reference> 지시문을 사용하여 참조할 수 있다.
   • 컴파일 후 네임스페이스는 즉시 실행 함수(IIFE) 형태로 변환되어 전역 네임스페이스를 오염시키지 않는다.
2. 모듈:
   • ES6 모듈 시스템을 사용하여 import와 export로 파일 간의 종속성을 관리한다.
   • 주로 Node.js 및 최신 자바스크립트 환경에서 모듈화된 코드를 작성하기 위해 사용된다.
   • 파일 단위로 분리되며, 모듈마다 독립된 스코프를 가진다.

// Module 방식
// file1.ts
export function add(a: number, b: number): number {
    return a + b;
}

// file2.ts
import { add } from './file1';
console.log(add(2, 3)); // 5

// Namespace 방식
namespace MathUtils {
    export function add(a: number, b: number): number {
        return a + b;
    }
}

console.log(MathUtils.add(2, 3)); // 5

 

• 모듈 방식은 파일 단위로 코드를 분리하고, 파일 간에 import와 export를 사용하여 종속성을 관리한다.
• 네임스페이스 방식은 하나의 파일 내에서 논리적으로 코드를 그룹화하고, 관련된 코드를 함께 관리할 때 유용하다.

 

 

as 키워드는 무엇일까?

as 키워드는 타입 단언(Type Assertion)에서 사용된다. 특정 값이 개발자가 의도한 타입을 가지고 있다고 컴파일러에게 알려주는 역할을 한다. 예를 들어, 타입스크립트가 특정 변수의 타입을 알 수 없을 때, 개발자가 명시적으로 타입을 지정할 수 있다.

let value: unknown = "Hello World";
let strLength: number = (value as string).length;

 

타입 가드(Type Guard)란 무엇일까?

타입 가드는 특정 조건을 통해 변수의 타입을 좁히는 역할을 한다. 주로 typeof, instanceof 등의 키워드를 사용하여 런타임에서 타입을 검사하고, 그 결과에 따라 코드가 안전하게 실행되도록 돕는다.

function printId(id: number | string) {
    if (typeof id === "string") {
        console.log(id.toUpperCase());
    } else {
        console.log(id);
    }
}