[TS] 타입스크립트 - 타입 추론 / 단언 / 가드

타입 추론

---

기본

💡 타입추론이란 타입스크립트가 코드를 해석해 나가는 동작을 의미한다.

 

아래처럼 x 에 대한 타입을 따로 지정하지 않더라도 변수 x에 숫자 3을 할당했으므로 number 타입으로 간주한다. 이처럼 변수를 선언하거나 초기화할 때 타입이 추론된다. 변수, 속성, 함수 인자의 기본 값, 함수 반환 값 등을 설정할 때도 타입 추론이 일어난다.

let x = 3; // 변수를 선언하고 할당함으로서 x는 number 타입이라는 추론이 일어났다.

 

 

아래 코드에서 DetailedDropdown 인터페이스는 extends 키워드를 이용했으므로 Dropdown 인터페이스의 속성도 가진다. DetailedDropdown<number>의 <number> 타입은 DetailedDropdown에 있는 <T> 로 넘어간 후, 다시 Dropdown<T> 인터페이스의 <T>로 넘겨져 최종적으로 Dropdown에 있는 value: T는 number 타입을 갖는다. 이런 과정을 통해 타입 추론이 이뤄지기 때문에 value에 number 타입이 아닌 다른 타입을 할당하면 에러가 발생한다.

interface Dropdown<T> {
  value: T; // 어떤 타입이든 올 수 있음
  title: string; // 문자열 타입으로 고정
}

interface DetailedDropdown<T> extends Dropdown<T> {
  description: string;
  tag: T;
  // extends 키워드를 사용했으므로 Dropdown 인터페이스의 value, title도 가진다고 볼 수 있다.
}

const detailedItem: DetailedDropdown<number> = {
  title: 'a',
  description: 'a',
  value: 'a', // Error
  tag: 'a', // Error
};

 

타입 추론을 통해 value의 타입이 number가 된걸 볼 수 있다.

 

Best Common Type (가장 적절한 타입)

타입은 보통 몇 개의(若干) 표현식 코드를 바탕으로 타입을 추론한다. 이 표현식을 이용하여 가장 근접한 타입을 추론하는데, 이 근접한 타입을 Best Common Type이라고 부른다.

 

아래 arr 배열 요소의 타입을 추론하기 위해선 배열에 있는 각 요소를 살펴봐야 한다. 아래 코드의 배열에서 각 요소의 타입은 number와 null로 구분된다. 이때 Best Common Type 알고리즘으로 다른 타입들과 가장 잘 호환하는 타입을 선정하는 것.

let arr = [0, 1, null];

 

문맥상의 타이핑

타입스크립트에서 타입을 추론하는 또 다른 방식은 문맥으로 타입을 결정하는 것이다. 이 문맥상의 타이핑(타입 결정)은 코드의 위치(문맥)를 기준으로 일어난다.

 

예제 1

아래 코드에서 window.onmousedown에 할당되는 함수의 타입을 추론하기 위해 window.onmousedown타입을 검사한다. 타입 검사가 끝나면 함수 타입이 마우스 이벤트와 관련있다고 추론하기 때문에 mouseEvent 인자에 button 속성은 있지만 kangaroo 속성은 없다고 결론 짓는다.

window.onmousedown = function (mouseEvent) {
  console.log(mouseEvent.button); // OK
  console.log(mouseEvent.kangaroo); // Error
};

 

예제 2

예제1과 마찬가지로 함수는 window.onscroll 에 할당되었기 때문에 함수 인자 uiEvent는 UIEvent로 간주한다. 때문에 button 속성이 없다고 추론하여 uiEvent.button에서 에러가 발생하는 것.

window.onscroll = function (uiEvent) {
  console.log(uiEvent.button); // Error!
};

 

아래처럼 함수를 handler 변수에 할당하면, 함수가 할당되는 변수만으로는 타입을 추정하기 어렵기 때문에 아무런 에러가 발생하지 않는다. 참고로 noImplicitAny 옵션을 사용했다면 에러가 발생한다.

const handler = function (uiEvent) {
  console.log(uiEvent.button); // OK
};

 

타입스크립트의 타입 체킹

타입스크립트에서 타입 체크는 값의 형태에 기반하여 이뤄져야 한다고 지향한다. 이런걸 Duck Typing 또는 Structural Subtyping이라고 부른다.

 

• Duck Typing: 객체의 변수 및 메서드의 집합이 객체 타입을 결정하는 것을 의미
• Structural Subtyping: 객체의 실제 구조나 정의에 따라 타입을 결정하는 것을 의미

 

타입 단언

---

💡 타입 단언은 `as` 키워드를 사용한다.

 

타입스크립트에서 추론하는 값보다 개발자가 해당 변수를 더 잘 알고 있을 때 변수에 원하는 타입을 강제로 부여하는 것을 말한다. 아래 코드에서 TS는 변수 a를 any로 추론하기 때문에 변수 b 역시 any로 추론한다. 하지만 개발자 입장에선 b가 number 10인걸 알기 때문에 as 키워드를 사용해 강제로 assertion(단언)할 수 있다.

