이펙티브 타입스크립트: 1장 요약 및 핵심 정리

이 글은 "이펙티브 타입스크립트"의 1장 "타입스크립트 알아보기"를 요약한 내용입니다. 이 장에서는 타입스크립트와 자바스크립트의 관계, 타입스크립트의 설정 옵션, 구조적 타이핑 개념 등을 다룹니다.

---

타입스크립트와 자바스크립트의 관계 이해하기

타입스크립트는 자바스크립트의 상위 집합으로, 자바스크립트에 타입 시스템을 추가한 언어입니다. 모든 자바스크립트 코드는 유효한 타입스크립트 코드지만, 그 반대는 성립하지 않습니다.

타입스크립트 예시:

function greet(who: string) {
    console.log('Hello', who);
}

자바스크립트 예시:

function greet(who) {
    console.log('Hello', who);
}

타입스크립트 코드는 최종적으로 자바스크립트로 컴파일되어 실행됩니다. 그러나 타입 검사를 통과하더라도 런타임 에러가 발생할 수 있으므로 주의해야 합니다.

---

타입스크립트 설정 이해하기

타입스크립트는 컴파일러 설정을 통해 코드의 엄격성과 동작 방식을 제어할 수 있습니다. 주요 설정은 다음과 같습니다:

1. noImplicitAny

• 암시적으로 any 타입이 되는 것을 방지합니다.
• 활성화하면, 타입이 명시되지 않은 변수나 매개변수에 대해 오류를 발생시킵니다.

2. strictNullChecks

• null과 undefined 값을 보다 엄격하게 처리합니다.
• 예를 들어, string | null 타입 변수에는 null이 명시적으로 포함되어야 합니다.

3. strict

• 타입스크립트의 엄격 모드를 활성화합니다.
• 위의 설정(noImplicitAny, strictNullChecks)을 포함하여 여러 엄격한 검사를 활성화합니다.

설정 예시 (tsconfig.json):

{
    "compilerOptions": {
        "strict": true,
        "noImplicitAny": true,
        "strictNullChecks": true
    }
}

---

코드 생성과 타입의 관계 이해하기

타입스크립트 컴파일러는 두 가지 주요 역할을 수행합니다:

1. 코드 변환: 타입스크립트 코드를 자바스크립트로 변환.
2. 타입 검사: 타입 오류 체크.

타입 오류가 있어도 자바스크립트 코드가 생성될 수 있으며, 이를 방지하려면 noEmitOnError 옵션을 설정하세요.

예시:

{
    "compilerOptions": {
        "noEmitOnError": true
    }
}

---

구조적 타이핑에 익숙해지기

타입스크립트는 구조적 타이핑(Structural Typing)을 사용합니다. 이는 객체의 구조에 따라 타입을 검사하는 방식으로, 자바스크립트의 덕 타이핑(Duck Typing)과 유사합니다.

예시 코드:

interface Vector2D {
    x: number;
    y: number;
}

interface NamedVector {
    x: number;
    y: number;
    name: string;
}

function calculateLength(v: Vector2D) {
    return Math.sqrt(v.x * v.x + v.y * v.y);
}

const v: NamedVector = { x: 3, y: 4, name: 'Zee' };
calculateLength(v); // 정상 작동

위 코드에서 NamedVector는 Vector2D와 구조적으로 호환되므로, calculateLength 함수에 전달할 수 있습니다.

---

any 타입 지양하기

any 타입은 모든 타입의 상위 집합으로, 타입스크립트의 타입 시스템을 무력화시킬 수 있습니다. any 타입을 남용하면 타입스크립트의 장점을 잃게 되므로, 가능한 한 사용을 피하는 것이 좋습니다.

문제 예시:

let age: any = '12';
age += 1; // 결과: '121'

any 타입을 사용하면 타입스크립트의 장점인 타입 안정성을 잃게 됩니다.

---

마무리

이상으로 "이펙티브 타입스크립트" 1장의 주요 내용을 요약하였습니다. 타입스크립트의 설정 옵션, 구조적 타이핑 개념, 그리고 any 타입의 위험성을 이해하여 더 안전하고 효율적인 코드를 작성해 보세요!