8장 타입 말해주기

8.1 타입 단언 (Type Assertion)

8.1.1 타입 단언이란?

1) as 단언

let one: unknown = 'hello';
let oneLength : number = ((one as string).length);
console.log(oneLength); // 5

2) <> 단언

let one: unknown = "hello"; 
let oneLength: number = (<string>one).length;
console.log(oneLength); // 5

8.1.2 타입 단언 규칙

let one = 'hello' as number; // Error
let two = 100 as string; // Error
let three = true as object; // Error

let one = 'hello' as unknown; // OK
let two = 100 as unknown; // OK
let three = true as never; // OK

8.1.3 const 단언

let arr = [100, 'hello'] as const;
arr.push(); // Error

let one = 100 as const; // one: 100

8.1.4 Non-Null 단언

function a(param: string | null | undefined) {
  param.slice(3); // Error
}

function a(param: string | null | undefined) {
	param!.slice(3); // OK
}

8.1.5 다중 단언

let one = 'hello' as unknown as number;
console.log(one.toFixed(2)); // Error

8.1.6 타입 단언의 사용 목적과 주의할 점

1) try catch 문에서 error가 unknown으로 추론 될 때

try {
	//..
} catch (error) {
		console.log(error.message); // Error
}

try {
	//..
} catch (error) {
		const err = error as Error;
		console.log(err.message);
}

2) DOM 요소에 접근할 때

const img = document.querySelector("img");
// img: HTMLImageElement | null
const myImg = document.getElementById("#myImg");
// myImg: HTMLElement | null
const nextImg = document.getElementById("#Img");
// nextImg: HTMLElement | null

img.src; // Error
myImg.src; // Error
nextImg.src; // Error

const img = document.querySelector("img")!;
const myImg = document.getElementById("#myImg") as HTMLImageElement;
const nextImg = <HTMLImageElement>document.getElementById("#nextImg");

img.src; // OK
myImg.src; // OK
nextImg.src; // OK

3) 객체를 먼저 선언하고 나중에 속성을 추가하려 할 때

type Animal = {
  name: string;
  age: number;
  species: string;
};

// 타입 선언
const scar: Animal = {}; // Error

// 타입 단언
const simba = {} as Animal;
simba.name = "심바";
simba.age = 3;
simba.species = "사자";

// 타입 선언
const scar: Animal = {
  name: "스카", // Error
};

// 타입 단언
const simba: Animal = {
  name: "심바",
} as Animal;

4) 함수의 반환 값으로 union 타입을 사용할 때

const addOrConcat = ( a:number, b:number, c:"add"|"concat"): number|string => {
	if (c === "add") {
		return a + b;
	} else {
		return "" + a + b;
  }
};

// string으로 단언한 경우
let myVal: string = addOrConcat(2, 2, "concat") as string;
console.log(myVal); // 출력 : '22'

// number로 단언한 경우 - 
// 컴파일 오류는 없지만 number가 아닌 string을 반환
let wrongVal: number = addOrConcat(3, 3, "concat") as number;
console.log( typeof wrongVal ); //  string
console.log( wrongVal ); // '33'
console.log( wrongVal.toFixed(2)); 
// Error

8.2 타입 가드 (Type Guard)

8.2.1 타입 가드란?

const addOrConcat = ( a:number, b:number, c:"add"|"concat"): number|string => {
	if (c === "add") {
		return a + b;
	} else {
		return "" + a + b;
  }
};

// string으로 단언한 경우
let myVal: string = addOrConcat(2, 2, "concat") as string;
console.log(myVal); // '22'

// number로 단언한 경우 - 
// 컴파일 오류는 없지만 number가 아닌 string을 반환
let wrongVal: number = addOrConcat(3, 3, "concat") as number;
console.log( typeof wrongVal ); // string
console.log( wrongVal ); // '33'
console.log( wrongVal.toFixed(2)); // Error

const addOrConcat = ( a:number, b:number, c:"add"|"concat"): number|string => {
	if (c === "add") {
    return a + b;
  } else {
    return "" + a + b;
  }
};

let myVal = addOrConcat(2, 2, "concat");
if (typeof myVal === "string") {
  console.log(myVal); // '22'
}

let wrongVal = addOrConcat(3, 3, "concat");
if (typeof wrongVal === "number") {
  console.log(wrongVal.toFixed(2));
} else {
  console.log("wrongVal은 숫자가 아니라 문자열입니다.");
  console.log(wrongVal); // '33'
}

8.2.2 타입 가드 적용 방법

1) typeof

function doSomething(x: string | number) {
	if (typeof x === 'string') { 
	// 타입스크립트는 조건문 블록 안에 있는 x의 타입을 문자열로 간주
		console.log(x.toUpperCase()); // 정상 작동!
		console.log(x.toFixed(1)); // Error
	} 
	x.toUpperCase(); // Error
	x.toFixed(1); // Error
}

