타입 좁히기 (Narrowing)

타입 좁히기란 타입스크립트에서 타입을 더 구체적인 타입으로 세분화 하는 과정이다.
주로 유니온 타입에서 사용되며 특정 조건을 기반으로 타입의 범위를 줄인다.

타입 좁히기는 일반적인 자바스크립트 제어 흐름에 따라 동작하며 if 문, switch 문, typeof 연산자, === 일치 연산자 등의 타입 가드와 제어 흐름 분석을 통해 이루어진다.

// HTMLElement | null
const welcomeEl = document.getElementById("welcome");
 
if (welcomeEl) {
	// welcomeEl이 truthy이므로 HTMLElement로 좁혀진다.
	welcomeEl.innerText = "안녕하세요";
} else {
	// welcomeEl이 falsy이므로 null로 좁혀진다.
	console.error("#welcome 엘리먼트가 존재하지 않습니다.");
}

타입 가드 (Type Guard)

타입 가드는 조건문에서 타입을 좁히기 위한 도구이다.

진실성 좁히기 (Truthiness Narrowing)

값의 진실성 (truthy, falsy)을 기반으로 타입을 좁히는 방법

// HTMLElement | null
const welcomeEl = document.getElementById("welcome");
 
if (welcomeEl) {
	// welcomeEl이 truthy이므로 HTMLElement로 좁혀진다.
	welcomeEl.innerText = "안녕하세요";
} else {
	// welcomeEl이 falsy이므로 null로 좁혀진다.
	console.error("#welcome 엘리먼트가 존재하지 않습니다.");
}

동등성 좁히기 (Equality Narrowing)

switch문, 일치 연산자 ===, !== , 동등 연산자 ==, != 를 사용해 타입을 좁히는 방법

// switch 문
type Language = "korean" | "japanese" | "american";
 
function getWelcomeMessage(language: Language) {
	switch (language) {
		case "korean":
			return "어서오세요";
    case "japanese":
      return "ようこそ";
    case "american":
      return "welcome";
	}
}

// 일치 연산자
// HTMLElement | null;
const welcomeEl = document.getElementById("welcome");
if (welcomeEl !== null) {
  // welcomeEl이 null이 아니므로 HTMLElement로 좁혀진다.
  welcomeEl.innerText = "어서오세요";
} else {
  // else로 넘어왔으므로 welcomeEl은 null로 좁혀진다.
  console.error("#welcome 엘리먼트가 존재하지 않습니다.");
}

typeof 좁히기 (typeof narrowing)

typeof 연산자를 사용해 변수의 타입을 좁히는 방법

💡 typeof 연산자의 반환하는 문자열

string, number, bigint, boolean, symbol, undefined, object, function

function getLength(input: string | string[]) {
	if (typeof input === "string") {
		// input이 string 타입으로 좁혀짐
		return input.length;
	} else {
		// input이 string[] 타입으로 좁혀짐
		return input.join("").length;
	}
}

in 연산자 좁히기 (in operator narrowing)

in 연산자를 사용해 객체에 특정 속성이 있는지 확인하고 타입을 좁히는 방법

💡 in 연산자

객체 자신 또는 프로토타입 체인에 특정 프로퍼티가 있는지 체크하는 연산자

function getLength(input: any[] | Map<any, any>) {
	if ("length" in input) {
		// 배열은 length 프로퍼티를 가지고 있으므로 배열로 좁혀짐
		return input.length;
	} else {
		// Map 객체는 length 가 없으므로 Map으로 좁혀짐
		return input.size;
	}
}

instanceof 좁히기 (instanceof narrowing)

instanceof 연산자를 사용해 객체가 특정 클래스 또는 생성자 함수의 인스턴스인지 확인하고
타입을 좁히는 방법

💡 instanceof 연산자

클래스 또는 생성자 함수의 prototype 속성이 instancof 피연산자의 프로토타입 체인에
존재하는지 체크하는 연산자

function getLength(input: any[] | Map<any, any>) {
	if (input instanceof Array) {
		// input이 배열로 좁혀짐
		return input.length;
	} else {
		// input이 Map으로 좁혀짐
		return input.size;
	}
}

타입 단정문 (Type Predicate)

타입 단정문을 사용해 내가 직접 타입가드를 정의 할 수 있다.

타입 가드로 쓸 함수의 반환 타입에 parameterName is Type 형태로 반환 타입을 정의한다.

// 이 함수가 타입가드로 쓰일 때, 반환값이 true면 input은 any[]이다.
function isArray(input: any): input is any[] {
	return input instanceof Array;
}
 
function getLength(input: any[] | Map<any, any>) {
	if (isArray(input)) {
		// isArray 함수가 true를 반환했으므로 input은 any[]로 좁혀진다.
		return input.length;
	} else {
		// input이 any[]가 아니기에 Map<any, any>로 좁혀진다.
		return input.size;
	}
}

✅ 타입 단정문이 적용된 내장 함수가 존재

위와 같은 경우 Array.isArray() 함수를 사용하면 된다.

Array.isArray() 의 반환 타입은 isArray(arg: any): arg is any[] 로 되어있어 타입가드로 사용할 수 있다.

이 외에도 타입 단정문이 적용된 다양한 내장 함수들이 존재한다.

(Array , String , Number , Object , Promise , JSON 관련 함수들)

할당 (Assignments)

변수에 값을 할당할 때, 그 값의 타입에 따라 변수의 타입이 좁혀진다.
재할당 시 변수가 처음 선언되었던 때의 타입 내에서만 할당 가능하다.

