[TS] 타입 추론과 타입 단언

타입스크립트(TypeScript)는 정적 타입 시스템을 통해 코드의 안전성을 높이고, 버그를 줄이는 데 유용한 언어입니다. 그중에서도 타입 추론과 타입 단언은 TypeScript의 강력한 기능입니다.

 

목차

1. 타입 추론 (Type Inference)

2. 타입 단언 (Type Assertion)

3. 타입 추론과 단언의 차이

4. 타입 추론과 단언 혼합 사용

추천글

위의 목차를 클릭하면 해당 글로 자동 이동 합니다.

 

1. 타입 추론  (Type Inference)

타입 추론은 변수나 함수의 타입을 명시적으로 지정하지 않아도, TypeScript가 자동으로 타입을 결정하는 기능입니다. TypeScript는 코드 작성 시에 데이터의 초기 값을 기반으로 타입을 추론해 변수의 타입을 설정합니다. 이 기능 덕분에 타입을 일일이 명시하지 않아도 되며, 코드 작성이 더 간편해집니다.

let name = "Kim"; // TypeScript는 name 변수를 string으로 추론합니다.
let age = 25;  // TypeScript는 age 변수를 number로 추론합니다.

function add(x: number, y: number) {
  return x + y; // TypeScript는 반환값을 number로 추론합니다.
}

위 코드에서 name은 문자열 타입, age는 숫자 타입으로 추론됩니다. 함수 add의 반환 타입 역시 매개변수 타입으로 추론됩니다.

 

타입 추론의 장점

• 코드 가독성 증가: 명시적으로 타입을 쓰지 않아도 코드가 깔끔해지며 가독성이 높아집니다.
• 개발 시간 단축: 코드 작성 시 타입을 생략할 수 있어 속도가 빨라집니다.
• 자동 완성 지원: 추론된 타입을 기반으로 IDE에서 자동 완성을 제공합니다.

 

2. 타입 단언

타입 단언은 개발자가 특정 값이 특정 타입임을 명시적으로 알려주는 기능입니다. TypeScript가 추론한 타입이 맞지 않거나, 타입이 너무 일반적일 때 타입 단언을 사용해 정확한 타입을 설정할 수 있습니다.

 

타입 단언의 문법

let num1 = 10 as never;
let num2 = 10 as unknown;

 

as 키워드를 사용해 타입을 단언할 때 규칙이 있습니다.

• 값 as 단언(타입) 형태로 단언식 작성
• A as B일 때 A가 B의 슈퍼타입이거나 서브타입이어야 함

// 'number' 형식을 'string' 형식으로 변환한 작업은 실수일 수 있습니다. 
// 두 형식이 서로 충분히 겹치지 않기 때문입니다. 
// 의도적으로 변환한 경우에는 먼저 'unknown'으로 식을 변환합니다.
let num3 = 10 as string;

 

number 타입은 string 타입의 슈퍼타입, 서브타입이 아니기 때문에 위와 같은 ts 에러가 발생합니다.

 

const 단언

타입 단언 때에만 사용할 수 있는 const 타입이 존재합니다. 특정 값을 const 타입으로 단언하면 마치 변수를 const로 선언한 것 과 비슷하게 타입이 변경됩니다.

as const를 사용해 타입을 단언해 주게 되면 객체의 속성마다 readonly를 사용할 필요 없이 읽기 전용 값으로 변경할 수 있습니다.

 

타입 단언의 예시

타입 단언은 주로 DOM 요소와 같이 특정 타입이 추론되지 않는 경우나, any 타입을 사용할 때 자주 사용됩니다.

querySelector로 선택한 요소의 타입은 일반적으로 Element | null로 추론되므로, 특정 HTML 요소(HTMLInputElement)로 단언하면 원하는 속성에 안전하게 접근할 수 있습니다.

// HTML 요소에 접근할 때
const inputElement = document.querySelector("input") as HTMLInputElement;
// HTMLInputElement로 단언했기 때문에 value 속성에 접근할 수 있습니다.
inputElement.value = "Hello!";

 

3. 타입 추론과 단언의 차이

타입 추론 (Type Interface)	타입 단언 (Type Assertion)
TypeScript가 타입을 자동으로 결정	개발자가 타입을 명시적으로 단언
주로 초기값이나 연산에 의해 결정	추론된 타입과 다르거나, any에서 특정 타입으로 변경
개발자 개입이 필요하지 않음	개발자가 직접 타입을 지정해야 함
자동으로 결정되므로 실수 가능성이 적음	잘못된 단언은 런타임 에러로 이어질 수 있음

 

4. 타입 추론과 단언 혼합 사용

타입 추론과 단언을 적절히 혼합하면 더욱 안전하고, 유지 보수가 쉬운 코드를 작성할 수 있습니다. 예를 들어, 타입 추론을 통해 타입을 생략할 수 있지만, 정확한 타입이 필요한 부분에선 단언을 사용해 안전하게 접근할 수 있습니다.

function getFirstElement(arr: any[]) {
  const firstElement = arr[0] as string;
  return firstElement.length;
}

 

이 함수는 배열의 첫 번째 요소를 문자열로 간주하고 length 속성에 접근하는 예입니다. 배열이 문자열 배열이라면 잘 작동하지만, 그렇지 않으면 런타임 에러가 발생할 수 있습니다. 타입 단언 사용 시 타입이 확실한 경우에만 사용하는 것이 중요합니다.

 

 

언제 타입 단언을 사용할까?

• 타입 추론이 불완전할 때: TypeScript가 변수나 반환값의 타입을 정확히 알 수 없을 때.
• 특정 타입이 확실할 때: 예를 들어, DOM 요소를 다룰 때 HTML 요소 타입을 정확히 알고 있는 경우.
• any 타입으로 인해 타입이 불분명할 때: 타입 추론을 생략했거나, 외부 라이브러리에서 데이터를 받아올 때 주로 any 타입을 사용합니다.

 

 

 

[TS] 타입스크립트의 유용한 유틸리티 타입

 

[TS] 타입스크립트 주요 기능과 기본 문법 소개