앞에 Type Narrowing에 대해 정리했지만 타입 가드를 들었을 때 둘이 같은거라고 생각했다. 하지만 약간의 차이가 있고 알고보면 완전히 다른 것이라는 것을 알 수 있다. 예를 들어서 설명하는 것이 쉽다.
const value: unknown = "hello";
if (typeof value === "string") { // 타입 가드 사용 !
console.log(value.toUpperCase()); // 이렇게 타입 가드후 타입 내로잉을 거친다.
}
unknown을 예로 들어 설명하면 쉽다. unknown은 any와 함께 최상위 타입에 속한다. 그 말은 즉 타입이 구체적이지 않고 추상적이라는 말이다.
여기서 최상위 타입이란?
모든 타입이 할당 가능한 타입을 의미한다. ➡️ 즉 타입이 매우 추상적이고 구체적인 정보가 없다.(안좋은거임)
이런 경우엔 타입을 좁히는 작업(Narrowing)이 필요하다.
위 코드처럼 if (typeof value === "string") 과 같은 조건을 통해 타입을 판별하는 구문을 Type Guard라고 부른다.
그리고 해당 조건 안에 진입한 시점부터 타입스크립트는 value를 string으로 자동으로 좁혀준다.
이 과정을 Type Narrowing(타입 좁히기)라고 한다.
그래서 타입 가드가 있다면 타입 네로잉이 거의 항상 동반한다고 볼 수 있다.
[참고]
- instanceof는 클래스를 기반으로 생성된 객체인지를 검사할 때 사용한다.
📌 is : type predicate = user-defined type guard
사용자정의 타입가드는 boolean값을 반환하고 Return type으로 value is type을 지정해주는 함수를 의미한다.
const isString = (value: unknown): value is string =>
typeof value === 'string';
리턴이 true이면 value 너는 이제 string이야 ! 하는 의미이다 .
//error 가 IErrorWithMessage 타입인지 검사하고 narrowing -> 초기 리턴값은 불리언
// 이 함수가 true라고 리턴하는 순간부터 타입스크립트는 error를 IErrorWithMessage라는 타입으로 인식한다.
const isErrorWithMessage = (error: unknown): error is IErrorWithMessage =>
typeof error === "object" &&
error !== null &&
"message" in error &&
typeof error.message === "string";
isErrorWithMessage가 true를 리턴하는 순간, 타입스크립트에게 error 는 이제 ErrorWithMessage 야 !! 라고 선언하는 셈이다.
📌 typeof
제공되는 값의 타입을 반환한다. ➡️ 실제 객체를 타입으로 변환
📌 keyof
존재하는 타입의 키를 바탕으로 유니언 타입을 생성한다.
유니온 타입 ? 여러 타입중 하나일 수 있다!!
const hello = {
name: "hong",
age: 12,
hobby: "running",
};
type typeHello = keyof hello; // 객체 타입의 프로퍼티 key로 구성된다. "name"|"age"|"hobby"로 구성
📌 keyof typeof
제공되는 값에 존재하는 키만 매개변수의 타입으로 허용하고 싶을 때 사용하면 된다.
const hello = {
name: "hong",
age: 12,
hobby: "running",
};
type typeHello = keyof typeof hello;

⭐️ keyof, typeof 정리
객체 key를 상수 타입으로
const fruitCode = {
apple: 'APL',
banana: 'BNN',
orange: 'ORG',
} as const; // 리터럴 타입으로 고정
// 1.typeof로 실제 객체를 객체 타입으로 변환
// 2. keyof로 변환된 객체 타입의 key를 유니온 타입으로 변환해준다.
type Fruit = keyof typeof fruitCode; // "apple" | "banana" | "orange"
객체 key의 값을 상수 타입으로
const fruitCode = {
apple: 'APL',
banana: 'BNN',
orange: 'ORG',
} as const; // 리터럴 타입으로 고정
type Fruit = typeof fruitCode[keyof typeof fruitCode] // "APL"|"BNN"|"ORG"
AS , Type Assertion
값의 타입을 개발자가 직접 타입을 단언, 주장하는 것이다. 타입스크립트가 추론한 타입을 덮어씌우는 행위이다.
const value = "hello" as string;
➡️ 타입스크립트가 타입을 추론을 하지 못하는 경우 사용한다. (내가 더 정확히 알고, 안전할 경우만사용, 최대한 쓰지 않는 것이 좋다 !)
‼️ 아래와 같이 쓰면, 런타임 중에 에러가 발생할 수 있다.
const num = "123" as unknown as number;'TypeScript' 카테고리의 다른 글
| 친해지기2-Type Challenges : 00007-easy-readonly (1) | 2025.04.29 |
|---|---|
| 친해지기1- Type Challenges : 00004-easy-pick (0) | 2025.04.28 |
| [TS] 타입스크립트에서의 클래스 (0) | 2025.04.23 |
| [TS] TIL , as const ( const assertion ) (0) | 2025.04.22 |
| [TS] 인터페이스&타입 등등 (0) | 2025.04.22 |