// 변수 a 선언 시 정의된 타입: string | number;
let a: string | number = "2";
// 변수 a 에 "2"라는 값이 할당된 이후 a: string;
 
// 변수 a 에 재할당 시 할당 가능한 타입: string | number;
a = 2;
// 변수 a 에 2라는 값이 할당된 이수 a: number;
 
// 변수 a 선언 시 정의된 타입은 string | number 이기에 boolean은 할당할 수 없다.
a = false; // 타입 에러!

제어 흐름 분석 (Control flow analysis)

코드의 도달 가능성을 기반으로 타입이 좁혀지는 것을 제어 흐름 분석이라고 한다.

💡 도달 가능성 (Reachability)

특정 코드가 실행될 가능성이 있는지 여부

function getLength(input: any[] | Map<any, any>) {
	if (Array.isArray(input)) {
		// return 문으로 인해 input 이 any[] 인 경우는 여기까지이다.
		return input.length;
	}
	
	// input이 any[]인 경우는 이 곳에 도달할 수 없어 Map<any, any>로 좁혀진다.
	return input.size;
}
 
function printLength(input: any[] | Map<any, any>) {
	if (Array.isArray(input)) {
		console.log(input.length);
		// return 문이 없기에 input이 any[]인 경우는 계속 아래로 내려간다.
	}
	
	// input이 any[]인 경우가 여기까지 도달할 수 있기 때문에 타입 에러 발생한다.
	console.log(input.size); // 타입 에러!
}

구별된 유니온 (Discriminated unions)

구별된 유니온은 공통 속성을 사용해 유니온 타입의 멤버를 구별하는 방법이다.

interface Circle {
	kind: "circle";
	radius: number;
} 
 
interface Square {
	kind: "square";
	sideLength: number;
}
 
type Shape = Circle | Square;
 
function getArea(shape: Shape) {
	swtich (shape.kind) {
		case "circle":
			return Math.PI * shape.radius ** 2;
		case "square":
			return shape.sideLength ** 2;
	}
}

never 타입과 완전성 검사 (Exhaustiveness checking)

never 타입

never 타입은 결코 발생하지 않는 값을 나타낸다.
어떤 변수, 표현식이 never 타입을 가지면 그 값은 논리적으로 도달할 수 없는 상태이다.

interface Circle {
  kind: "circle";
  radius: number;
}
 
interface Square {
  kind: "square";
  sideLength: number;
}
 
type Shape = Circle | Square;
 
function getArea(shape: Shape): number {
  switch (shape.kind) {
    case "circle":
      return Math.PI * shape.radius ** 2;
    case "square":
      return shape.sideLength ** 2;
    default:
      // 이 코드는 실제로 실행되지 않습니다.
      // 이 지점에서 shape은 'never' 타입이 됩니다.
      return shape;
  }
}

never 타입은 다음과 같은 특성이 있다.

never 타입은 모든 타입에 할당할 수 있다.
never 외 타입은 never 에 할당할 수 없다.

const foo: number = undefined as never; // 할당 가능
const bar: never = 1; // 타입 에러!

타입 스크립트는 이 특성을 활용해 완전성 검사를 수행할 수 있다.

완전성 검사

완전성 검사는 유니온 타입의 모든 가능한 경우를 처리했는지 검증하는 과정이다.
never 타입을 이용한 완전성 검사를 통해 코드를 보다 안전하고 오류가 없도록 할 수 있다.

interface Circle {
	kind: "circle";
	radius: number;
}
 
interface Square {
  kind: "square";
  sideLength: number;
}
 
interface Rectangle {
  kind: "rectangle";
  width: number;
  height: number;
}
 
type Shape = Circle | Square | Rectangle;
 
function getArea(shape: Shape) {
	switch (shape.kind) {
		case "circle":
			return Math.PI * shape.radius ** 2;
		case "square":
			return shape.sideLength ** 2;
		default:
			// 타입 에러!
			// Rectangle 타입을 처리하지 않았기에 shape은 Rectangle 타입이 된다.
			// never 타입에 다른 타입을 할당 할 수 없어 타입 에러가 발생한다.
			// Rectangle 타입처럼 다른 타입에 대한 처리를 누락하는 경우를 검증할 수 있다.
			const _exhaustiveCheck: never = shape;
			return _exhaustiveCheck;
	}
}

switch문을 통해 완전성 검사를 진행한다면 매번 default 케이스에 never 타입을 할당하는
로직을 추가해야하는 수고스러운 일을 해야한다.

ts-pattern 라이브러리

완전성 검사를 도와주는 ts-pattern 라이브러리를 사용하면 never 타입을 쓰지 않고도 유니온 타입의 완전성 검사를 할 수 있다.

import { match } from "ts-patter";
 
interface Circle {
  kind: "circle";
  radius: number;
}
 
interface Square {
  kind: "square";
  sideLength: number;
}
 
interface Rectangle {
  kind: "rectangle";
  width: number;
  height: number;
}
 
type Shpae = Circle | Square | Rectangle;
 
function getArea(shape: Shape) {
	const result = match<Shape>(shape)
		.with({ kind: "circle" }, (circle) => Math.PI * circle.radius ** 2)
		.with({ kind: "square" }, (square) => square.sideLength ** 2)
		// 오류 발생 - { kind: "rectangle" }를 처리하지 않음
		.exhaustive();
	return result;
}