let a;
a = '20';
a = 10; // let a: any
let b = a as number;

 

타입 단언은 querySelector getElementById 같은 DOM API를 조작할 때 가장 많이 사용한다. 아래처럼 쿼리셀렉터로 .container 클래스를 선택한 후 textContext를 사용하려고 하면 개체가 null일 수도 있다는 에러가 발생한다. querySelector 코드를 실행하는 시점에서 .container 클래스가 있다는 보장을 하지 않았기 때문에 그런 것.

const container = document.querySelector('.container');
container.textContext = 'Hello'; // error: Object is possibly null

 

타입스크립트는 Element가 없을 상황을 고려해 기본적으로 null 타입도 같이 보장한다

 

이런 이유로 보통 아래처럼 null을 타입가드(Element 타입이 있다고 보장) 시키는 패턴을 사용한다.

const container = document.querySelector('.container');
if (container) {
  container.textContext = 'Hello';
}

 

만약 const container... 코드를 실행하는 시점에 해당 클래스가 무조건 존재한다고 확신한다면 as 키워드를 이용해 HTMLDivElement로 타입 단언을 하면 된다. 그럼 null 타입 보장값은 제거된다.

const container = document.querySelector('.container') as HTMLDivElement;
container.textContext = 'Hello';

 

타입 가드

---

💡 유니온 타입의 인자를 처리할 때 정확히 어떤 타입인지 검사해야 할 때가 있다. 이때 각 타입을 분기 처리하여 타입별로 로직을 분리(타입 범위를 좁혀주는 작업)하는 타입가드 작업이 필요하다. 타입가드는 타입 단언을 더 깔끔하게 사용할 수 있도록 해준다.

 

is 키워드

함수 파라미터로 유니온 타입이 지정되면 타입이 2개 이상이기 때문에 공통 속성만 사용 가능하다.

interface Dev {
  name: string;
  skill: string;
}

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

function introduce(): Dev | Person {
  return { name: 'Tony', age: 33, skill: 'JS' };
}

const tony = introduce(); // Dev | Person 인터페이스의 공통 속성만 사용 가능
console.log(tony.skill); // ts(2339) Error (Dev와 Person의 공통 속성인 name만 접근 가능)

 

skill 속성을 사용하기 위해 타입 단언(type assertion)을 이용할 수 있다. 하지만 단지 2개의 속성을 사용하기 위해 타입단언을 사용함으로써 코드가 길어지는 단점이 발생한다.

// as 키워드를 사용하여 tony의 타입은 Dev라고 단언
if ((tony as Dev).skill) {
  const { skill } = tony as Dev;
  console.log(skill); // 'JS'
  // as 키워드를 사용하여 tony의 타입은 Person라고 단언
} else if ((tony as Person).age) {
  const { age } = tony as Person;
  console.log(age); // 33
}

 

이때 사용하는게 바로 타입가드다. 타입가드는 각 타입을 분기 처리하여 타입별로 로직을 분리하는 작업(타입 범위를 좁혀주는 작업)이다. 타입가드는 in typeof instanceof 같은 키워드를 이용하거나, 사용자 정의 타입 가드 함수를 만들어서 사용할 수 있다.

 

타입 가드 함수는 “어떤 인자는 어떤 타입이다"라는 값을 리턴하는 함수로 타입이 복잡하거나 타입 판단 로직을 재사용하고 싶을 때 사용한다. 타입가드 함수는 리턴 타입에 parameterName is Type 형식으로 정의하며, 함수명은 보통 isTypeName 형태를 많이 사용한다.

 

아래 isDev 사용자 정의 타입 가드함수의 내부 로직을 통과하면 인자(target)로 넘긴 값의 타입이 Dev인지(true|false) 여부를 구분해준다. 즉 target 파라미터에 skill 속성이 있다면 Dev 타입으로 취급해서 skill 속성을 사용할 수 있게된다.

// is 키워드를 사용해 타입가드 함수 정의(넘겨 받은 파라미터가 해당 타입인지 확인)
function isDev(target: Dev | Person): target is Dev {
  // target 객체에 skill 속성이 있다면 Dev 타입으로 취급(true)
  return (target as Dev).skill !== undefined;
}

if (isDev(tony)) {
  // Dev 인터페이스의 name, skill 속성 사용 가능(Dev 타입으로 취급)
  console.log(tony.skill); // 'JS"
} else {
  // Person 인터페이스의 name, age 사용 가능(Person 타입으로 취급)
  console.log(tony.age); // 33
}

 

typeof 키워드

typeof는 변수의 데이터 타입을 확인할 때 사용한다. typeof 변수 형태로 사용하는 것 외에, 이미 정의되어 있는 변수(객체 등) 타입을 새로 정의하는 변수에 그대로 적용하는 방식으로도 사용할 수 있다.

 