2) Array.isArray()

function findArray(x: number[] | number): void {
  if (Array.isArray(x)) {
		// x가 number[]일 때 실행됩니다.
    console.log("x는 숫자형 배열입니다.");
    for (const item of x) {
      console.log(item);
    }
  } else {
    // x가 number일 때 실행됩니다.
    console.log("x는 숫자형 입니다.");
    console.log(x);
  }
}

3) in

interface Shoes {
  size: number;
}

interface Muffler {
  length: number;
}

function itemSize(item: Shoes | Muffler): string {
  if ('length' in item) {
    // length 프로퍼티를 가진 경우에만 실행
    return `머플러의 길이는 ${item.length}cm 입니다!`;
  } else {
    return `신발의 사이즈는 ${item.size}mm 입니다!`;
  }
}

const shoes: Shoes = { size: 230 };
const muffler: Muffler = { length: 180 };

console.log(itemSize(shoes)); // 신발의 사이즈는 230mm 입니다!
console.log(itemSize(muffler)); // 머플러의 길이는 180cm 입니다!

4) instanceof

class Book {
  read(): string {
    return "책을 읽습니다!";
  }
}

class Food {
  eat(): string {
    return "음식을 먹습니다!";
  }
}

function action(x: Book | Food): string {
  if (x instanceof Book) {
    return x.read();
  } else {
    return x.eat();
  }
}

const myBook = new Book();
const myFood = new Food();

console.log(action(myBook));  // 책을 읽습니다!
console.log(action(myFood));  // 음식을 먹습니다!

5) 리터럴

type Feeling = 'happy' | 'angry' | 'sad';

function modeStatus(feeling: Feeling) {
  switch (feeling) {
    case 'happy':
      console.log("나는 행복해🥰");
      break;
    case 'angry':
      console.log("나는 화났어😡");
      break;
    case 'sad':
      console.log("나는 슬퍼😢");
      break;
		default:
			console.log("happy, angry, sad 중 한 가지를 입력해 주세요!");
  }
}

6) null과 undefined

type A = number | null | undefined;

function whatIsX(x: A): string {
  if (x === null) {
		// null을 사용한 타입 가드
    return 'x는 null 입니다.';
  } else if (x === undefined) {
		// undefined를 사용한 타입 가드
    return 'x는 undefined 입니다.';
  } else {
    return `x는 ${x} 입니다.`;
  }
}

const numberX: A = 10;
const nullX: A = null;
const undefinedX: A = undefined;

console.log(whatIsX(numberX));      // x는 10 입니다.
console.log(whatIsX(nullX));        // x는 null 입니다.
console.log(whatIsX(undefinedX));   // x는 undefined 입니다.

7) 사용자 정의 타입 가드

interface User {
  name: string | null;
  age: number;
}

function hasNoName(user: User): user is User & { name: null } {
	//  is 연산자를 사용해 타입을 명시합니다
  return user.name === null;
}

const user: User = getUser(); 
// getUser는 User 타입의 객체를 반환하는 함수라고 가정합니다.

if (hasNoName(user)) {
  console.log('이름이 입력되지 않은 사용자입니다.');
} else {
  console.log(`사용자의 이름은 ${user.name}입니다.`);
}

8) 서로소 유니온 타입

type Admin = {
  name: string;
  kickCount: number;
};
type Member = {
  name: string;
  point: number;
};
type Guest = {
  name: string;
  visitCount: number;
};

// union type
type User = Admin | Member | Guest;

function func(user: User) {
    // admin
  if ("kickCount" in user) {
    console.log(`${user.name}님 지금까지 ${user.kickCount}명 내보내셨습니다.`);
    // member
  } else if ("point" in user) {
    console.log(`${user.name}님 지금까지 ${user.point}포인트를 모으셨습니다.`);
    // guest
  } else {
    console.log(`${user.name}님 지금까지 ${user.visitCount}번 방문하셨습니다.`);
  }
}

// tag가 ADMIN이면서 동시에 MEMBER인 경우는 존재할 수 없다.
// 즉, 교집합이 없이 서로소 관계이다.

type Admin = {
  tag: "ADMIN";
  name: string;
  kickCount: number;
};
type Member = {
  tag: "MEMBER";
  name: string;
  point: number;
};
type Guest = {
  tag: "GUEST";
  name: string;
  visitCount: number;
};

type User = Admin | Member | Guest;

function func(user: User) {
    // admin
  if (user.tag === "ADMIN") {
    console.log(`${user.name}님 지금까지 ${user.kickCount}명 내보내셨습니다.`);
    // member
  } else if (user.tag === "MEMBER") {
    console.log(`${user.name}님 지금까지 ${user.point}포인트를 모으셨습니다.`);
    // guest
  } else {
    console.log(`${user.name}님 지금까지 ${user.visitCount}번 방문하셨습니다.`);
  }
}