24.01.18 (목)

학습구간 및 정리본

질문과 답변

1. infer

❓ infer를 활용하여 타입을 만들어보세요.

infer를 사용하여, 배열의 요소 타입을 추론하는 ElementType 타입을 만들어 보세요.

• ElementType 타입은 배열을 입력으로 받아 그 배열의 요소 타입을 추론해야 합니다.
• 배열이 아닌 타입이 입력으로 주어지면, never 타입을 반환해야 합니다.

type ElementType<T> = /* 여기에 구현하세요 */;

const numberArray = [1, 2, 3];
const stringArray = ["a", "b", "c"];

type NumberElementType = ElementType<typeof numberArray>; // 'number' 타입이 되어야 함
type StringElementType = ElementType<typeof stringArray>; // 'string' 타입이 되어야 함

나의 답변

// 제네릭 `Array` 타입을 사용
type ElementType<T> = T extends Array<infer U> ? U : never;

// 배열 리터럴 표현 `(infer U)[]`을 사용
type ElementType<T> = T extends (infer U)[] ? U : never;

이 코드에서 T extends Array<infer U>는 T가 Array<U> 형태인지 확인합니다.

만약 T가 배열이면, U는 배열의 요소 타입을 의미하고, infer U는 이 배열의 요소 타입을 추론하라는 지시입니다. 따라서, T가 배열이면 ElementType<T>는 배열의 요소 타입인 U를 반환합니다.

반면에 T가 배열이 아니면, 조건문은 거짓이 되고, never 타입을 반환합니다. never 타입은 TypeScript에서 사용되는 특별한 타입으로, 여기서는 "타입이 없음"을 나타냅니다.

const numberArray = [1, 2, 3];
const stringArray = ["a", "b", "c"];

type NumberElementType = ElementType<typeof numberArray>; // 'number' 타입
type StringElementType = ElementType<typeof stringArray>; // 'string' 타입

• ElementType<typeof numberArray>는 number[]에 적용되므로, 결과는 number 타입입니다.
• ElementType<typeof stringArray>는 string[]에 적용되므로, 결과는 string 타입입니다.

위와같이 infer 키워드를 사용하여 조건부 타입을 정의하고, 배열의 요소 타입을 효율적으로 추론할 수 있습니다.

2. NonNullable

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

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

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

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

나의 답변

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가 아닌지 확인한다.
  
  

사용예시

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()는 안전하게 사용될 수 있다.

3. extends

❓ typescript에서 extends가 활용되는 3가지를 설명해주세요.

typescript에서 extends는 크게 3가지 방식으로 활용될 수 있습니다. 그 중 하나는 이번 챕터에서 배운 조건부 타입으로 설정하는 것인데요. 3가지 방식에 대한 설명과 조건부 타입을 설정할 때의 간단한 예제 코드를 작성해주세요.

나의 답변

1. 인터페이스 확장

인터페이스가 다른 인터페이스의 모든 멤버를 상속받을 수 있다.

2. 제네릭 제약

제네릭 타입을 사용할 때, extends를 사용하여 특정 타입의 서브타입만을 허용하는 제약 조건을 추가할 수 있다.

3. 조건부 타입 설정

입력 타입에 따라 다른 타입을 반환할 수 있게한다.

type Check<T> = T extends string ? "String" : "Not String";

type Type1 = Check<string>; // "String"
type Type2 = Check<number>; // "Not String"