📖 TIL - TypeScript 면접 대비 핵심 정리

프론트엔드 개발자로 취업을 준비하면서 TypeScript에 대한 이해를 정리하고자, 실제 면접에서 자주 나오는 TypeScript 핵심 개념들을 정리해보겠습니다.

---

🔀 Union vs Intersection 타입

Union 타입(|)은 여러 타입 중 하나가 될 수 있음을 의미합니다.
즉, 또는(OR)의 개념으로 타입 가능성을 확장합니다.
Intersection 타입(&)은 여러 타입을 모두 만족하는 타입을 의미합니다. 즉, 그리고(AND)의 개념으로 타입 가능성으 축소합니다.

type A = { a: string }
type X = { x: number }

// Union: A 또는 X 타입 (확장)
type AorX = A | X
const a: AorX = { a: 'hello' }  // A 타입만 만족
const b: AorX = { x: 12 }       // X 타입만 만족

// Intersection: A 그리고 X 타입을 모두 만족 (축소)
type AandX = A & X
const c: AandX = { a: 'hi', x: 12 }  // A와 X 모두 만족해야 함

💡 포인트: 축소/확장은 좋고 나쁨의 개념이 아닙니다. 상황에 맞게 적절히 사용하는 것이 중요합니다.

---

🔧 Interface vs Type Alias

Interface

• 주로 객체 타입 정의에 사용
• 선언 병합(Declaration Merging) 지원
• extends키워드로 확장 가능
• 확장성이 중요한 경우 적합

Type Alias

• 객체뿐만 아니라 유니언, 인터섹션, 제네릭 등 다양한 타입 정의 가능
• 선업 병합 불가
• 정적이지만 새로운 타입 정의에 적합

// Interface - 선언 병합 가능
interface User {
  name: string
}
interface User {
  age: number
}
// 자동으로 병합됨: { name: string, age: number }

// Interface - 확장
interface Admin extends User {
  role: string
}

// Type Alias - 다양한 타입 정의
type Status = 'loading' | 'success' | 'error'

// Interface의 extends와 같이 사용하려면 아래와 같이 사용가능함
type UserWithStatus = User & { status: Status }

---

🛡️ Type Guard

런타임에서 변수의 타입을 검사하고, 해당 타입에 따라 안전한 코드 블록을 만드는 기법입니다.

주요 방법들

• typeof 연산자
• instanceof 연산자
• in 연산자
• is 키워드를 사용한 사용자 정의 타입 가드

const el = document.querySelect('button')

// 문제 발생 코드
// button이라는 노드를 찾지 못하면 Null이 발생하게 됨
// 아래 부분에서 Error가 발생할 우려가 생기게 된다.
el.addEventListner();

옵셔널 체이닝을 사용하여 el?.addEventListner()와 같이 사용할 수도 있지만 매번 el을 사용할 때 옵셔널 체이닝을 붙여줘야하는 번거로움이 존재하게 됩니다. 이때 여러 타입 가드 방법들을 사용해 볼 수 있습니다.

// 1. 기본 타입
if(el){
	el.addEventListner('click', () => {})
}

// 2. instanceof 사용
if(el instanceof HTMLButtonElement){
	el.click();
}

// 3. in 연산자 사용
if(el && 'classList' in el){
	el.classList.add('active');
}

// 4. 사용자 정의 타입 가드
// is : 이 함수가 true를 반환할 경우 타입스크립트한테 이 타입이라고 봐도 됨 이라고 확신을 주게 만드는것.
function isHTMLElement(el: Element | null): el is HTMLElement{
	return el instanceof HTMLElemnt
}

if(isHTMLElement(el)){
  el.style.color = 'red'
}

---

⚡ Type Assertion

개발자가 TypeScript보다 타입을 더 정확히 알고 있을 때, 명시적으로 타입을 강제하는 방법입니다.

사용 방법

• as키워드 사용
• ! Non-null 단언 연산자
• satisfies 키워드로 타입 안정성 확보

const body = document.querySelector('body');
// body는 항상 존재하므로 안전하게 단언 가능
(body as HTMLElemnt).classList.add('on');

// Non-null(!) 단언 연산자
// 변수가 'null'이나 'undefined'가 아님을 단언할 수도 있습니다.
body!.classList.add('on');

이는 개발자가 직접 타입을 강제하는 것이기 때문에, 타입 안정성을 해칠 수 있으므로 신중하게 사용하는 것이 필요합니다. 그래서 타입 단언 대신 타입 가드를 사용하거나 satisfies 키워드의 타입 만족을 같이 사용해 타입 안정성을 확보하는 접근 방법도 있습니다.

개발자의 시선에서 이 타입을 단언하는 것이기 때문에 실수가 발생할 수 있고 잘못된 타입으로 넘어올 수 있기 때문에 신중하게 사용할 필요가 있게 됩니다.
예를 들어서..

interface X{
	x: string
  	y: number
}
const a = {
	b:{
    	x: 'hi'
    } as X
}

해당 코드는 y가 없는데도 불구하고 에러표시를 하고 있지 않습니다. 왜냐면 타입 단언을 하였기에 발생하지 않는 것이죠
이를 방지하고자 satisfies 키워드를 사용할 수 있게 됩니다.
satisfies는 타입을 만족하는지 확인하는 키워드입니다.

// satisfies로 안정성 확보
interface Config{
  apiUrl: string
  timeout: number
}

const config = {
  apiUrl: 'https://api.example.com',
  timeout: 5000
} satisfies Config as Config

📝 Record Utility Type

키와 값의 타입을 지정해 객체 타입을 정의하는 TypeScript 내장 유틸리티입니다.

언제 사용할까?

