5.3.3_`NonNullable`을 사용하여 타입 검사 함수를 작성해보세요.

[lulla-by]

📝 p171

❓ 일반적으로 null이나 undefined를 처리하는 경우 if문을 사용한 타입가드를 통해 값을 처리합니다.

하지만 TS에서는 is 키워드와 TS에서 제공하는 유틸리티 타입인 NonNullable을 사용하여 null을 처리하는 함수를 만들어 타입 가드에 활용할 수 있습니다.

is와 NonNullable을 사용하여 타입 가드 함수를 작성해보세요.

[Stilllee]

function isNonNullable<T>(value: T): value is NonNullable<T> {
  return value !== null && value !== undefined;
}

• isNonNullable 함수는 어떤 값이 null이나 undefined가 아닐 때 true를 반환한다.
• 이 함수는 제네릭 타입 T를 받아, NonNullable<T>로 타입 가드를 한다.
• 함수 내부에서 value !== null && value !== undefined를 통해 값이 null이나 undefined가 아닌지 확인한다.

사용 예시

```ts const exampleValue: string | null = getSomeValue(); if (isNotNullOrUndefined(exampleValue)) { // 여기서 exampleValue는 'string' 타입으로 간주 console.log(exampleValue.toUpperCase()); } ``` - `maybeNull`이라는 변수가 `string | null` 타입일 때, `isNonNullable(maybeNull)`을 조건으로 사용하면, 해당 조건문 내에서 `maybeNull`은 `null`이 아니라고 추론되어 `string`으로 간주된다. - `toUpperCase()`는 `string` 타입에만 사용 가능한 메소드이기 때문에 `maybeNull.toUpperCase()`는 안전하게 사용될 수 있다.

[sryung1225]

function NonNullable<T>(value: T): value is NonNullable<T> {
  return value !== null && value !== undefined;
}

매개변수 value가 null 또는 undefined일 때 false를 반환하는 타입 가드 함수 NonNullable을 만들었습니다.

[eeeyooon]

function isNotUndefined<T>(value: T): value is NonNullable<T> {
  return value !== null && value !== undefined;
}

제네릭 타입 T를 받고, value가 null이나 undefined가 아닐 경우 true를 반환합니다. 반환 타입이 value is NonNullable<T>는 타입스크립트에게 isNotUndefined 함수가 true를 반환할 때 value의 타입이 null이나 undefined를 제외한 T의 타입입을 알려주는 타입 가드입니다.

[lulla-by]

정답은 다음과 같습니다.

NonNullableType은 제네릭으로 T를 받아 NonNullable유틸타입으로 넘겨줍니다.

이후 testNonNullable 함수에서 받은 value가 null 또는 undefined 인지를 확인하여 null or undefined 인 경우에는 false를 아닌 경우에는 true 를 반환해줍니다.

type NonNullableType<T> = NonNullable<T>;

function testNonNullable<T>(value: T): value is NonNullableType<T> {
  return value !== null && value !== undefined;
}

이를 활용한 데이터의 타입을 반환하는 예시 함수입니다.

function isValidType(data?: any) {
  const result = testNonNullable(data);
  return result ? typeof data : "null or undefined";
}

console.log(isValidType("data")); // "string"
console.log(isValidType());        // "null or undefined"
console.log(isValidType(12));        // "number"