아래 코드에서 typeof키워드로 smith 객체 타입을 johan 객체로 그대로 옮겨와서 할당했다. smith 객체에 마우스를 올려보면 johan 객체와 동일한 타입을 가지는 것을 확인할 수 있다.

const johan = {
  name: 'John',
  age: 32,
};

const smith: typeof johan = {
  name: 'Smith',
  age: 39,
};

 

 

리액트 커스텀 훅의 리턴 타입이 배열이고 각 요소가 모두 다른 타입이라면, typeof를 사용하면 타입을 더 쉽게 지정할 수 있다. (as const를 활용한 더 간단한 방법은 링크 참고)

const useFetchData = (url: string) => {
  // 생략
  return [loading, data, error] as [typeof loading, typeof data, typeof error];
};

 

in 키워드

타입 가드에서 사용 예시

자바스크립트에서 in 연산자로 객체 key를 순회하듯 타입스크립트에서도 in 연산자를 이용해 특정 타입이 가지는 key를 순회해서 타입 가드할 수 있다.

interface Music {
  title: string;
  genre: string;
}

interface Movie {
  title: string;
  director: number;
}

type Media = Music | Movie;
// Media 타입이 갖는 각 속성(Movie/Music)을 객체 안에서 정의할 땐 각 속성마다 해당하는 타입이 지정된다
// Media 타입을 함수 파라미터로 받았을 땐 Music/Movie 공통 속성만 사용 가능하다

 

아래 printConsole 함수는 파라미터를 받는 시점에 Music Movie 둘 중 어느 타입이 올지 알 수 없기 때문에 공통 속성만 사용 할 수 있다. 각 타입별로 로직을 처리하기 위해선 타입 가드가 필요하다.

 

아래 코드는 in 키워드를 사용해 obj 파라미터에 rate 속성이 있으면 Movie 타입으로 취급하고, 없으면 Music 타입으로 취급하도록 하는 예시(물론 is 키워드 등을 활용할 수도 있다).

const printConsole = (content: Media) => {
  if ('genre' in content) {
    return `this is music of <${content.genre}>`;
  }
  if ('director' in content) {
    return `this is movie of <${content.director}>`;
  }
};

const fkj: Media = {
  title: 'Before Chill',
  genre: 'Jazz Hiphop',
};

printConsole(fkj); // genre 속성이 있기 때문에 Music 타입으로 취급한다

 

`is` 키워드 활용 예시

const isMusic = (target: Media): target is Music => {
  return (target as Music).genre !== undefined;
};

const printConsole = (content: Media) => {
  if (isMusic(content)) {
    return `this is music of <${content.genre}>`;
  }
  // 위에서 이미 Music 타입을 분기 했기 때문에 아래 코드부턴 Movie 타입으로 인식한다
  if (content.director) {
    return `this is movie of <${content.director}>`;
  }
};

 

만약 `is` 키워드를 사용하지 않는다면 아래처럼 지저분한 코드가 된다.

const printConsole = (content: Media) => {
  if ((content as Music).genre) {
    return `this is music of <${(content as Music).genre}>`;
  }
  
  if ((content as Movie).director)
    return `this is movie of <${(content as Movie).director}>`;
};

 

interface / type에서 사용 예시

아래처럼 type을 이용해 특정 객체의 key 목록을 미리 정의한 후, in 연산자를 이용해 해당 key 값만 받도록 할 수 있다. 대괄호 뒤에 물음표를 붙여서 [key in TypeName]? 선택적으로 사용할 수도 있다.

type NameTypeKeys = 'lastName' | 'firstName';

type NameTypes = {
  [key in NameTypeKeys]: string;
  // type NameTypes = Record<NameTypeKeys, string> 위와 동일
};

const johan: NameTypes = {
  lastName: 'Color',
  firstName: 'Filter',
};

 

[...]대괄호 안에 표현식을 사용하는 computed value는 interface에선 사용할 수 없다. 대신 인터페이스가 가진 속성의 키 값이 객체 형태일땐 가능하다.

type NameTypeKeys = 'lastName' | 'firstName';

interface Students {
  [key: string]: { [key in NameTypeKeys]: string };
  // [key: string]: Record<NameTypeKeys, string> 위와 동일
}

const students: Students = {
  colorFilter: {
    lastName: 'Color',
    firstName: 'Filter',
  },
};

 

💡 자바스크립트에서 객체에 `obj[변수명]` 괄호 표기법을 쓰면, 괄호안이 number나 string이 아니면 해당 변수값에 대해 `toString()`을 암묵적으로 호출한다. 타입스크립트에선 `toString()`을 암묵적으로 호출하지 않기 때문에 key 타입은 항상 number 혹은 string이어야 한다.

 

---

글 수정사항은 노션 페이지에 가장 빠르게 반영됩니다. 링크를 참고해 주세요