• 속성 이름이 동적으로 결정되는 경우
• 모든 속성이 같은 타입의 값을 가지는 경우
• 대괄효 표기법으로 동적 접근이 필요한 경우

interface A {
	a:number
  	b:number
  	c:number
   	// ...
}
const a:A = {
	a:1,
  	b:2,
  	c:3,
  	// ... 
}

만약 사용하려고 하는 객체 타입들이 모두 동일한 경우 일일히 같은 타입들을 하나하나 다 명시를 해줘야 하는 불편함이 발생합니다.

let p = 'a'
a[p] // Error!

또한 위와 같이 사용하려 할 경우에도 에러가 발생하게 되는데
let은 언제든 다시 값이 재 할당 될 수 있는 변수이기 때문에 에러가 발생하게 됩니다. 그러므로 키 값이 'a'라고 확정할 수가 없게 되는 것이죠.
이때 사용하는것이 인덱싱 기능 타입을 추가하면 됩니다.

interface A{
	[key:string] : number
  	// ...
}
a[p] = 9; // 값 할당도 가능함

그리고 record 유틸리티를 사용하게 되면 해당 인터페이스를 사용하지 않아도 되게 됩니다.

const a = Record<string, number> = {...}

동적으로 변경하기가 쉽지만, 속성이 아주 많거나 정확하게 어떠한 속성이 들어가야 된다고 한다면 Record유틸리티는 적합하지 않고 인터페이스를 사용하는 것이 적합하다.

---

🎯 면접 질의응답 대비

Q1) TypeScript 유니언과 인터섹션 타입의 차이점을 설명해주세요

A) 타입스크립트에서 유니언 타입은 '|(vertical bar)'기호를 통해서 여러 타입 중 하나가 될 수 있다는 것을 정의하며, 또는(or)과 비슷한 의미입니다. 반대로 인터섹션 타입은 '&(Intersection)'기호로 여러 타입을 모두 만족하는 타입을 정의하며, 그리고(and)와 비슷한 의미입니다.
그래서 유니언 타입 가능성을 확장하고 인터섹션 타입은 타입 가능성을 축소하는 역할을 한다고 말할 수 있습니다.

Q2) 인터페이스와 타입 별칭의 차이점을 설명해주세요.

A) 인터페이스와 타입 별칭은 모두 타입스크립트의 타입을 정의하는데 사용됩니다. 우선 인터페이스는 주로 객체 타입을 정의할 때 사용하는데, 같은 이름의 인터페이스를 여러번 선언하면 자동으로 병합되고 이를 선언 병합이라고 합니다.
그리고 인터페이스는 extends 키워드를 사용해 타입을 확장할 수도 잇습니다.
반면 타입 별칭은 객체뿐만 아니라 유니언과 인터섹션, 제네릭등 다양한 타입을 새롭게 정의할 수 있습니다.
대신 인터페이스처럼 확장할 수 없고, 같은 이름을 반복 선언할 수 없습니다.
그래서 확장성을 고려한 객체 타입은 주로 인터페이스로 정의하고, 정적이지만 새로운 타입 정의는 타입 별칭을 사용하는 것이 좋습니다.

Q3) TypeScript 타입 가드(Type Guard)에 대해 설명해 주세요.

A) 타입 가드는 런타임에서 변수의 타입을 검사하고, 해당 타입에 따라 다른 동작을 수행하도록 처리하는 것을 말합니다. 주로 typeof, instanceof, in 연산자로 직접 데이터의 타입을 검사하거나, is 키워드를 사용하는 별도의 타입 가드 함수를 제공할 수도 있습니다.

Q4) TypeScript 타입 단언(Assertion)에 대해 설명해 주세요.

A) 타입 단언은 정확한 타입 추론이 어려운 경우, 특정 값의 타입을 개발자가 명시적으로 강제하는 방법을 말합니다. 주로 as키워드를 사용해 타입을 단언하고 !(Non-null)단언 연산자를 사용해 변수가 null이나 undefined가 아님을 단언할 수도 있습니다.
이는 개발자가 직접 타입을 강제하는 것이기 때문에, 타입 안정성을 해칠 수 있으므로 신중하게 사용하는 것이 필요합니다. 그래서 타입 단언 대신 타입 가드를 사용하거나 satisfies키워드의 타입 만족을 같이 사용해 타입 안정성을 확보하는 접근 방법도 있습니다.

Q5) TypeScript Record 유틸리티 타입의 기능과 대표적인 사용법을 설명해 주세요.

A) Record 유틸리티 타입은 키와 값의 타입을 순서대로 제공해 객체 타입을 정의할 수 있는 타입스크립트 재어 기능입니다. 주로 정해지지 않은 이름의 속성들이 모두 같은 타입의 값을 가질 때 유용하게 사용할 수 있습니다. 만약 인터페이스로 객체 타입을 지정하면 속성을 정적으로 정의하기때문에, 속성이 아주 많거나 동적으로 속성이 추가되면 타입 정의나 사용이 어려워집니다.
그래서 Record 유틸티리 타입을 사용하면, 동적으로 속성을 추가하거나 변경하기 쉽고 특히 대괄호 표기법을 사용해 동적으로 속성을 조회하는 것도 간편합니다.

---

🚀 마무리

TypeScript의 핵심 개념들을 이해하고 적절히 활용하면 더 안전하고 유지보수하기 쉬운 코드를 작성할 수 있습니다. 면접에서는 단순히 문법을 암기하여 기계적으로 대답하는 것보다. 언제, 왜 사용하는지에 초점을 두어 설명할 수 있는것이 중요합니다.

실제 프로젝트에 적용해보며 이런 개념들을 활용해보면서 경험을 쌓아보세요